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.

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

Use aria-live="polite" for announcements #1229

Merged
merged 3 commits into from
Nov 6, 2023
Merged

Conversation

ayy-bc
Copy link
Contributor

@ayy-bc ayy-bc commented Sep 7, 2023

When playing around with dnd-kit, I noticed that the aria-live property is set to "assertive" by default. I believe that "assertive" should only be used for time-sensitive/critical notifications that absolutely require the user's immediate attention (from: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions#live_regions).

Also, changing it to "polite" makes it such that the announcement is made when the user is idle. I think that really helps with screen-reader not announcing each time a user moves the item (gets a little annoying when say I want to drag it 5 rows below, it keeps announcing for each row but doesn't complete the announcement as each time I press down, it announces the new position without the last one completing) and instead, announces it when the user is a little sure of where the item should be (i.e be idle).

Also moved the visuallyHidden directly within the component and not as a global constant as this reduces the number of declared constants and limits the scope of visuallyHidden (since it is only used within LiveRegion anyways)

@changeset-bot
Copy link

changeset-bot bot commented Sep 7, 2023

🦋 Changeset detected

Latest commit: df9c335

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@dnd-kit/accessibility Minor

Not sure what this means? Click here to learn what changesets are.

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

@ayy-bc
Copy link
Contributor Author

ayy-bc commented Sep 7, 2023

@clauderic just wanted to bring this to your attention. Really appreciate you and this library, thank you so much.

};

export function LiveRegion({id, announcement}: Props) {
export function LiveRegion({id, announcement, ariaLiveType = "polite"}: Props) {
Copy link
Collaborator

Choose a reason for hiding this comment

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

@ayy-bc Maybe we should keep this defaulted to assertive so it doesnt affect any existing usages

Copy link

@kendallgassner kendallgassner Oct 30, 2023

Choose a reason for hiding this comment

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

I think defaulting to assertive would be the way to go!

@hussam-i-am
Copy link
Collaborator

@ayy-bc Also, can you add a changeset to this? Thanks!

@clauderic clauderic merged commit aabb8bd into clauderic:master Nov 6, 2023
@github-actions github-actions bot mentioned this pull request Nov 6, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants