David SegoviaUsually in accessibility the label (aka accessible name) is separate from what is currently selected in a control, which is exposed either as a value, or a selection, or both. The name is generally expanded to stay constant but the value or selection represents changeable data. It's like "what is this thing" vs "what data does it hold right now".
So on the surface, changing the label doesn't seem like the right approach. However, exceptions are sometimes made to hack around legacy screen reader behavior, as a matter of pragmatism.
I'll paste this into the filed bug to get feedback from the reporter.
Temporarily marking -1 until we get clarity on the approach.
Aaron LeventhalHi Aaron, I appreciate the catch. I’m going to look into how Firefox handles this. I'll update the PR once I have a better fix. Thanks!
David SegoviaHi David. Feel free to run it by me. It might end up not being the best to follow what Firefox does. We should see if it makes sense. At the moment, I think what we expose to screen readers is pretty good, but they aren't picking up on it.
Aaron LeventhalHi Aaron, I agree with you. I'm trying to find out why the current version isn't being announced. It looks like Firefox handles this by putting the aria-label on the parent container instead of the button itself. This seems like an easy fix for us since the affected container only has one child (the month-selector button).
I’m planning to update the CL to mirror this approach and do some testing with more ATs, but wanted to get your thoughts first. Thanks!
Aaron LeventhalLooks like aria-label is a hacky approach they used, so we should make a concrete decision on whether it's worth dying on that hill or just following their approach and getting the fix. I'm surprised, because their team is usually more on the of clean APIs and standards and this is looks like a pragmatic thing. Might be worth having someone reach out to them to ask.
David SegoviaAnother thing to do is to look at what HTML-AAM says, and ask Scott O'Hara who is the editor for it.
David SegoviaHi Aaron, thank you so much for your help. I really appreciate the opportunity to learn. I’ve been digging into the resources you mentioned and also went back to the Firefox implementation.
I was mistaken.They don't label the parent of the button. Instead, they put the aria-label and a specific role (role="dialog") on the popup container that appears after the click.
This way, the AT announces the current value of the button first, and when the user clicks, it announces the popup's label to tell them where they just landed ("Choose a month and a year, dialog"). I think this follows the standard much better. Please let me know what do you think. Thanks!
Done
| Inspect html for hidden footers to help with email filtering. To unsubscribe visit settings. |
I can take a look once Aaron is happy with it.
| Inspect html for hidden footers to help with email filtering. To unsubscribe visit settings. |
David Segovia, have you tried reaching out to the current a11y team?
David Segovia, have you tried reaching out to the current a11y team?
Hi Aaron, yup. I reached out to Lucas. I've added him as a reviewer along with David Tseng.
David SegoviaDavid Segovia, have you tried reaching out to the current a11y team?
Hi Aaron, yup. I reached out to Lucas. I've added him as a reviewer along with David Tseng.
Yep, we meet yesterday. I just asked David to add a test here and update the change to be ready for final review and ping me.