Skip to content
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

Jump to bottom

Fix remaining Axe errors in Storybook #4704

Merged
merged 2 commits into from
Jun 28, 2024
Merged

Fix remaining Axe errors in Storybook #4704

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6ddc67b
Fix Axe errors in Storybook
TylerJDev Jun 28, 2024
baca515
Remove test example
TylerJDev Jun 28, 2024
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
6 changes: 3 additions & 3 deletions packages/react/src/ActionList/ActionList.features.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ export const WithVisualListHeading = () => (
<ActionList>
<ActionList.Heading as="h2">Filter by</ActionList.Heading>
<ActionList.Group>
<ActionList.GroupHeading as="h4">Repositories</ActionList.GroupHeading>
<ActionList.GroupHeading as="h3">Repositories</ActionList.GroupHeading>
<ActionList.Item onClick={() => {}}>
<ActionList.LeadingVisual>
<FileDirectoryIcon />
Expand Down Expand Up @@ -77,7 +77,7 @@ export const WithVisualListHeading = () => (
</ActionList.Group>

<ActionList.Group>
<ActionList.GroupHeading as="h4">Advanced</ActionList.GroupHeading>
<ActionList.GroupHeading as="h3">Advanced</ActionList.GroupHeading>
<ActionList.Item onClick={() => {}}>
<ActionList.LeadingVisual>
<PlusCircleIcon />
Expand Down Expand Up @@ -333,7 +333,7 @@ export const ListBoxMultiSelect = () => {
}
}
return (
<ActionList selectionVariant="multiple" aria-label="Project">
<ActionList role="menu" selectionVariant="multiple" aria-label="Project">
{projects.map((project, index) => (
<ActionList.Item
key={index}
Expand Down
4 changes: 0 additions & 4 deletions packages/react/src/ActionList/ActionList.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,6 @@ Playground.args = {
showDividers: false,
selectionVariant: undefined,
variant: 'inset',
role: 'listbox',
}
Playground.argTypes = {
showDividers: {
Expand Down Expand Up @@ -163,7 +162,6 @@ ItemPlayground.args = {
disabled: false,
inactiveText: '',
variant: 'default',
role: 'listitem',
id: 'item-1',
leadingVisual: null,
trailingVisual: null,
Expand Down Expand Up @@ -215,7 +213,6 @@ export const LinkItemPlayground = args => {
LinkItemPlayground.args = {
active: false,
disabled: false,
role: 'listitem',
id: 'item-1',
inactiveText: '',
leadingVisual: null,
Expand Down Expand Up @@ -282,7 +279,6 @@ GroupPlayground.argTypes = {
}
GroupPlayground.args = {
variant: 'subtle',
role: 'listbox',
title: 'Group title',
auxiliaryText: '',
}
4 changes: 2 additions & 2 deletions packages/react/src/PageLayout/PageLayout.features.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -162,7 +162,7 @@ export const NestedScrollContainer: StoryFn = args => (
<Placeholder label="Header" height={64} />
</PageLayout.Header>
<PageLayout.Content padding="normal" width="large">
<Box sx={{display: 'grid', gap: 3}}>
<Box sx={{display: 'grid', gap: 3}} tabIndex={0} aria-label="Page content">
{Array.from({length: args.numParagraphsInContent}).map((_, i) => (
<Box key={i} as="p" sx={{margin: 0}}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at enim id lorem tempus egestas a non
Expand Down Expand Up @@ -334,7 +334,7 @@ export const ScrollContainerWithinPageLayoutPane: StoryFn = () => (
</Box>
</PageLayout.Pane>
<PageLayout.Content padding="normal" width="large">
<Box sx={{display: 'grid'}}>
<Box sx={{display: 'grid'}} tabIndex={0} aria-label="Page content">
<Placeholder label="Page content" height={1600} />
</Box>
</PageLayout.Content>
Expand Down
22 changes: 14 additions & 8 deletions packages/react/src/stories/deprecated/ActionList.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -112,12 +112,15 @@ const selectListItems = new Array(6).fill(undefined).map((_, i) => {
export function SingleSelectListStory(): JSX.Element {
return (
<>
<h1>Single Select List</h1>
<h1 id="story-title">Single Select List</h1>
<ErsatzOverlay>
<ActionList
role="listbox"
aria-labelledby="story-title"
items={selectListItems.map((item, index) => ({
...item,
selected: index === 1,
role: 'option',
}))}
/>
</ErsatzOverlay>
Expand All @@ -129,13 +132,16 @@ SingleSelectListStory.storyName = 'Single Select'
export function MultiSelectListStory(): JSX.Element {
return (
<>
<h1>Multi Select List</h1>
<h1 id="story-title">Multi Select List</h1>
<ErsatzOverlay>
<ActionList
role="listbox"
aria-labelledby="story-title"
selectionVariant="multiple"
items={selectListItems.map((item, index) => ({
...item,
selected: index === 1 || index === 3,
role: 'option',
}))}
/>
</ErsatzOverlay>
Expand All @@ -156,8 +162,8 @@ export function ComplexListInsetVariantStory(): JSX.Element {
<ActionList
groupMetadata={[
{groupId: '0'},
{groupId: '1', header: {title: 'Live query', variant: 'filled'}},
{groupId: '2', header: {title: 'Layout', variant: 'subtle'}, showItemDividers: true},
{groupId: '1', header: {title: 'Live query', variant: 'filled', 'aria-level': 3}},
{groupId: '2', header: {title: 'Layout', variant: 'subtle', 'aria-level': 3}, showItemDividers: true},
{groupId: '3', renderItem: props => <ActionList.Item style={{fontWeight: 'bold'}} {...props} />},
{
groupId: '4',
Expand Down Expand Up @@ -233,8 +239,8 @@ export function ComplexListFullVariantStory(): JSX.Element {
variant="full"
groupMetadata={[
{groupId: '0'},
{groupId: '1', header: {title: 'Live query', variant: 'filled'}},
{groupId: '2', header: {title: 'Layout', variant: 'subtle'}},
{groupId: '1', header: {title: 'Live query', variant: 'filled', 'aria-level': 3}},
{groupId: '2', header: {title: 'Layout', variant: 'subtle', 'aria-level': 3}},
{groupId: '3', renderItem: props => <ActionList.Item style={{fontWeight: 'bold'}} {...props} />},
{
groupId: '4',
Expand Down Expand Up @@ -296,9 +302,9 @@ export function HeaderStory(): JSX.Element {
<>
<h1>Header</h1>
<h2>Filled Variant</h2>
<ActionList.Header title="Layout" variant="filled" />
<ActionList.Header title="Layout" variant="filled" aria-level={3} />
<h2>Subtle Variant</h2>
<ActionList.Header title="Layout" variant="subtle" />
<ActionList.Header title="Layout" variant="subtle" aria-level={3} />
</>
)
}
Expand Down
Loading