From b776469318cd07756dde3cb59e48720b3d3676c9 Mon Sep 17 00:00:00 2001 From: Siddharth Kshetrapal Date: Wed, 25 May 2022 16:07:39 +0200 Subject: [PATCH 1/8] Don't add aria-expanded=false --- src/AnchoredOverlay/AnchoredOverlay.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/AnchoredOverlay/AnchoredOverlay.tsx b/src/AnchoredOverlay/AnchoredOverlay.tsx index 1dd255473c6..49ca88c79b3 100644 --- a/src/AnchoredOverlay/AnchoredOverlay.tsx +++ b/src/AnchoredOverlay/AnchoredOverlay.tsx @@ -165,7 +165,7 @@ export const AnchoredOverlay: React.FC = ({ ref: anchorRef, id: anchorId, 'aria-haspopup': 'true', - 'aria-expanded': open, + 'aria-expanded': open ? 'true' : undefined, tabIndex: 0, onClick: onAnchorClick, onKeyDown: onAnchorKeyDown From db78c7c15350b820f1f848a1d1ce920de3b4faad Mon Sep 17 00:00:00 2001 From: Siddharth Kshetrapal Date: Wed, 25 May 2022 16:13:21 +0200 Subject: [PATCH 2/8] remove "Select a" from aria-label --- src/stories/ActionList/examples.stories.tsx | 11 +++-------- src/stories/ActionList/fixtures.stories.tsx | 4 ++-- src/stories/ActionMenu/examples.stories.tsx | 13 +++++-------- src/stories/ActionMenu/fixtures.stories.tsx | 6 +++--- 4 files changed, 13 insertions(+), 21 deletions(-) diff --git a/src/stories/ActionList/examples.stories.tsx b/src/stories/ActionList/examples.stories.tsx index 6fdd05d7595..d19b47ca9bb 100644 --- a/src/stories/ActionList/examples.stories.tsx +++ b/src/stories/ActionList/examples.stories.tsx @@ -156,7 +156,7 @@ export function MultipleSelection(): JSX.Element {

This pattern appears in issues and pull requests to pick multiple assignees

- + {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..87d296d5072 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,7 @@ export function GroupsAndDescription(): 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..941c74aac50 100644 --- a/src/stories/ActionMenu/fixtures.stories.tsx +++ b/src/stories/ActionMenu/fixtures.stories.tsx @@ -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 { Date: Wed, 25 May 2022 16:28:41 +0200 Subject: [PATCH 3/8] remove tabIndex from AnchoredOverlay --- src/AnchoredOverlay/AnchoredOverlay.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/AnchoredOverlay/AnchoredOverlay.tsx b/src/AnchoredOverlay/AnchoredOverlay.tsx index 49ca88c79b3..6cdc8a10452 100644 --- a/src/AnchoredOverlay/AnchoredOverlay.tsx +++ b/src/AnchoredOverlay/AnchoredOverlay.tsx @@ -166,7 +166,6 @@ export const AnchoredOverlay: React.FC = ({ id: anchorId, 'aria-haspopup': 'true', 'aria-expanded': open ? 'true' : undefined, - tabIndex: 0, onClick: onAnchorClick, onKeyDown: onAnchorKeyDown })} From 9eecffe33b237a1dc55245831489d555eca5dd91 Mon Sep 17 00:00:00 2001 From: Siddharth Kshetrapal Date: Wed, 25 May 2022 16:42:40 +0200 Subject: [PATCH 4/8] update story to use interactive element --- src/stories/ActionMenu/fixtures.stories.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/stories/ActionMenu/fixtures.stories.tsx b/src/stories/ActionMenu/fixtures.stories.tsx index 941c74aac50..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}

- + + From 5e563ec4ad885859970668bb1eb112a92f4caaee Mon Sep 17 00:00:00 2001 From: Siddharth Kshetrapal Date: Wed, 25 May 2022 16:42:48 +0200 Subject: [PATCH 5/8] update snapshots --- src/__tests__/__snapshots__/ActionMenu.test.tsx.snap | 2 -- src/__tests__/__snapshots__/AnchoredOverlay.test.tsx.snap | 3 --- src/__tests__/__snapshots__/SelectPanel.test.tsx.snap | 2 -- .../deprecated/__snapshots__/ActionMenu.test.tsx.snap | 2 -- .../deprecated/__snapshots__/DropdownMenu.test.tsx.snap | 2 -- 5 files changed, 11 deletions(-) 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" > @@ -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 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" >