search

Esri / calcite-design-system

A monorepo containing the packages for Esri's Calcite Design System
https://developers.arcgis.com/calcite-design-system/
Other
293 stars 76 forks source link

Hidden or disabled dropdown items in list actions confuse keyboard navigation #10584

Open nwhittaker opened 1 month ago

nwhittaker commented 1 month ago

Check existing issues

Actual Behavior

Give a list of items with dropdowns slotted in actions-end and after setting focus on the dropdown's slotted trigger action:

Description Screenshot
Pressing ArrowDown opens dropdown but, if first dropdown item is hidden, focus shifts to next list items's dropdown trigger. Screenshot 2024-10-22 at 5 09 56 PM
Pressing ArrowUp opens dropdown but, if last dropdown item is hidden, focus shifts to previous list item's dropdown trigger. Screenshot 2024-10-22 at 5 09 42 PM
Pressing ArrowDown opens dropdown but, if first dropdown item is disabled, focus shifts to the disabled item. Screenshot 2024-10-22 at 5 36 09 PM
Pressing ArrowUp opens dropdown but, if last dropdown item is disabled, focus shift to the disabled item. Screenshot 2024-10-22 at 5 36 26 PM

Expected Behavior

Give a list of items with dropdowns slotted in actions-end and after setting focus on the dropdown's slotted trigger action:

Description Screenshot
Pressing ArrowDown opens dropdown and focus shifts to first visible, non-disabled dropdown item. Screenshot 2024-10-22 at 5 41 14 PM
Pressing ArrowUp opens dropdown and focus shifts to last visible, non-disabled dropdown item. Screenshot 2024-10-22 at 5 41 01 PM

Reproduction Sample

https://codepen.io/nwhittaker-esri/pen/JjgrOPQ

Reproduction Steps

  1. Visit the sample
  2. Click the first list-item's action twice and then press the down arrow key
  3. Click the second list-item's action twice and then press the up arrow key
  4. Click the third list-item's action twice and then press the down arrow key
  5. Click the fourth list-item's action twice and then press the up arrow key

Reproduction Version

2.13.1

Relevant Info

Possible related to https://github.com/Esri/calcite-design-system/issues/8205.

Regression?

No response

Priority impact

impact - p2 - want for an upcoming milestone

Impact

Impact towards usability and accessibility:

  1. Dropdowns shouldn't open without also trapping focus
  2. Disabled dropdown items shouldn't be able to gain focus

Calcite package

Esri team

ArcGIS Field Apps

jcfranco commented 2 weeks ago

This might be addressed by #8623.