diff --git a/code/addons/a11y/src/components/VisionSimulator.stories.tsx b/code/addons/a11y/src/components/VisionSimulator.stories.tsx index ccbf09fbe583..0c949c1b0eb8 100644 --- a/code/addons/a11y/src/components/VisionSimulator.stories.tsx +++ b/code/addons/a11y/src/components/VisionSimulator.stories.tsx @@ -31,7 +31,7 @@ const meta = preview.meta({ export default meta; const openMenu: PlayFunction = async ({ canvas, userEvent }) => { - await userEvent.click(canvas.getByRole('button', { name: 'Vision simulator' })); + await userEvent.click(canvas.getByRole('button', { name: 'Vision filter' })); }; export const Default = meta.story({ @@ -51,7 +51,7 @@ export const Selection = meta.story({ await context.userEvent.click(await screen.findByText('Blurred vision')); await expect(managerContext.api.updateGlobals).toHaveBeenCalledWith({ vision: 'blurred' }); await expect( - context.canvas.getByRole('button', { name: 'Vision simulator Blurred vision' }) + context.canvas.getByRole('button', { name: 'Vision filter Blurred vision' }) ).toBeVisible(); }, }); diff --git a/code/addons/a11y/src/components/VisionSimulator.tsx b/code/addons/a11y/src/components/VisionSimulator.tsx index ec8d1050a792..19657f93b15a 100644 --- a/code/addons/a11y/src/components/VisionSimulator.tsx +++ b/code/addons/a11y/src/components/VisionSimulator.tsx @@ -36,8 +36,9 @@ const ColorIcon = styled.span<{ $filter: string }>( ); export const VisionSimulator = () => { - const [globals, updateGlobals] = useGlobals(); + const [globals, updateGlobals, storyGlobals] = useGlobals(); const value = globals[VISION_GLOBAL_KEY]; + const isLocked = storyGlobals[VISION_GLOBAL_KEY] !== undefined; const options = Object.entries(filters).map(([key, { label, percentage }]) => ({ title: label, @@ -52,7 +53,10 @@ export const VisionSimulator = () => { resetLabel="Reset color filter" onReset={() => updateGlobals({ [VISION_GLOBAL_KEY]: undefined })} icon={} - ariaLabel="Vision simulator" + disabled={isLocked} + ariaLabel={isLocked ? 'Vision filter set by story globals' : 'Vision filter'} + ariaDescription="Select a vision filter among predefined options, or reset to remove the filter." + tooltip={isLocked ? 'Vision filter set by story globals' : 'Change vision filter'} defaultOptions={value} options={options} onSelect={(selected) => updateGlobals({ [VISION_GLOBAL_KEY]: selected })}