calcite-value-list drag-enabled selection and auditory reordering not available to screen-readers

[FelFly]

Summary

Using a screen-reader with the calcite-value-list, I want to hear inline instruction on what keystrokes to use to interact with the component. I want to be able to "pick up" an item, hear the value label of the item associated with the drag control, move my selection and hear its current position, and "drop" my selection in a new position.

Applicable WCAG Guidelines
1.3.3 Sensory Characteristics
2.1.1 Keyboard
2.2.6 Headings and Labels

Actual Behavior

There are three things I observed happening:

1 . In VoiceOver and NVDA, I do not hear the option name (eg. Rivers) associated with the toggle button that I am selecting / deselecting.

2a. Also in VoiceOver, I cannot use the VO keys (Ctrl+Option) with Spacebar as if it is actually the Spacebar, which is how it operates other places on the web. It will not select the drag button and all I hear is "deselect button." Likewise, even though normally the VO keys + arrow keys allow me to move up/down through content on a page, I cannot use the VO keys with the arrow keys to move this particular element. If I use strictly the Spacebar and the arrow keys as if I were a sighted user, then it works, but that's contradictory to how I'd expect to use VoiceOver.

2b. In NVDA, there aren't modify keys like in VoiceOver, so in theory using Spacebar should work. However, it does not. I do not observe the item being selected. In NVDA if I am moving from top to bottom of a page (and not jumping around by links or form elements) then I use the up/down arrow keys to move through content, but when I had my toggle highlighted, the arrow keys did not move the value item.

3 . If I do use the sighted keyboard user controls of Spacebar and the arrow keys, then I still don't hear any awareness of placement. I would expect to hear something along the lines of "current position 2 of 4" and then as I move it down, for example, "current position 3 of 4" etc.

Video of problems 1-3 in VoiceOver: https://esriis-my.sharepoint.com/:v:/g/personal/klar7790_esri_com/EaCXndpv0wZDqcX8Kg-23PMByJ5TV01Xua8ky3F45Lt0Ig?e=4scdVo

Video of problems 1 & 2b in NVDA: https://esriis-my.sharepoint.com/:v:/g/personal/klar7790_esri_com/EZqFF7BcfltHt5oxmGD5RvwBurDqzbGUtv5WhdieRTxfFA?e=vAzAOw

I have experimented with this component in the following environments:

• Safari 15.2 with VoiceOver on MacOSCatalina 10.15.7
• Firefox 96.0.1 with NVDA 2021.2 on Windows 10

Expected Behavior

For both screen-readers, I want to hear inline instruction on what keystrokes to use to interact with the component. I want to be able to "pick up" an item, hear the value label of the item associated with the drag control, move my selection and hear the position as I move, and "drop" my selection in a new position.

I'm going to re-share the resources Arjav shared to the Team's channel, since it's the behavior I am expecting: https://esriis.sharepoint.com/:v:/s/Calcite/EYvG5SkQcxpKvZtD0PUfX08BRbflz9ab4dz3RvBrx5ENrA?e=KliQV0 and link to the issue where Online fixed the auditory indicator of placement: https://devtopia.esri.com/WebGIS/arcgis-portal-app/issues/31870

Reproduction Sample

https://developers.arcgis.com/calcite-design-system/components/value-list/#sample

Reproduction Steps

Using VoiceOver

1. CMD+F5 to turn VoiceOver on/off
2. Go to https://developers.arcgis.com/calcite-design-system/components/value-list/#sample in Safari
3. Check "drag-enabled"
4. Click on "Value List - basic" to get VoiceOver focus close to actionable content
5. Holding VO keys (Ctrl+Option), tap right-arrow key 3 times to get to frame
6. Press VO keys + Shift + down-arrow to enter into frame
7. Focus should move to first toggle button, press VO keys + Spacebar, observe nothing happens
8. Try to move item, press VO keys + down arrow, observe nothing happens
9. Press spacebar, observe item is selected, but no associated label with what got selected
10. Press up/down arrow keys, item moves, observe no auditory indicator of placement

Using NVDA on Windows / Parallels

1. Run NVDA (may need to install if you don't have it)
2. Go to https://developers.arcgis.com/calcite-design-system/components/value-list/#sample in FireFox
3. Check "drag-enabled"
4. Click on "Value List - basic" heading to get NVDA focus close to actionable content
5. Using down-arrow, press key twice to move to first toggle button OR using Tab, press tab 4 times
6. Press spacebar, observed blue border on toggle button
7. Press down-arrow, observe value item doesn't move, instead you hear the next item as if navigating down the page

Reproduction Version

@esri/calcite-components@1.0.0-beta.74

Working W3C Example/Tutorial

No response

Relevant Info

Regression? Last working version: @esri/calcite-components@1.0.0-VERSION

Source

• CDN
• NPM package