vaadin
Apply role="group" to Scroller
What is the problem?
As the Scroller has tabindex="0", some browser/screen reader combinations may be misled to parse its contents as its accessible name, and thus attempt to announce it as such.
As an example, Chrome evaluates the accessible name of the Scroller in this sample as "Personal information Employment information", based on the two headings inside.
This is of course not desirable, as screen reader users should instead navigate into the Scroller's contents and traverse them separately.
I would assume that applying role="group" to the Scroller's root element helps avoid this.
Browsers
- [X] Chrome
- [ ] Firefox
- [ ] Safari
- [ ] Safari on iOS
- [ ] Edge
Screen Readers
- [ ] None
- [ ] NVDA
- [ ] JAWS
- [ ] VoiceOver on MacOS
- [ ] VoiceOver on iOS
Testing using the same sample from Docs and adding the role="group" to <vaadin-scroller>, I couldn't see any difference from not having it at all:
NVDA + Chrome:
Personal information region Personal information heading level 3 clickable
First name clickable First name edit clickable Last name clickable
Last name edit clickable Birthdate clickable Birthdate combo box collapsed
editable out of region region Employment information heading level 3
clickable Position clickable Position edit clickable Additional information
clickable Additional information edit multi line out of edit
JAWS + Chrome
heading level 3 ‑ Personal information
VO + Safari
Personal information, and 1 more item, group
Hmm, the solution could be to just remove the default tabindex once Chrome and Safari support keyboard-scrolling of scrollable areas without tabindex. Relavant post by Adrian Roselli: https://adrianroselli.com/2022/06/keyboard-only-scrolling-areas.html