Skip to content

Components: Fix Storybook accessibility issues in stories #81777

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ciampo merged 13 commits into from
Aug 19, 2026
Merged

Components: Fix Storybook accessibility issues in stories #81777

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
e95e603
Animate: Fix color-contrast a11y issue in Loading story
i-am-chitti Aug 14, 2026
ed9b038
BorderBoxControl: Fix color-contrast a11y issue in story helper text
i-am-chitti Aug 14, 2026
70eb079
Composite: Fix aria-allowed-role a11y issue in legacy story
i-am-chitti Aug 14, 2026
f517ecc
FormToggle: Fix missing label a11y issue in story
i-am-chitti Aug 14, 2026
3285b65
KeyboardShortcuts: Fix unlabeled form control a11y issue in story
i-am-chitti Aug 14, 2026
07483d6
MenuGroup, MenuItem, MenuItemsChoice: Fix aria-required-parent a11y i…
i-am-chitti Aug 14, 2026
b41f328
SandBox: Fix missing iframe title a11y issue in stories
i-am-chitti Aug 14, 2026
797b8a3
Scrollable: Fix unlabeled form control a11y issue in stories
i-am-chitti Aug 14, 2026
3a1ca1d
Merge branch 'trunk' of github.com:i-am-chitti/gutenberg into fix/815…
i-am-chitti Aug 18, 2026
76cb68f
FormToggle: Add spacing between label and toggle in story
i-am-chitti Aug 18, 2026
6d7c874
Merge branch 'trunk' of github.com:i-am-chitti/gutenberg into fix/815…
i-am-chitti Aug 19, 2026
93052a8
Revert FormToggle changes
i-am-chitti Aug 19, 2026
f836f51
Animate: Remove the Loading story
i-am-chitti Aug 19, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 0 additions & 10 deletions packages/components/src/animate/stories/index.story.tsx
View file
Open in desktop
Comment thread
ciampo marked this conversation as resolved.
Original file line number Diff line number Diff line change
Expand Up @@ -77,16 +77,6 @@ AppearBottomRight.args = {
),
};

export const Loading = Template.bind( {} );
Loading.args = {
type: 'loading',
children: ( { className } ) => (
<Notice className={ className } status="success">
<p>Loading animation.</p>
</Notice>
),
};

export const SlideIn = Template.bind( {} );
SlideIn.args = {
type: 'slide-in',
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/border-box-control/stories/index.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ const Template: StoryFn< typeof BorderBoxControl > = ( props ) => {
borderBottom: 'none',
} }
/>
<p style={ { color: '#aaa', fontSize: '0.9em' } }>
<p style={ { color: '#6c6c6c', fontSize: '0.9em' } }>
The BorderBoxControl is intended to be used within a component
that will provide reset controls. The button below is only for
convenience.
Expand Down
20 changes: 10 additions & 10 deletions packages/components/src/composite/legacy/stories/index.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -147,19 +147,19 @@ export const OneDimensionWithStateProp: StoryFn<
state={ state }
aria-label="Legacy Composite with state prop (one dimension)"
>
<CompositeItem state={ state } role="listitem">
<CompositeItem state={ state } role="listitem" render={ <div /> }>
Item 1
</CompositeItem>
<CompositeItem state={ state } role="listitem">
<CompositeItem state={ state } role="listitem" render={ <div /> }>
Item 2
</CompositeItem>
<CompositeItem state={ state } role="listitem">
<CompositeItem state={ state } role="listitem" render={ <div /> }>
Item 3
</CompositeItem>
<CompositeItem state={ state } role="listitem">
<CompositeItem state={ state } role="listitem" render={ <div /> }>
Item 4
</CompositeItem>
<CompositeItem state={ state } role="listitem">
<CompositeItem state={ state } role="listitem" render={ <div /> }>
Item 5
</CompositeItem>
</Composite>
Expand All @@ -178,19 +178,19 @@ export const OneDimensionWithSpreadProps: StoryFn<
{ ...state }
aria-label="Legacy Composite with spread props (one dimension)"
>
<CompositeItem { ...state } role="listitem">
<CompositeItem { ...state } role="listitem" render={ <div /> }>
Item 1
</CompositeItem>
<CompositeItem { ...state } role="listitem">
<CompositeItem { ...state } role="listitem" render={ <div /> }>
Item 2
</CompositeItem>
<CompositeItem { ...state } role="listitem">
<CompositeItem { ...state } role="listitem" render={ <div /> }>
Item 3
</CompositeItem>
<CompositeItem { ...state } role="listitem">
<CompositeItem { ...state } role="listitem" render={ <div /> }>
Item 4
</CompositeItem>
<CompositeItem { ...state } role="listitem">
<CompositeItem { ...state } role="listitem" render={ <div /> }>
Item 5
</CompositeItem>
</Composite>
Expand Down
4 changes: 2 additions & 2 deletions packages/components/src/keyboard-shortcuts/stories/index.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ Default.args = {
{ /* eslint-disable react/no-unescaped-entities */ }
<p>Hit the "a" or "b" key in this textarea:</p>
{ /* eslint-enable react/no-unescaped-entities */ }
<textarea />
<textarea aria-label="Keyboard shortcuts demo" />
</div>
),
};
Expand All @@ -52,7 +52,7 @@ Default.parameters = {
<p>
Hit the "a" or "b" key in this textarea:
</p>
<textarea />
<textarea aria-label="Keyboard shortcuts demo" />
</div>
</KeyboardShortcuts>
`,
Expand Down
15 changes: 9 additions & 6 deletions packages/components/src/menu-group/stories/index.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { useState } from '@wordpress/element';
import MenuGroup from '..';
import MenuItem from '../../menu-item';
import MenuItemsChoice from '../../menu-items-choice';
import { NavigableMenu } from '../../navigable-container';

const meta: Meta< typeof MenuGroup > = {
tags: [ 'manifest' ],
Expand All @@ -26,10 +27,12 @@ export default meta;

const Template: StoryFn< typeof MenuGroup > = ( args ) => {
return (
<MenuGroup { ...args }>
<MenuItem>Menu Item 1</MenuItem>
<MenuItem>Menu Item 2</MenuItem>
</MenuGroup>
<NavigableMenu>
<MenuGroup { ...args }>
<MenuItem>Menu Item 1</MenuItem>
<MenuItem>Menu Item 2</MenuItem>
</MenuGroup>
</NavigableMenu>
);
};

Expand All @@ -49,7 +52,7 @@ const MultiGroupsTemplate: StoryFn< typeof MenuGroup > = ( args ) => {
];

return (
<>
<NavigableMenu>
<MenuGroup label="View">
<MenuItem>Top Toolbar</MenuItem>
<MenuItem>Spotlight Mode</MenuItem>
Expand All @@ -63,7 +66,7 @@ const MultiGroupsTemplate: StoryFn< typeof MenuGroup > = ( args ) => {
onHover={ () => {} }
/>
</MenuGroup>
</>
</NavigableMenu>
);
};

Expand Down
9 changes: 6 additions & 3 deletions packages/components/src/menu-item/stories/index.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { link, more, check } from '@wordpress/icons';
import MenuGroup from '../../menu-group';
import MenuItem from '..';
import Shortcut from '../../shortcut';
import { NavigableMenu } from '../../navigable-container';

const meta: Meta< typeof MenuItem > = {
tags: [ 'manifest' ],
Expand Down Expand Up @@ -37,9 +38,11 @@ export default meta;

const Template: StoryFn< typeof MenuItem > = ( props ) => {
return (
<MenuGroup>
<MenuItem { ...props }>Menu Item 1</MenuItem>
</MenuGroup>
<NavigableMenu>
<MenuGroup>
<MenuItem { ...props }>Menu Item 1</MenuItem>
</MenuGroup>
</NavigableMenu>
);
};

Expand Down
25 changes: 14 additions & 11 deletions packages/components/src/menu-items-choice/stories/index.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import type { Meta, StoryFn } from '@storybook/react-vite';
import { useState } from '@wordpress/element';
import MenuItemsChoice from '..';
import MenuGroup from '../../menu-group';
import { NavigableMenu } from '../../navigable-container';

const meta: Meta< typeof MenuItemsChoice > = {
tags: [ 'manifest' ],
Expand Down Expand Up @@ -35,17 +36,19 @@ const Template: StoryFn< typeof MenuItemsChoice > = ( {
const [ choice, setChoice ] = useState( choices[ 0 ]?.value ?? '' );

return (
<MenuGroup label="Editor">
<MenuItemsChoice
choices={ choices }
value={ choice }
onSelect={ ( ...selectArgs ) => {
onSelect( ...selectArgs );
setChoice( ...selectArgs );
} }
onHover={ onHover }
/>
</MenuGroup>
<NavigableMenu>
<MenuGroup label="Editor">
<MenuItemsChoice
choices={ choices }
value={ choice }
onSelect={ ( ...selectArgs ) => {
onSelect( ...selectArgs );
setChoice( ...selectArgs );
} }
onHover={ onHover }
/>
</MenuGroup>
</NavigableMenu>
);
};

Expand Down
2 changes: 2 additions & 0 deletions packages/components/src/sandbox/stories/index.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,12 +28,14 @@ const Template: StoryFn< typeof SandBox > = ( args ) => <SandBox { ...args } />;

export const Default = Template.bind( {} );
Default.args = {
title: 'Sandbox preview',
html: '<p>Arbitrary HTML content</p>',
allowForms: false,
};

export const WithForm = Template.bind( {} );
WithForm.args = {
title: 'Sandbox preview with form',
html: '<form action="#"><label for="name">Name</label><input id="name" type="text" /><button type="submit">Submit</button></form>',
allowForms: true,
};
1 change: 1 addition & 0 deletions packages/components/src/scrollable/stories/index.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,7 @@ const Template: StoryFn< typeof Scrollable > = ( { ...args } ) => {
right: 0,
} }
type="text"
aria-label="Element out of view"
value="Focus me"
readOnly
/>
Expand Down
Loading