diff --git a/apps/web/src/components/organisms/AdminImageManager.stories.js b/apps/web/src/components/organisms/AdminImageManager.stories.js index baa8071..a44d440 100644 --- a/apps/web/src/components/organisms/AdminImageManager.stories.js +++ b/apps/web/src/components/organisms/AdminImageManager.stories.js @@ -38,11 +38,11 @@ export const EditAltTextWithKeyboard = { args: { images }, play: async ({ canvasElement }) => { const canvas = within(canvasElement); - await userEvent.click(canvas.getAllByRole('button', { name: 'Edit alt text' })[0]); + await userEvent.click(canvas.getAllByRole('button', { name: /Edit alt text for image/ })[0]); const input = canvas.getAllByLabelText('Alt text')[0]; await userEvent.clear(input); await userEvent.type(input, 'Updated front image'); - await userEvent.click(canvas.getByRole('button', { name: 'Save alt text' })); + await userEvent.click(canvas.getByRole('button', { name: /Save alt text for image/ })); await expect(canvas.getByDisplayValue('Updated front image')).toBeInTheDocument(); }, }; @@ -60,7 +60,7 @@ export const DisabledAfterRefreshFailure = { play: async ({ canvasElement }) => { const canvas = within(canvasElement); await expect(canvas.getByLabelText('Add images')).toBeDisabled(); - for (const button of canvas.getAllByRole('button', { name: /Edit alt text|Make primary|Move up|Move down|Delete image/ })) { + for (const button of canvas.getAllByRole('button', { name: /Edit alt text for image|Make image .* primary|Move image .* (up|down)|Delete image/ })) { await expect(button).toBeDisabled(); } }, @@ -70,7 +70,7 @@ export const AltTextLimit = { args: { images: [{ ...images[0], altText: 'card '.repeat(200) }] }, play: async ({ canvasElement }) => { const canvas = within(canvasElement); - await userEvent.click(canvas.getByRole('button', { name: 'Edit alt text' })); + await userEvent.click(canvas.getByRole('button', { name: /Edit alt text for image/ })); const input = canvas.getByLabelText('Alt text'); await expect(input).toHaveAttribute('maxlength', '1000'); await expect(input).toHaveAccessibleDescription(/up to 1,000 characters/); @@ -86,7 +86,7 @@ export const OversizedExistingAltText = { args: { images: [{ ...images[0], altText: 'card '.repeat(201) }] }, play: async ({ canvasElement }) => { const canvas = within(canvasElement); - await userEvent.click(canvas.getByRole('button', { name: 'Edit alt text' })); + await userEvent.click(canvas.getByRole('button', { name: /Edit alt text for image/ })); await expect(canvas.getByRole('alert')).toHaveTextContent('Alt text must be 1,000 characters or fewer.'); await expect(canvas.getByLabelText('Alt text')).toHaveAttribute('aria-invalid', 'true'); await expect(canvas.getByRole('button', { name: 'Save alt text' })).toBeDisabled(); diff --git a/apps/web/src/components/organisms/AdminImageManager.vue b/apps/web/src/components/organisms/AdminImageManager.vue index 58c3ca9..b97c8e9 100644 --- a/apps/web/src/components/organisms/AdminImageManager.vue +++ b/apps/web/src/components/organisms/AdminImageManager.vue @@ -90,19 +90,19 @@ function handleDrop(event) {
- - + +

Describe the image in up to 1,000 characters. Clear the field to remove its alt text.

- - - - - + + + + +
diff --git a/docs/IMPLEMENTATION-STATUS.md b/docs/IMPLEMENTATION-STATUS.md index fee7ce1..28f09ec 100644 --- a/docs/IMPLEMENTATION-STATUS.md +++ b/docs/IMPLEMENTATION-STATUS.md @@ -285,6 +285,7 @@ Remaining roadmap areas are approved external provider credentials/adapters, bro - Review/list controls now explain active-copy requirements, cents units, and publication prerequisites through associated help text. - Image upload controls now expose accepted formats and the configured per-item limit through associated help text. - Image upload constraint guidance now has Storybook interaction coverage. +- Repeated image-management actions now include image-specific accessible names. ## Local Commands