diff --git a/.changeset/giant-bobcats-deliver.md b/.changeset/giant-bobcats-deliver.md new file mode 100644 index 00000000000..ada0448a3f7 --- /dev/null +++ b/.changeset/giant-bobcats-deliver.md @@ -0,0 +1,7 @@ +--- +'@primer/react': patch +--- + +Update ActionList to place `id` on item with an ARIA role + + diff --git a/src/ActionList/Item.tsx b/src/ActionList/Item.tsx index 80e43b3df6a..64343735987 100644 --- a/src/ActionList/Item.tsx +++ b/src/ActionList/Item.tsx @@ -190,10 +190,10 @@ export const Item = React.forwardRef( [onSelect, disabled, afterSelect], ) - // use props.id if provided, otherwise generate one. - const labelId = useId(id) - const inlineDescriptionId = useId(id && `${id}--inline-description`) - const blockDescriptionId = useId(id && `${id}--block-description`) + const itemId = useId(id) + const labelId = `${itemId}--label` + const inlineDescriptionId = `${itemId}--inline-description` + const blockDescriptionId = `${itemId}--block-description` const ItemWrapper = _PrivateItemWrapper || React.Fragment @@ -208,6 +208,7 @@ export const Item = React.forwardRef( 'aria-describedby': slots.description?.props.variant === 'block' ? blockDescriptionId : undefined, ...(selectionAttribute && {[selectionAttribute]: selected}), role: role || itemRole, + id: itemId, } const containerProps = _PrivateItemWrapper ? {role: role || itemRole ? 'none' : undefined} : menuItemProps diff --git a/src/NavList/__snapshots__/NavList.test.tsx.snap b/src/NavList/__snapshots__/NavList.test.tsx.snap index ab5636102c6..fb4e2779519 100644 --- a/src/NavList/__snapshots__/NavList.test.tsx.snap +++ b/src/NavList/__snapshots__/NavList.test.tsx.snap @@ -306,9 +306,10 @@ exports[`NavList renders a simple list 1`] = ` >
Home @@ -328,9 +329,10 @@ exports[`NavList renders a simple list 1`] = ` class="c1 c6" >
About @@ -350,9 +352,10 @@ exports[`NavList renders a simple list 1`] = ` class="c1 c6" >
Contact @@ -736,9 +739,10 @@ exports[`NavList renders with groups 1`] = ` >
Getting started @@ -770,22 +774,23 @@ exports[`NavList renders with groups 1`] = ` role="presentation" > Components