diff --git a/.changeset/anchored-overlay-clever-mails-roll.md b/.changeset/anchored-overlay-clever-mails-roll.md index 4db56e333ac..35a81944c2d 100644 --- a/.changeset/anchored-overlay-clever-mails-roll.md +++ b/.changeset/anchored-overlay-clever-mails-roll.md @@ -1,8 +1,5 @@ --- -"@primer/react": patch +'@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 - +AnchoredOverlay: `aria-expanded` attribute is removed from anchor when overlay is not open diff --git a/src/AnchoredOverlay/AnchoredOverlay.tsx b/src/AnchoredOverlay/AnchoredOverlay.tsx index 6cdc8a10452..49ca88c79b3 100644 --- a/src/AnchoredOverlay/AnchoredOverlay.tsx +++ b/src/AnchoredOverlay/AnchoredOverlay.tsx @@ -166,6 +166,7 @@ export const AnchoredOverlay: React.FC = ({ id: anchorId, 'aria-haspopup': 'true', 'aria-expanded': open ? 'true' : undefined, + tabIndex: 0, onClick: onAnchorClick, onKeyDown: onAnchorKeyDown })} diff --git a/src/__tests__/__snapshots__/ActionMenu.test.tsx.snap b/src/__tests__/__snapshots__/ActionMenu.test.tsx.snap index 925a5d2db9e..0e9b4d3d76e 100644 --- a/src/__tests__/__snapshots__/ActionMenu.test.tsx.snap +++ b/src/__tests__/__snapshots__/ActionMenu.test.tsx.snap @@ -130,6 +130,7 @@ exports[`ActionMenu renders consistently 1`] = ` id="react-aria-1" onClick={[Function]} onKeyDown={[Function]} + tabIndex={0} type="button" > Anchor Button @@ -201,6 +202,7 @@ 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 5447c83557e..6a30383ef8d 100644 --- a/src/__tests__/__snapshots__/SelectPanel.test.tsx.snap +++ b/src/__tests__/__snapshots__/SelectPanel.test.tsx.snap @@ -89,6 +89,7 @@ exports[`SelectPanel renders consistently 1`] = ` id="react-aria-1" onClick={[Function]} onKeyDown={[Function]} + tabIndex={0} type="button" > Select Items diff --git a/src/__tests__/deprecated/__snapshots__/ActionMenu.test.tsx.snap b/src/__tests__/deprecated/__snapshots__/ActionMenu.test.tsx.snap index 70b430b7144..ccd065a8243 100644 --- a/src/__tests__/deprecated/__snapshots__/ActionMenu.test.tsx.snap +++ b/src/__tests__/deprecated/__snapshots__/ActionMenu.test.tsx.snap @@ -74,5 +74,6 @@ exports[`ActionMenu renders consistently 1`] = ` id="react-aria-1" onClick={[Function]} onKeyDown={[Function]} + tabIndex={0} /> `; diff --git a/src/__tests__/deprecated/__snapshots__/DropdownMenu.test.tsx.snap b/src/__tests__/deprecated/__snapshots__/DropdownMenu.test.tsx.snap index 9666f15152e..dfcfe72cb7d 100644 --- a/src/__tests__/deprecated/__snapshots__/DropdownMenu.test.tsx.snap +++ b/src/__tests__/deprecated/__snapshots__/DropdownMenu.test.tsx.snap @@ -77,6 +77,7 @@ exports[`DropdownMenu renders consistently 1`] = ` id="react-aria-1" onClick={[Function]} onKeyDown={[Function]} + tabIndex={0} type="button" >