AnchoredOverlay: Add aria-expanded to anchor (#1758)

* add aria-expanded to the menu button

* add changeset

* update snapshots

Author: siddharthkp

.changeset/actionmenu2-aria-expanded.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+ActionMenu v2: Add aria-expanded to the ActionMenu.Button

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 (
     <>
-      <Button ref={anchorRef} onClick={() => setOpen(!open)}>
+      <Button ref={anchorRef} aria-haspopup="true" aria-expanded={open} onClick={() => setOpen(!open)}>
         {open ? 'Close Menu' : 'Open Menu'}
       </Button>
 

src/AnchoredOverlay/AnchoredOverlay.tsx

@@ -156,6 +156,7 @@ export const AnchoredOverlay: React.FC<AnchoredOverlayProps> = ({
           id: anchorId,
           'aria-labelledby': anchorId,
           'aria-haspopup': 'true',
+          'aria-expanded': open,
           tabIndex: 0,
           onClick: onAnchorClick,
           onKeyDown: onAnchorKeyDown

src/__tests__/__snapshots__/ActionMenu.test.tsx.snap

@@ -68,6 +68,7 @@ exports[`ActionMenu renders consistently 1`] = `
 }
 
 <button
+  aria-expanded={false}
   aria-haspopup="true"
   aria-label="menu"
   aria-labelledby="react-aria-1"

src/__tests__/__snapshots__/ActionMenu2.test.tsx.snap

@@ -80,6 +80,7 @@ exports[`ActionMenu renders consistently 1`] = `
   fontFamily="normal"
 >
   <button
+    aria-expanded={false}
     aria-haspopup="true"
     aria-labelledby="react-aria-1"
     className="c1"

src/__tests__/__snapshots__/AnchoredOverlay.test.tsx.snap

@@ -80,6 +80,7 @@ exports[`AnchoredOverlay renders consistently 1`] = `
   fontFamily="normal"
 >
   <button
+    aria-expanded={false}
     aria-haspopup="true"
     aria-labelledby="react-aria-1"
     className="c1"
@@ -193,6 +194,7 @@ exports[`AnchoredOverlay should render consistently when open 1`] = `
     font-family="normal"
   >
     <button
+      aria-expanded="true"
       aria-haspopup="true"
       aria-labelledby="react-aria-1"
       class="c1"

src/__tests__/__snapshots__/DropdownMenu.test.tsx.snap

@@ -72,6 +72,7 @@ exports[`DropdownMenu renders consistently 1`] = `
 }
 
 <button
+  aria-expanded={false}
   aria-haspopup="true"
   aria-labelledby="react-aria-1"
   className="c0"

src/__tests__/__snapshots__/SelectPanel.test.tsx.snap

@@ -84,6 +84,7 @@ exports[`SelectPanel renders consistently 1`] = `
   fontFamily="normal"
 >
   <button
+    aria-expanded={false}
     aria-haspopup="true"
     aria-labelledby="react-aria-1"
     className="c1"

src/stories/ActionMenu2.stories.tsx

@@ -137,7 +137,7 @@ export function ExternalAnchor(): JSX.Element {
       <h2>External Open State: {open ? 'Open' : 'Closed'}</h2>
       <h2>Last option activated: {actionFired}</h2>
       <div>
-        <Button ref={anchorRef} onClick={() => setOpen(!open)}>
+        <Button ref={anchorRef} onClick={() => setOpen(!open)} aria-expanded={open} aria-haspopup="true">
           {open ? 'Close Menu' : 'Open Menu'}
         </Button>
       </div>