-
Notifications
You must be signed in to change notification settings - Fork 0
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
Add aria-live assertive for recording countdown #370
base: main
Are you sure you want to change the base?
Conversation
Preview build will be at |
src/components/RecordingDialog.tsx
Outdated
// Empty string state added to countdown because aria-live role region | ||
// reads dynamic changes to region and not the initial contents. | ||
{ value: "", duration: 500, fontSize: "8xl" }, |
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.
Not sure if this is the right way of doing it, suggestions welcomed.
Alternatively, we could use role="alert"
instead of role="region"
, but mdn documents role alert as for errors/warning messages (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions#roles_with_implicit_live_region_attributes).
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.
It's odd that the dialog starts empty. Can we have an empty string for the minimum amount of time necessary rather than 500 ms for the change to be read out?
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.
src/components/RecordingDialog.tsx
Outdated
textAlign="center" | ||
fontWeight="bold" | ||
color="brand.500" | ||
role="region" |
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.
Maybe this is better?
role="region" | |
role="timer" |
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.
This kind of works and kind of doesn't. NVDA is too busy reading out things from previous focus, current focus, and the fact that a dialog has appeared. It's just too slow to be useful. It continues to read 3, 2, 1 etc, but it's well behind what is changing on screen. By the time it says "recording", the recording has practically finished. The progress bar has some built in aria-live features. For NVDA it's an incredibly irritating noise starting low in pitch and getting higher until it stops. Windows narrator does a slightly better job. It is busy reading that a close button is focussed, misses the start of the countdown, but keeps pace. It's normally "2 , 1..." or "1, recording". It also doesn't produce a noise during the progress dialog transition. I don't really know the best way to fix this. There could well be options in the screen reader settings that would improve the experience. One thing we don't do at the moment is tell you when the recording stops. You only get a sense that it does because a different button becomes focussed when the dialog closes. |
Hmm.. sounds like the experience for NVDA and windows narrator are different to Mac voice over experience. 🤔 Below is a video for what I experience using the Mac voice over. Screen.Recording.2024-10-10.at.13.21.31.movI'm not sure what's the best way to fix this too. |
Maybe adding a toast that says "Recording added" or something along those lines could hint to the user that the recording has stopped? Suggestions welcomed |
Well, the recording countdown works beautifully with Mac voice over. |
Parking this one until we can try out in person and discuss next week. |
Also centred text for "connecting" dialog