From a920142688ecc6b94f6f12b199093b9498206a9e Mon Sep 17 00:00:00 2001 From: Siddharth Kshetrapal Date: Mon, 21 Feb 2022 16:16:24 +0100 Subject: [PATCH] Bring in changes from #1851 --- .changeset/drafts-actionlist-group-roles.md | 5 ++++ .storybook/main.js | 4 +-- src/ActionList2/Group.tsx | 11 ++++++++- src/ActionList2/Item.tsx | 4 +-- src/ActionList2/List.tsx | 9 +++++-- src/__tests__/ActionList2.test.tsx | 1 + src/stories/ActionList2/examples.stories.tsx | 6 ++--- src/stories/ActionList2/fixtures.stories.tsx | 26 +++++++++++--------- src/utils/testing.tsx | 3 ++- 9 files changed, 46 insertions(+), 23 deletions(-) create mode 100644 .changeset/drafts-actionlist-group-roles.md diff --git a/.changeset/drafts-actionlist-group-roles.md b/.changeset/drafts-actionlist-group-roles.md new file mode 100644 index 00000000000..9be02811d71 --- /dev/null +++ b/.changeset/drafts-actionlist-group-roles.md @@ -0,0 +1,5 @@ +--- +'@primer/react': patch +--- + +Better aria roles for ActionList group diff --git a/.storybook/main.js b/.storybook/main.js index d9b543238bc..73623baad38 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -4,7 +4,7 @@ module.exports = { '@storybook/addon-a11y', '@storybook/addon-links', '@storybook/addon-essentials', - 'storybook-addon-performance/register', - '@whitespace/storybook-addon-html' + 'storybook-addon-performance/register' + // '@whitespace/storybook-addon-html' ] } diff --git a/src/ActionList2/Group.tsx b/src/ActionList2/Group.tsx index ff957aa7043..934a8051416 100644 --- a/src/ActionList2/Group.tsx +++ b/src/ActionList2/Group.tsx @@ -45,10 +45,14 @@ export const Group: React.FC = ({ ...props }) => { const labelId = useSSRSafeId() + const {role: listRole} = React.useContext(ListContext) + + console.log({listRole}) return ( = ({ > {title &&
} - + {props.children} diff --git a/src/ActionList2/Item.tsx b/src/ActionList2/Item.tsx index be233836fa6..db1c4ed04db 100644 --- a/src/ActionList2/Item.tsx +++ b/src/ActionList2/Item.tsx @@ -104,7 +104,7 @@ export const Item = React.forwardRef( ): JSX.Element => { const {variant: listVariant, showDividers, selectionVariant: listSelectionVariant} = React.useContext(ListContext) const {selectionVariant: groupSelectionVariant} = React.useContext(GroupContext) - const {container, afterSelect, selectionAttribute = 'aria-selected'} = React.useContext(ActionListContainerContext) + const {container, afterSelect, selectionAttribute} = React.useContext(ActionListContainerContext) let selectionVariant: ListProps['selectionVariant'] | GroupProps['selectionVariant'] if (typeof groupSelectionVariant !== 'undefined') selectionVariant = groupSelectionVariant @@ -227,7 +227,7 @@ export const Item = React.forwardRef( aria-labelledby={`${labelId} ${slots.InlineDescription ? inlineDescriptionId : ''}`} aria-describedby={slots.BlockDescription ? blockDescriptionId : undefined} role={role || itemRole} - {...{[selectionAttribute]: selected}} + {...(selectionAttribute && {[selectionAttribute]: selected})} {...props} > diff --git a/src/ActionList2/List.tsx b/src/ActionList2/List.tsx index de1363ed419..a3c060a532a 100644 --- a/src/ActionList2/List.tsx +++ b/src/ActionList2/List.tsx @@ -24,7 +24,7 @@ export type ListProps = { role?: AriaRole } & SxProp -type ContextProps = Pick +type ContextProps = Pick export const ListContext = React.createContext({}) const ListBox = styled.ul(sx) @@ -56,7 +56,12 @@ export const List = React.forwardRef( ref={forwardedRef} > {props.children} diff --git a/src/__tests__/ActionList2.test.tsx b/src/__tests__/ActionList2.test.tsx index 9b29c0beb62..d266852fb20 100644 --- a/src/__tests__/ActionList2.test.tsx +++ b/src/__tests__/ActionList2.test.tsx @@ -42,6 +42,7 @@ function SingleSelectListStory(): JSX.Element { key={index} role="option" selected={index === selectedIndex} + aria-selected={index === selectedIndex} onSelect={() => setSelectedIndex(index)} disabled={project.disabled} > diff --git a/src/stories/ActionList2/examples.stories.tsx b/src/stories/ActionList2/examples.stories.tsx index 3f8ed97b884..bfc17034b46 100644 --- a/src/stories/ActionList2/examples.stories.tsx +++ b/src/stories/ActionList2/examples.stories.tsx @@ -190,8 +190,8 @@ export function Groups(): JSX.Element {

Grouped content with labels and description. This patterns appears in pull requests to pick a reviewer.

- - + + {users.slice(0, 2).map(user => ( ))} - + {users.slice(2).map(user => (

Disabled Items

- + {projects.map((project, index) => ( setSelectedIndex(index)} disabled={index === 1} > @@ -250,13 +251,14 @@ export function GroupsStory(): JSX.Element { <>

Groups

- - + + {users.slice(0, 2).map(user => ( assignee.login === user.login))} + aria-checked={Boolean(assignees.find(assignee => assignee.login === user.login)) || undefined} onSelect={() => toggleAssignee(user)} > @@ -268,12 +270,13 @@ export function GroupsStory(): JSX.Element { ))} - + {users.slice(2).map(user => ( assignee.login === user.login))} + aria-checked={Boolean(assignees.find(assignee => assignee.login === user.login)) || undefined} onSelect={() => toggleAssignee(user)} > @@ -1007,12 +1010,12 @@ export function MemexSortable(): JSX.Element {

Memex Sortable List

- - + + {visibleOptions.map(option => ( toggle(option.text)} reorder={reorder} @@ -1020,7 +1023,6 @@ export function MemexSortable(): JSX.Element { ))} ( toggle(option.text)} > diff --git a/src/utils/testing.tsx b/src/utils/testing.tsx index 23b6ded773c..36b74882041 100644 --- a/src/utils/testing.tsx +++ b/src/utils/testing.tsx @@ -254,7 +254,8 @@ export function checkStoriesForAxeViolations(name: string) { Object.values(Stories).map(Story => { if (typeof Story !== 'function') return - it(`story ${(Story as StoryType).storyName} should have no axe violations`, async () => { + const {storyName, name: StoryFunctionName} = Story as StoryType + it(`story ${storyName || StoryFunctionName} should have no axe violations`, async () => { const {container} = HTMLRender() const results = await axe(container) expect(results).toHaveNoViolations()