Append "pending" to button label and copy to isPending spinner aria-label #5245
Conversation
|
Build successful! 🎉 |
There was a problem hiding this comment.
I'm quite confused by this computed label. It says no tooltip, but there is one, and I never hear the computed label read out.
What drove the decision to do the computed getLabelFromChildren approach? Were you facing issues with the order things were read if you just left it as it was and changed the string from loading to pending?
What are the announcements you're expecting to hear, it might be good to list those out first (without considering implementation details) so that we have something to review against, the ticket is a bit sparse, unfortunately.
| <PendingButtonContainerComponent {...props}> | ||
| <PendingButtonComponent | ||
| {...props} | ||
| aria-label="Aria label on button"> |
There was a problem hiding this comment.
for this particular story on Chrome VO, the "pending" is never getting announced. my guess is because the aria-label on the button is never getting updated, and so the screenreader doesn't announce anything since nothing has changed presumably. i think a similar thing is happening with the "Notifications" pending button where the aria-label on the button is not getting updated so "pending" is never announced.
|
Build successful! 🎉 |
|
Build successful! 🎉 |
* Alternative pending label approach * remove extra labelledby attribute * don't clobber button id * remove some unneeded tests * fix lint --------- Co-authored-by: Will Powell <3374077+iamwillpowell@users.noreply.github.com>
# Conflicts: # packages/@react-spectrum/button/test/Button.test.js
|
Build successful! 🎉 |
|
Build successful! 🎉 |
|
Build successful! 🎉 |
|
So I've found the Partial support for Safari which is giving me so many issues. It is demonstrated here https://a11ysupport.io/tests/tech__html__button-name-change#assertion-aria-aria-label_attribute-convey_name_change-html-button_element-vo_macos-safari You should now be able to SOMETIMES get a MacOS announcement using the VO Ctrl+Opt+Space. I know we wait a little while to show the visible pending state, however, the only way to get an announcement right now is if the change takes place immediately on VO command click. The reason we get multiple announcements is because we have multiple changes, and they kind of step on each other. We have aria-disabled, as well as aria/label change, and possibly visibility. You will also note that JAWS does not work, this is expected, even with live region. See link earlier in this comment. |
|
Build successful! 🎉 |
|
Build successful! 🎉 |
|
Linking another useful topic thread. nvaccess/nvda#7996 |
|
Yeah I’m definitely able to get announcements with Safari + VO. Sometimes doesn’t work but much better than before. Seems like we will just have to live with the multiple announcements in Chrome + VO/Firefox + NVDA like you said. Also it seems like Firefox + NVDA doesn’t announce 50 anymore which is great! I can’t remember if you added anything to prevent the controlled pending button getting announced unless there was focus. Seems like right now it announces even when there isn’t focus. |
|
Build successful! 🎉 |
|
Build successful! 🎉 |
|
Build successful! 🎉 |
|
Build successful! 🎉 |
|
Build successful! 🎉 |
|
Build successful! 🎉 |
|
## API Changes
unknown top level export { type: 'any' } |
Closes
✅ Pull Request Checklist:
📝 Test Instructions:
Go to Button > Pending Spinner story and text the various incantations of buttons. Inspect pending spinner aria label or use your screen reader of choice to check what is announced.
🧢 Your Project:
RSP