ActionMenu: a11y fixes (batch 1) (primer#2099)

* Don't add aria-expanded=false

* remove "Select a" from aria-label

* remove tabIndex from AnchoredOverlay

* update story to use interactive element

* update snapshots

* Create anchored-overlay-clever-mails-roll.md

* update outdated label in test

* Add describedby to milestone story

Author: siddharthkp

.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
+

src/AnchoredOverlay/AnchoredOverlay.tsx

@@ -165,8 +165,7 @@ export const AnchoredOverlay: React.FC<AnchoredOverlayProps> = ({
           ref: anchorRef,
           id: anchorId,
           'aria-haspopup': 'true',
-          'aria-expanded': open,
-          tabIndex: 0,
+          'aria-expanded': open ? 'true' : undefined,
           onClick: onAnchorClick,
           onKeyDown: onAnchorKeyDown
         })}

src/__tests__/ActionMenu.test.tsx

@@ -108,7 +108,7 @@ describe('ActionMenu', () => {
         <SingleSelection />
       </ThemeProvider>
     )
-    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', () => {
         <MixedSelection />
       </ThemeProvider>
     )
-    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')

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

@@ -125,13 +125,11 @@ exports[`ActionMenu renders consistently 1`] = `
   fontFamily="normal"
 >
   <button
-    aria-expanded={false}
     aria-haspopup="true"
     className="c1"
     id="react-aria-1"
     onClick={[Function]}
     onKeyDown={[Function]}
-    tabIndex={0}
     type="button"
   >
     <span

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

@@ -80,13 +80,11 @@ exports[`AnchoredOverlay renders consistently 1`] = `
   fontFamily="normal"
 >
   <button
-    aria-expanded={false}
     aria-haspopup="true"
     className="c1"
     id="react-aria-1"
     onClick={[Function]}
     onKeyDown={[Function]}
-    tabIndex={0}
   >
     Anchor Button
   </button>
@@ -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
     </button>

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

@@ -84,13 +84,11 @@ exports[`SelectPanel renders consistently 1`] = `
   fontFamily="normal"
 >
   <button
-    aria-expanded={false}
     aria-haspopup="true"
     className="c1"
     id="react-aria-1"
     onClick={[Function]}
     onKeyDown={[Function]}
-    tabIndex={0}
     type="button"
   >
     Select Items

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

@@ -68,13 +68,11 @@ exports[`ActionMenu renders consistently 1`] = `
 }
 
 <button
-  aria-expanded={false}
   aria-haspopup="true"
   aria-label="menu"
   className="c0"
   id="react-aria-1"
   onClick={[Function]}
   onKeyDown={[Function]}
-  tabIndex={0}
 />
 `;

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

@@ -72,13 +72,11 @@ exports[`DropdownMenu renders consistently 1`] = `
 }
 
 <button
-  aria-expanded={false}
   aria-haspopup="true"
   className="c0"
   id="react-aria-1"
   onClick={[Function]}
   onKeyDown={[Function]}
-  tabIndex={0}
   type="button"
 >
   <svg

src/stories/ActionList/examples.stories.tsx

@@ -156,7 +156,7 @@ export function MultipleSelection(): JSX.Element {
 
       <p>This pattern appears in issues and pull requests to pick multiple assignees</p>
 
-      <ActionList selectionVariant="multiple" showDividers role="listbox" aria-label="Select assignees">
+      <ActionList selectionVariant="multiple" showDividers role="listbox" aria-label="Assignees">
         {users.map(user => (
           <ActionList.Item
             role="option"
@@ -192,7 +192,7 @@ export function Groups(): JSX.Element {
 
       <p>Grouped content with labels and description. This patterns appears in pull requests to pick a reviewer.</p>
 
-      <ActionList selectionVariant="multiple" role="menu" showDividers aria-label="Select reviewers">
+      <ActionList selectionVariant="multiple" role="menu" showDividers aria-label="Reviewers">
         <ActionList.Group title="Suggestions">
           {users.slice(0, 2).map(user => (
             <ActionList.Item
@@ -328,12 +328,7 @@ export function AsyncListWithSpinner(): JSX.Element {
       {results.length === 0 ? (
         <Text sx={{display: 'block', fontSize: 1, m: 2}}>No branches match that query</Text>
       ) : null}
-      <ActionList
-        selectionVariant="single"
-        role="listbox"
-        aria-label="Select a branch"
-        sx={{height: 208, overflow: 'auto'}}
-      >
+      <ActionList selectionVariant="single" role="listbox" aria-label="Branch" sx={{height: 208, overflow: 'auto'}}>
         {loading ? (
           <Box sx={{display: 'flex', justifyContent: 'center', pt: 2}}>
             <Spinner />

src/stories/ActionList/fixtures.stories.tsx

@@ -208,7 +208,7 @@ export function DisabledStory(): JSX.Element {
     <>
       <h1>Disabled Items</h1>
       <ErsatzOverlay>
-        <ActionList selectionVariant="single" showDividers role="menu" aria-label="Select a project">
+        <ActionList selectionVariant="single" showDividers role="menu" aria-label="Project">
           {projects.map((project, index) => (
             <ActionList.Item
               key={index}
@@ -836,7 +836,7 @@ export function ChildWithSideEffects(): JSX.Element {
     <>
       <h1>Child with side effects</h1>
       <ErsatzOverlay>
-        <ActionList selectionVariant="multiple" role="listbox" aria-label="Select assignees">
+        <ActionList selectionVariant="multiple" role="listbox" aria-label="Assignees">
           <ActionList.Item selected={selected} onSelect={() => setSelected(!selected)} role="option">
             <ActionList.LeadingVisual>
               <Avatar src={`https://avatars.githubusercontent.com/${user.login}`} />