diff --git a/.changeset/actionmenu2-aria-expanded.md b/.changeset/actionmenu2-aria-expanded.md new file mode 100644 index 00000000000..be6ca82f9db --- /dev/null +++ b/.changeset/actionmenu2-aria-expanded.md @@ -0,0 +1,5 @@ +--- +'@primer/react': patch +--- + +ActionMenu v2: Add aria-expanded to the ActionMenu.Button diff --git a/docs/content/drafts/ActionMenu2.mdx b/docs/content/drafts/ActionMenu2.mdx index cdbd5c1cbc6..36d31ff6109 100644 --- a/docs/content/drafts/ActionMenu2.mdx +++ b/docs/content/drafts/ActionMenu2.mdx @@ -192,7 +192,7 @@ render( ### With External Anchor -To create an anchor outside of the menu, you need to switch to controlled mode for the menu and pass it as `anchorRef` to `ActionMenu`: +To create an anchor outside of the menu, you need to switch to controlled mode for the menu and pass it as `anchorRef` to `ActionMenu`. Make sure you add `aria-expanded` and `aria-haspopup` to the external anchor: ```javascript live noinline // import {ActionMenu, ActionList} from '@primer/react/drafts' @@ -204,7 +204,7 @@ const Example = () => { return ( <> - diff --git a/src/AnchoredOverlay/AnchoredOverlay.tsx b/src/AnchoredOverlay/AnchoredOverlay.tsx index 94c02a4502d..a343c97c3e2 100644 --- a/src/AnchoredOverlay/AnchoredOverlay.tsx +++ b/src/AnchoredOverlay/AnchoredOverlay.tsx @@ -156,6 +156,7 @@ export const AnchoredOverlay: React.FC = ({ id: anchorId, 'aria-labelledby': anchorId, 'aria-haspopup': 'true', + 'aria-expanded': open, 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 3fe19e10617..760bde79787 100644 --- a/src/__tests__/__snapshots__/ActionMenu.test.tsx.snap +++ b/src/__tests__/__snapshots__/ActionMenu.test.tsx.snap @@ -68,6 +68,7 @@ exports[`ActionMenu renders consistently 1`] = ` }