[select] item navigation controls suggested by VoiceOver don't work [0.5 day]

[tomivirkki]

What is the problem?

With VoiceOver on

1. open https://a11y-vaadin-playground.netlify.app/pages/v22/select.html
2. open the first <vaadin-select> dropdown
3. See the suggested controls

However, Control-Option-Shift-Down Arrow does nothing

May be that the dropdown/list-box roles aren't correct so a wrong kind of an announcement is shown

Browsers

• [X] Chrome
• [ ] Firefox
• [ ] Safari
• [ ] Safari on iOS
• [ ] Edge

Screen Readers

• [ ] None
• [ ] NVDA
• [ ] JAWS
• [X] VoiceOver on MacOS
• [ ] VoiceOver on iOS

[yuriy-fix]

We need to figure out if it is a problem in avatar-group and menu-bar.

[web-padawan]

Tested this for other components:

vaadin-avatar-group

Chrome

The role is announced as "group". Also, the VoiceOver cursor does not move to item:

screenshot


Safari

The role is announced as "text element" (this is expected, as VoiceOver does not annonce role="option", unlike native <option> element). The VoiceOver cursor is moved to the item in the list-box:

screenshot


vaadin-select

Chrome

Same as in vaadin-avatar-group: the VoiceOver cursor remains on the vaadin-select-value-button:

screenshot


Safari

Same as in vaadin-avatar-group: the VoiceOver cursor is moved to the item in the list-box:

screenshot


vaadin-menu-bar

This component is not affected, most likely because it's using role="menuitem" which has different item navigation. Also, the VoiceOver cursor is correctly moved to the item in the overlay when using VoiceOver on Chrome.

[web-padawan]

One more issue about item navigation in Safari: when moving to different item using Control + Shift + Arrow Down and pressing Enter, the wrong item is selected, as the keyboard focus is not in sync with the VoiceOver cursor 😕

https://user-images.githubusercontent.com/10589913/182384389-22051ff2-5930-45f4-bd38-6cb3facdd5c5.mp4

UPD: this problem also exists in the ARIA examples when using VoiceOver on Chrome 🤷‍♂️

[web-padawan]

Regarding the original issue, I could not get VoiceOver outline working on Chrome. Here are some things that I tried:

1. Postpone calling this._menuElement.focus() until vaadin-overlay-open event is fired,
2. Disable animations for vaadin-select-overlay (the way it's done in our visual tests),
3. Set aria-controls attribute on the vaadin-select-value-button to link it to list-box.

Regardless of those steps, the behavior of the VoiceOver cursor doesn't change:

1. When pressing Enter, the VoiceOver cursor remains on vaadin-select-value-button
2. When pressing Arrow Down, the VoiceOver cursor then moves to the whole list-box

https://user-images.githubusercontent.com/10589913/182564309-5e523647-a882-436d-9348-9fb885ad6c89.mp4

[web-padawan]

Looks like something is wrong with either vaadin-list-box or vaadin-item. Using div with correct roles works. Also, using custom elements that set correct roles (without using tabindex) works fine, too:

Code example

```html ```