diff --git a/.changeset/anchored-overlay-clever-mails-roll.md b/.changeset/anchored-overlay-clever-mails-roll.md new file mode 100644 index 00000000000..4db56e333ac --- /dev/null +++ b/.changeset/anchored-overlay-clever-mails-roll.md @@ -0,0 +1,8 @@ +--- +"@primer/react": patch +--- + +AnchoredOverlay accessibility fixes +- `aria-expanded` attribute is removed from anchor when overlay is not open +- `tabIndex=0` is removed from anchor because it should only be used with interactive elements + diff --git a/src/AnchoredOverlay/AnchoredOverlay.tsx b/src/AnchoredOverlay/AnchoredOverlay.tsx index 1dd255473c6..6cdc8a10452 100644 --- a/src/AnchoredOverlay/AnchoredOverlay.tsx +++ b/src/AnchoredOverlay/AnchoredOverlay.tsx @@ -165,8 +165,7 @@ export const AnchoredOverlay: React.FC = ({ ref: anchorRef, id: anchorId, 'aria-haspopup': 'true', - 'aria-expanded': open, - tabIndex: 0, + 'aria-expanded': open ? 'true' : undefined, onClick: onAnchorClick, onKeyDown: onAnchorKeyDown })} diff --git a/src/__tests__/ActionMenu.test.tsx b/src/__tests__/ActionMenu.test.tsx index 7aa30c560ec..e7cccfce5b1 100644 --- a/src/__tests__/ActionMenu.test.tsx +++ b/src/__tests__/ActionMenu.test.tsx @@ -108,7 +108,7 @@ describe('ActionMenu', () => { ) - const button = component.getByLabelText('Select field type') + const button = component.getByLabelText('Field type') fireEvent.click(button) // select first item by role, that would close the menu @@ -127,7 +127,7 @@ describe('ActionMenu', () => { ) - const button = component.getByLabelText('Select field type to group by') + const button = component.getByLabelText('Group by') fireEvent.click(button) expect(component.getByLabelText('Status')).toHaveAttribute('role', 'menuitemradio') diff --git a/src/__tests__/__snapshots__/ActionMenu.test.tsx.snap b/src/__tests__/__snapshots__/ActionMenu.test.tsx.snap index d44220a337a..925a5d2db9e 100644 --- a/src/__tests__/__snapshots__/ActionMenu.test.tsx.snap +++ b/src/__tests__/__snapshots__/ActionMenu.test.tsx.snap @@ -125,13 +125,11 @@ exports[`ActionMenu renders consistently 1`] = ` fontFamily="normal" > @@ -203,7 +201,6 @@ exports[`AnchoredOverlay should render consistently when open 1`] = ` aria-haspopup="true" class="c1" id="react-aria-1" - tabindex="0" > Anchor Button diff --git a/src/__tests__/__snapshots__/SelectPanel.test.tsx.snap b/src/__tests__/__snapshots__/SelectPanel.test.tsx.snap index 17e80b889de..5447c83557e 100644 --- a/src/__tests__/__snapshots__/SelectPanel.test.tsx.snap +++ b/src/__tests__/__snapshots__/SelectPanel.test.tsx.snap @@ -84,13 +84,11 @@ exports[`SelectPanel renders consistently 1`] = ` fontFamily="normal" > @@ -505,7 +505,7 @@ export function MemexIteration(): JSX.Element { color: 'fg.muted', ':hover, :focus': {background: 'none !important', color: 'accent.fg'} }} - aria-label="Select iteration duration" + aria-label="Iteration duration" > {duration} {duration > 1 ? 'weeks' : 'week'} @@ -548,7 +548,7 @@ export function MemexAddColumn(): JSX.Element {