Updates ActionList async filter example to be accessible #3808

mperrotti · 2023-10-10T21:40:53Z

Related issue: https://github.com/github/accessibility-audits/issues/4487

Adds filter announcement
Adds a <label> for the text input and removes the placeholder text

Changelog

This is just a documentation update, no changes need to be released.

Merge checklist

Take a look at the What we look for in reviews section of the contributing guidelines for more information on how we review PRs.

changeset-bot · 2023-10-10T21:40:57Z

⚠️ No Changeset found

Latest commit: 36a4591

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

github-actions · 2023-10-10T21:41:08Z

Uh oh! @mperrotti, the image you shared is missing helpful alt text. Check your pull request body.

Alt text is an invisible description that helps screen readers describe images to blind or low-vision users. If you are using markdown to display images, add your alt text inside the brackets of the markdown image.

Learn more about alt text at Basic writing and formatting syntax: images on GitHub Docs.

github-actions · 2023-10-10T21:45:17Z

size-limit report 📦

Path	Size
dist/browser.esm.js	104.74 KB (0%)
dist/browser.umd.js	105.32 KB (0%)

joshblack · 2023-10-11T15:50:32Z

src/ActionList/ActionList.examples.stories.tsx

+      <VisuallyHidden
+        isVisible={results.length === 0}
+        aria-live="polite"
+        aria-atomic="true"
+        as={Text}
+        sx={{display: 'block', fontSize: 1, m: 2}}
+      >
+        {results.length === 0 ? 'No branches match that query' : `${results.length} branches match that query`}
+      </VisuallyHidden>


For live region support, we have an internal LiveRegion component that we could try to consolidate on if it's helpful.

Right now it's not a standalone component (meaning it needs two components) but we could totally add a standalone variant to it that's just like <LiveRegion>The message</LiveRegion> if it would be helpful for any live region based a11y fixes 👀

Thanks for reminding me we had this! I just had to update LiveRegionOutlet so we could visually show the No branches match that query message.

joshblack

Left a couple of comments, just wanted to sorry about the confusion on my end!

joshblack · 2023-10-13T19:29:44Z

src/internal/components/VisuallyHidden.tsx

I think we should keep the original behavior here as this file was created intentionally to differ from the other behavior so that VisuallyHidden has no ability to not be hidden.

Instead, the intent was that if you need something to be VisuallyHidden you wrap it in the component. If not, you don't wrap it in VisuallyHidden.

Hope that makes sense!

So should we plan to remove the older VisuallyHidden component without preserving the isVisible prop? I can open a separate PR for that.

joshblack · 2023-10-13T19:45:53Z

src/ActionList/ActionList.examples.stories.tsx

+      <LiveRegion>
+        <LiveRegionOutlet isVisible={results.length === 0} />
+        {results.length === 0 ? (
+          <Text sx={{display: 'block', fontSize: 1, m: 2}}>No branches match that query</Text>
+        ) : (
+          `${results.length} branches match that query`
+        )}
+      </LiveRegion>


Ah, sorry I confused this earlier where the message here would be visible (I totally misread the VisuallyHidden helper 🤦‍♂️)

The LiveRegion module currently is intended to mirror the helper that exists upstream in dotcom in that it's a visually hidden part of the page. Specifically, things passed as children to the Message component are analogous to the "announce" helper.

The important part about this is because, for certain live regions types, they must always be in the DOM as dynamically adding them can cause certain Screen Readers to not announce as expected 😞

For visible content that also is considered a live region, it would be worth having helpers for the status/alert roles (or just practices to follow). In this case, it could be:

Suggested change

<LiveRegion>

<LiveRegionOutlet isVisible={results.length === 0} />

{results.length === 0 ? (

<Text sx={{display: 'block', fontSize: 1, m: 2}}>No branches match that query</Text>

) : (

`${results.length} branches match that query`

)}

</LiveRegion>

<div role="status">

{results.length === 0

? <Text sx={{display: 'block', fontSize: 1, m: 2}}>No branches match that query</Text>

: <VisuallyHidden>`${results.length} branches match that query`</VisuallyHidden>

</div>

Would need to test to double-check, but I think that should satisfy the same thing as aria-live="polite" aria-atomic="true" and would keep the live region persistent in the DOM. Curious what you think @mperrotti and @ericwbailey 👀

…ync-story-a11y-fix

mperrotti · 2023-10-13T20:34:19Z

Thanks @joshblack ! I think I addressed your feedback correctly. I removed my changes to LiveRegion and VisuallyHidden.

joshblack

Looks great!

mperrotti added 2 commits October 10, 2023 17:34

updates ActionList async filter example to be accessible

92bd849

fix bad usage of placeholder in Storybook example

eb31aac

mperrotti added skip changeset This change does not need a changelog update snapshots labels Oct 10, 2023

mperrotti requested review from a team and joshblack October 10, 2023 21:40

mperrotti requested a review from ericwbailey October 10, 2023 21:41

mperrotti mentioned this pull request Oct 10, 2023

Filter results a11y docs primer/design#617

Merged

github-actions bot removed the update snapshots label Oct 10, 2023

mperrotti temporarily deployed to github-pages October 10, 2023 21:48 — with GitHub Actions Inactive

github-actions bot temporarily deployed to storybook-preview-3808 October 10, 2023 21:49 Inactive

Merge branch 'main' into mp/action-list-async-story-a11y-fix

f27ef5f

mperrotti temporarily deployed to github-pages October 10, 2023 21:55 — with GitHub Actions Inactive

github-actions bot temporarily deployed to storybook-preview-3808 October 10, 2023 21:55 Inactive

pksjce approved these changes Oct 11, 2023

View reviewed changes

joshblack reviewed Oct 11, 2023

View reviewed changes

mperrotti temporarily deployed to github-pages October 11, 2023 18:04 — with GitHub Actions Inactive

github-actions bot temporarily deployed to storybook-preview-3808 October 11, 2023 18:08 Inactive

mperrotti temporarily deployed to github-pages October 13, 2023 19:30 — with GitHub Actions Inactive

github-actions bot temporarily deployed to storybook-preview-3808 October 13, 2023 19:30 Inactive

joshblack reviewed Oct 13, 2023

View reviewed changes

mperrotti added 2 commits October 13, 2023 16:28

Merge branch 'main' of github.com:primer/react into mp/action-list-as…

af7882a

…ync-story-a11y-fix

use role status for filter update announcement

36a4591

mperrotti force-pushed the mp/action-list-async-story-a11y-fix branch from 4b196cb to 36a4591 Compare October 13, 2023 20:33

mperrotti deployed to github-pages October 13, 2023 20:40 — with GitHub Actions View deployment

github-actions bot deployed to storybook-preview-3808 October 13, 2023 20:40 View deployment

mperrotti requested a review from joshblack October 17, 2023 17:02

joshblack approved these changes Oct 20, 2023

View reviewed changes

mperrotti added this pull request to the merge queue Oct 20, 2023

Merged via the queue into main with commit 096f4cc Oct 20, 2023
28 checks passed

mperrotti deleted the mp/action-list-async-story-a11y-fix branch October 20, 2023 17:07

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Updates ActionList async filter example to be accessible #3808

Updates ActionList async filter example to be accessible #3808

mperrotti commented Oct 10, 2023

changeset-bot bot commented Oct 10, 2023 •

edited

Loading

github-actions bot commented Oct 10, 2023

github-actions bot commented Oct 10, 2023 •

edited

Loading

joshblack Oct 11, 2023

mperrotti Oct 11, 2023

joshblack left a comment

joshblack Oct 13, 2023

mperrotti Oct 13, 2023 •

edited

Loading

joshblack Oct 13, 2023

mperrotti commented Oct 13, 2023 •

edited

Loading

joshblack left a comment

Updates ActionList async filter example to be accessible #3808

Updates ActionList async filter example to be accessible #3808

Conversation

mperrotti commented Oct 10, 2023

Changelog

Merge checklist

changeset-bot bot commented Oct 10, 2023 • edited Loading

⚠️ No Changeset found

github-actions bot commented Oct 10, 2023

github-actions bot commented Oct 10, 2023 • edited Loading

size-limit report 📦

joshblack Oct 11, 2023

Choose a reason for hiding this comment

mperrotti Oct 11, 2023

Choose a reason for hiding this comment

joshblack left a comment

Choose a reason for hiding this comment

joshblack Oct 13, 2023

Choose a reason for hiding this comment

mperrotti Oct 13, 2023 • edited Loading

Choose a reason for hiding this comment

joshblack Oct 13, 2023

Choose a reason for hiding this comment

mperrotti commented Oct 13, 2023 • edited Loading

joshblack left a comment

Choose a reason for hiding this comment

changeset-bot bot commented Oct 10, 2023 •

edited

Loading

github-actions bot commented Oct 10, 2023 •

edited

Loading

mperrotti Oct 13, 2023 •

edited

Loading

mperrotti commented Oct 13, 2023 •

edited

Loading