Fix: Ensure dynamically updated label is announced #4537

khiga8 · 2024-04-26T19:14:34Z

Closes https://github.com/github/accessibility-audits/issues/5629

Changelog

I'm addressing an audit ticket that points out how the dynamically updated counter button in Storybook label is not announced when incremented. It turns out there isn't really a standardized approach to ensure announcements happen when a button is dynamically updated.

I ended up testing various approaches across different screen reader/browser combinations which you can check out in https://github.com/github/accessibility/pull/6222. (I welcome your feedback on that PR).

Ultimately through my testing, I found that dynamically updating the aria-label performs the best in terms of ensuring the button state is communicated. However, this is a brittle approach so I recommend using a live region announcement (unless an aria-label is already being set on the button).

This PR updates the storybook stories accordingly with a note.

Rollout strategy

Patch release
Minor release
Major release; if selected, include a written rollout or migration plan
None; if selected, include a brief description as to why

Testing & Reviewing

See my changes 🔍
Videos from testing across multiple screen reader/browsers

Merge checklist

Added/updated tests
Added/updated documentation
Added/updated previews (Storybook)
Changes are SSR compatible
Tested in Chrome
Tested in Firefox
Tested in Safari
Tested in Edge
(GitHub staff only) Integration tests pass at github/github (Learn more about how to run integration tests)

changeset-bot · 2024-04-26T19:14:38Z

⚠️ No Changeset found

Latest commit: b7086c1

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 · 2024-04-26T19:17:59Z

size-limit report 📦

Path	Size
packages/react/dist/browser.esm.js	87.98 KB (0%)
packages/react/dist/browser.umd.js	88.28 KB (0%)

joshblack · 2024-04-26T20:32:06Z

@khiga8 just wanted to share example usage of count if it was helpful! With the link you shared, it seemed like it was looking in GitHub which would be for GitHub UI packages versus Primer usage (sorry if that was confusing or if I'm misunderstanding something here 👀)

Something interesting is that there are two instances of this where both aria-label and count is used 🤔

packages/react/src/Button/Button.features.stories.tsx

khiga8 · 2024-04-26T21:01:21Z

EEEP @joshblack thank you for the primer query link!!! I'll have to dive into it next week!

joshblack

Looks great, thanks for doing this! 👍 Just need snapshots updated and should be good to go

packages/react/src/Box/Box.features.stories.tsx

khiga8 · 2024-05-01T16:47:44Z

packages/react/src/Button/Button.features.stories.tsx

  const [count, setCount] = useState(0)
+  const onClick = () => {
+    setCount(count + 1)
+    announce(`Watch ${count + 1}`)


Hey @joshblack! I decided to update the approaches in these examples to use a live region, based on the conclusion I came to that the aria-live hack shouldn't be used, unless it's already being considered for other reasons.

I am thinking the next steps for me after this PR are:

a dedicated storybook page that dives into different approaches for communicating button state.

adding a section to the interface guidelines.

Ah okay, sounds good @khiga8 👍

lindseywild

Looks good from an accessibility perspective!

* Fix: Ensure dynamically updated label is announced * Use Link component * Fix circular dependency * Update approach * Update packages/react/src/Box/Box.features.stories.tsx * test(vrt): update snapshots --------- Co-authored-by: khiga8 <[email protected]>

khiga8 requested a review from a team as a code owner April 26, 2024 19:14

khiga8 requested a review from joshblack April 26, 2024 19:14

khiga8 temporarily deployed to github-pages April 26, 2024 19:17 — with GitHub Actions Inactive

github-actions bot temporarily deployed to storybook-preview-4537 April 26, 2024 19:18 Inactive

khiga8 added the skip changeset This change does not need a changelog label Apr 26, 2024

khiga8 temporarily deployed to github-pages April 26, 2024 20:03 — with GitHub Actions Inactive

github-actions bot temporarily deployed to storybook-preview-4537 April 26, 2024 20:04 Inactive

joshblack reviewed Apr 26, 2024

View reviewed changes

packages/react/src/Button/Button.features.stories.tsx Outdated Show resolved Hide resolved

khiga8 temporarily deployed to github-pages April 26, 2024 21:03 — with GitHub Actions Inactive

github-actions bot temporarily deployed to storybook-preview-4537 April 26, 2024 21:03 Inactive

joshblack approved these changes Apr 29, 2024

View reviewed changes

khiga8 marked this pull request as draft April 30, 2024 12:20

khiga8 added the update snapshots 🤖 Command that updates VRT snapshots on the pull request label May 1, 2024

khiga8 temporarily deployed to github-pages May 1, 2024 14:58 — with GitHub Actions Inactive

github-actions bot temporarily deployed to storybook-preview-4537 May 1, 2024 14:58 Inactive

github-actions bot removed the update snapshots 🤖 Command that updates VRT snapshots on the pull request label May 1, 2024

primer bot temporarily deployed to github-pages May 1, 2024 15:07 Inactive

github-actions bot temporarily deployed to storybook-preview-4537 May 1, 2024 15:08 Inactive

khiga8 force-pushed the kh-watch-button-fix branch from 6610598 to 41cbd79 Compare May 1, 2024 16:42

khiga8 commented May 1, 2024

View reviewed changes

packages/react/src/Box/Box.features.stories.tsx Outdated Show resolved Hide resolved

khiga8 temporarily deployed to github-pages May 1, 2024 16:47 — with GitHub Actions Inactive

github-actions bot temporarily deployed to storybook-preview-4537 May 1, 2024 16:47 Inactive

khiga8 commented May 1, 2024

View reviewed changes

khiga8 added the update snapshots 🤖 Command that updates VRT snapshots on the pull request label May 1, 2024

khiga8 marked this pull request as ready for review May 1, 2024 16:52

khiga8 requested a review from lindseywild May 1, 2024 16:52

khiga8 requested a review from a team as a code owner May 1, 2024 16:54

khiga8 requested a review from mperrotti May 1, 2024 16:54

github-actions bot removed the update snapshots 🤖 Command that updates VRT snapshots on the pull request label May 1, 2024

primer bot temporarily deployed to github-pages May 1, 2024 16:58 Inactive

github-actions bot temporarily deployed to storybook-preview-4537 May 1, 2024 16:58 Inactive

lindseywild approved these changes May 1, 2024

View reviewed changes

langermank approved these changes May 1, 2024

View reviewed changes

khiga8 and others added 6 commits May 1, 2024 14:31

Fix: Ensure dynamically updated label is announced

3dc135f

Use Link component

2aec8f4

Fix circular dependency

240f129

Update approach

d369878

Update packages/react/src/Box/Box.features.stories.tsx

ff5e064

test(vrt): update snapshots

b7086c1

khiga8 force-pushed the kh-watch-button-fix branch from c910d22 to b7086c1 Compare May 1, 2024 18:31

khiga8 added the update snapshots 🤖 Command that updates VRT snapshots on the pull request label May 1, 2024

khiga8 deployed to github-pages May 1, 2024 18:34 — with GitHub Actions View deployment

github-actions bot deployed to storybook-preview-4537 May 1, 2024 18:35 View deployment

github-actions bot removed the update snapshots 🤖 Command that updates VRT snapshots on the pull request label May 1, 2024

khiga8 added this pull request to the merge queue May 1, 2024

Merged via the queue into main with commit 6b502fd May 1, 2024

khiga8 deleted the kh-watch-button-fix branch May 1, 2024 19:37

khiga8 mentioned this pull request May 3, 2024

[Do not review] Ensure button counter is announced #4533

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Fix: Ensure dynamically updated label is announced #4537

Fix: Ensure dynamically updated label is announced #4537

Uh oh!

khiga8 commented Apr 26, 2024 •

edited

Loading

Uh oh!

changeset-bot bot commented Apr 26, 2024 •

edited

Loading

Uh oh!

github-actions bot commented Apr 26, 2024 •

edited

Loading

Uh oh!

joshblack commented Apr 26, 2024

Uh oh!

Uh oh!

khiga8 commented Apr 26, 2024

Uh oh!

joshblack left a comment

Uh oh!

Uh oh!

khiga8 May 1, 2024

Uh oh!

joshblack May 1, 2024

Uh oh!

lindseywild left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Fix: Ensure dynamically updated label is announced #4537

Fix: Ensure dynamically updated label is announced #4537

Uh oh!

Conversation

khiga8 commented Apr 26, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changelog

Rollout strategy

Testing & Reviewing

Merge checklist

Uh oh!

changeset-bot bot commented Apr 26, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ No Changeset found

Uh oh!

github-actions bot commented Apr 26, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

size-limit report 📦

Uh oh!

joshblack commented Apr 26, 2024

Uh oh!

Uh oh!

khiga8 commented Apr 26, 2024

Uh oh!

joshblack left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

khiga8 May 1, 2024

Choose a reason for hiding this comment

Uh oh!

joshblack May 1, 2024

Choose a reason for hiding this comment

Uh oh!

lindseywild left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

khiga8 commented Apr 26, 2024 •

edited

Loading

changeset-bot bot commented Apr 26, 2024 •

edited

Loading

github-actions bot commented Apr 26, 2024 •

edited

Loading