Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Docs(ActionList): use internal AriaStatus to announce updates in example story #5096

Merged
merged 5 commits into from
Oct 10, 2024
Merged

Docs(ActionList): use internal AriaStatus to announce updates in example story #5096

merged 5 commits into from
Oct 10, 2024

Conversation

francinelucca
Copy link
Member

@francinelucca francinelucca commented Oct 9, 2024 •
edited
Loading

Closes https://github.com/github/primer/issues/3474

Adds more descriptive status messages for when results are loading/complete in ActionList's async loading story and replaces custom aria-live implementation for internal AriaStatus usage for improved accessibility.

Screen.Recording.2024-10-09.at.3.22.56.PM.mov

Changelog

New

  • Raises a11y status update on loading in the AsyncListWithSpinner story

Changed

  • Uses AriaStatus instead of custom <div role="status"... to announce a11y updates in ActionList's Async with Spinner story.

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

Storybook only update

Testing & Reviewing

Test keyboard/screenreader functionality in deployment story and verify loading/results/no results messages get announce by screen reader.

Merge checklist

@changeset-bot changeset-bot
Copy link

changeset-bot bot commented Oct 9, 2024 •
edited
Loading

⚠️ No Changeset found

Latest commit: ec9074c

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 github-actions bot temporarily deployed to storybook-preview-5096 October 9, 2024 19:03 Inactive
@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Oct 9, 2024 •
edited
Loading

size-limit report 📦

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

@francinelucca francinelucca added staff Author is a staff member component: ActionList skip changeset This change does not need a changelog labels Oct 9, 2024
@francinelucca francinelucca marked this pull request as ready for review October 9, 2024 19:36
@francinelucca francinelucca requested a review from a team as a code owner October 9, 2024 19:36
joshblack
joshblack reviewed Oct 9, 2024
View reviewed changes
packages/react/src/ActionList/ActionList.examples.stories.tsx Outdated
import FormControl from '../FormControl'
import {LiveRegion, LiveRegionOutlet, Message} from '../internal/components/LiveRegion'
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In case it's helpful, we have a couple of newer helpers that you can use here, specifically AriaStatus and AriaAlert, depending on what you need 👀

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Updated to AriaStatus, thanks!!

@github-actions github-actions bot temporarily deployed to storybook-preview-5096 October 9, 2024 20:59 Inactive
@francinelucca francinelucca changed the title Docs(ActionList): use internal LiveRegion to announce updates in example story Docs(ActionList): use internal AriaStatus to announce updates in example story Oct 10, 2024
@github-actions github-actions bot temporarily deployed to storybook-preview-5096 October 10, 2024 16:39 Inactive
@github-actions github-actions bot temporarily deployed to storybook-preview-5096 October 10, 2024 18:16 Inactive
@francinelucca francinelucca added this pull request to the merge queue Oct 10, 2024
Merged via the queue into main with commit 799ead8 Oct 10, 2024
43 checks passed
@francinelucca francinelucca deleted the 3474-prcactionlist-async-loading-status-not-announced-by-screen-readers branch October 10, 2024 18:56
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@joshblack joshblack joshblack approved these changes

@camertron camertron Awaiting requested review from camertron camertron is a code owner automatically assigned from primer/engineer-reviewers

Assignees
No one assigned
Labels
component: ActionList skip changeset This change does not need a changelog staff Author is a staff member status: review needed
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@francinelucca @joshblack