-
-
Notifications
You must be signed in to change notification settings - Fork 687
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
Conversation
🦋 Changeset detectedLatest commit: df9c335 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
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 |
@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) { |
There was a problem hiding this comment.
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
There was a problem hiding this comment.
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!
@ayy-bc Also, can you add a changeset to this? Thanks! |
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 withinLiveRegion
anyways)