diff --git a/.changeset/anchored-overlay-clever-mails-roll.md b/.changeset/anchored-overlay-clever-mails-roll.md
new file mode 100644
index 00000000000..4db56e333ac
--- /dev/null
+++ b/.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
+
diff --git a/src/AnchoredOverlay/AnchoredOverlay.tsx b/src/AnchoredOverlay/AnchoredOverlay.tsx
index 1dd255473c6..6cdc8a10452 100644
--- a/src/AnchoredOverlay/AnchoredOverlay.tsx
+++ b/src/AnchoredOverlay/AnchoredOverlay.tsx
@@ -165,8 +165,7 @@ export const AnchoredOverlay: React.FC = ({
ref: anchorRef,
id: anchorId,
'aria-haspopup': 'true',
- 'aria-expanded': open,
- tabIndex: 0,
+ 'aria-expanded': open ? 'true' : undefined,
onClick: onAnchorClick,
onKeyDown: onAnchorKeyDown
})}
diff --git a/src/__tests__/ActionMenu.test.tsx b/src/__tests__/ActionMenu.test.tsx
index 7aa30c560ec..e7cccfce5b1 100644
--- a/src/__tests__/ActionMenu.test.tsx
+++ b/src/__tests__/ActionMenu.test.tsx
@@ -108,7 +108,7 @@ describe('ActionMenu', () => {
)
- 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', () => {
)
- 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')
diff --git a/src/__tests__/__snapshots__/ActionMenu.test.tsx.snap b/src/__tests__/__snapshots__/ActionMenu.test.tsx.snap
index d44220a337a..925a5d2db9e 100644
--- a/src/__tests__/__snapshots__/ActionMenu.test.tsx.snap
+++ b/src/__tests__/__snapshots__/ActionMenu.test.tsx.snap
@@ -125,13 +125,11 @@ exports[`ActionMenu renders consistently 1`] = `
fontFamily="normal"
>
diff --git a/src/__tests__/__snapshots__/SelectPanel.test.tsx.snap b/src/__tests__/__snapshots__/SelectPanel.test.tsx.snap
index 17e80b889de..5447c83557e 100644
--- a/src/__tests__/__snapshots__/SelectPanel.test.tsx.snap
+++ b/src/__tests__/__snapshots__/SelectPanel.test.tsx.snap
@@ -84,13 +84,11 @@ exports[`SelectPanel renders consistently 1`] = `
fontFamily="normal"
>
Select Items
diff --git a/src/__tests__/deprecated/__snapshots__/ActionMenu.test.tsx.snap b/src/__tests__/deprecated/__snapshots__/ActionMenu.test.tsx.snap
index 7581ef44ec9..70b430b7144 100644
--- a/src/__tests__/deprecated/__snapshots__/ActionMenu.test.tsx.snap
+++ b/src/__tests__/deprecated/__snapshots__/ActionMenu.test.tsx.snap
@@ -68,13 +68,11 @@ exports[`ActionMenu renders consistently 1`] = `
}
`;
diff --git a/src/__tests__/deprecated/__snapshots__/DropdownMenu.test.tsx.snap b/src/__tests__/deprecated/__snapshots__/DropdownMenu.test.tsx.snap
index 7325210c628..9666f15152e 100644
--- a/src/__tests__/deprecated/__snapshots__/DropdownMenu.test.tsx.snap
+++ b/src/__tests__/deprecated/__snapshots__/DropdownMenu.test.tsx.snap
@@ -72,13 +72,11 @@ exports[`DropdownMenu renders consistently 1`] = `
}
-
+
{users.map(user => (
Grouped content with labels and description. This patterns appears in pull requests to pick a reviewer.
-
+
{users.slice(0, 2).map(user => (
No branches match that query
) : null}
-
+
{loading ? (
diff --git a/src/stories/ActionList/fixtures.stories.tsx b/src/stories/ActionList/fixtures.stories.tsx
index c002bbd4d42..9bbcd28cfd2 100644
--- a/src/stories/ActionList/fixtures.stories.tsx
+++ b/src/stories/ActionList/fixtures.stories.tsx
@@ -208,7 +208,7 @@ export function DisabledStory(): JSX.Element {
<>
Disabled Items
-
+
{projects.map((project, index) => (
Child with side effects
-
+
setSelected(!selected)} role="option">
diff --git a/src/stories/ActionMenu/examples.stories.tsx b/src/stories/ActionMenu/examples.stories.tsx
index 5070006af39..42028456f61 100644
--- a/src/stories/ActionMenu/examples.stories.tsx
+++ b/src/stories/ActionMenu/examples.stories.tsx
@@ -89,7 +89,7 @@ export function SingleSelection(): JSX.Element {
This pattern has a single section with the selected value shown in the button
-
+
{selectedType.name}
@@ -122,7 +122,7 @@ export function SingleSelectionWithPlaceholder(): JSX.Element {
This pattern has a placeholder in menu button when no value is selected yet
-
+
{selectedType.name || 'Pick a field type'}
@@ -155,7 +155,8 @@ export function GroupsAndDescription(): JSX.Element {
{selectedMilestone ? (
-
+
{selectedMilestone.name}
) : (
-
+
No milestone
)}
@@ -251,7 +252,7 @@ export function MultipleSelection(): JSX.Element {
-
+
{selectedOption ? `Group by ${selectedOption.text}` : 'Group items by'}
diff --git a/src/stories/ActionMenu/fixtures.stories.tsx b/src/stories/ActionMenu/fixtures.stories.tsx
index 8e74c3677f9..0a65a6da881 100644
--- a/src/stories/ActionMenu/fixtures.stories.tsx
+++ b/src/stories/ActionMenu/fixtures.stories.tsx
@@ -207,9 +207,9 @@ export function CustomAnchor(): JSX.Element {
Last option activated: {actionFired}
-
+
-
+
@@ -505,7 +505,7 @@ export function MemexIteration(): JSX.Element {
color: 'fg.muted',
':hover, :focus': {background: 'none !important', color: 'accent.fg'}
}}
- aria-label="Select iteration duration"
+ aria-label="Iteration duration"
>
{duration} {duration > 1 ? 'weeks' : 'week'}
@@ -548,7 +548,7 @@ export function MemexAddColumn(): JSX.Element {