AnchoredOverlay: Keep tabIndex for renderAnchor (primer#2159)

* Revert "remove tabIndex from AnchoredOverlay" This reverts commit e7f2d03. * remove change from changelog as well * update matching snapshots
PrinceSumberia · Aug 1, 2022 · 738d587 · 738d587
1 parent 8506cfc
commit 738d587
Show file tree

Hide file tree

Showing 7 changed files with 9 additions and 5 deletions.
diff --git 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
@@ -166,6 +166,7 @@ export const AnchoredOverlay: React.FC<AnchoredOverlayProps> = ({
           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
@@ -130,6 +130,7 @@ exports[`ActionMenu renders consistently 1`] = `
     id="react-aria-1"
     onClick={[Function]}
     onKeyDown={[Function]}
+    tabIndex={0}
     type="button"
   >
     <span

diff --git a/src/__tests__/__snapshots__/AnchoredOverlay.test.tsx.snap b/src/__tests__/__snapshots__/AnchoredOverlay.test.tsx.snap
@@ -85,6 +85,7 @@ exports[`AnchoredOverlay renders consistently 1`] = `
     id="react-aria-1"
     onClick={[Function]}
     onKeyDown={[Function]}
+    tabIndex={0}
   >
     Anchor Button
   </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
     </button>

diff --git 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
@@ -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
@@ -77,6 +77,7 @@ exports[`DropdownMenu renders consistently 1`] = `
   id="react-aria-1"
   onClick={[Function]}
   onKeyDown={[Function]}
+  tabIndex={0}
   type="button"
 >
   <svg