fix: Improve representation of FlyoutButtons in screenreaders.#9356
fix: Improve representation of FlyoutButtons in screenreaders.#9356gonfunko merged 2 commits intoadd-screen-reader-support-experimentalfrom
FlyoutButtons in screenreaders.#9356Conversation
core/flyout_button.ts
Outdated
| const xy = this.getPosition(); | ||
| const bounds = new Rect(xy.y, xy.y + this.height, xy.x, xy.x + this.width); | ||
| this.workspace.scrollBoundsIntoView(bounds); | ||
| aria.setState(this.svgGroup, aria.State.SELECTED, true); |
There was a problem hiding this comment.
I don't think aria-selected makes sense here, maybe that's why VO doesn't read it out. I think aria-selected is supposed to be used for like, custom radio buttons or something like that where they have a selected state. But here are you just using it to show that it's focused? I don't think you need to set the selected state for that. It being focused is enough. These buttons don't have state.
I found an issue that seems to imply that VO would respect aria-pressed for buttons, but I don't think that's appropriate either for the same reasons.
There was a problem hiding this comment.
That makes sense; I added it for consistency with blocks, which do get read out as "selected", but I think you're right and that behavior is the bug – obviously it's selected because the screenreader is reading it out! Removed accordingly.
There was a problem hiding this comment.
For blocks I could see it being useful in cases where selection != focus (e.g. for multiselect) so we might have to find a way to overcome the fact that VO won't let you use aria-selected for arbitrary roles. But, that is a different problem and I don't think it applies to flyout buttons regardless.
gonfunko
merged commit d349a0c
into
add-screen-reader-support-experimental
2 participants
The basics
The details
Resolves
Fixes #9294
Proposed Changes
This PR updates
FlyoutButtons to use either abuttonortreeitemARIA role based on whether they are acting as buttons or labels. The actual text will be read out in both cases, and it will be denoted as a button when it is one.Limitations
At least on VoiceOver, the screenreader focus ring targets the whole flyout for the button variant, and the selection status is not spoken. Neither is an issue for labels.