[List] Accessibility Issues during keyboard navigation to "action-end" slot of List-Item

[pllcoster]

Check existing issues

• I have checked for existing issues to avoid duplicates

Summary

When navigating a list-item using the keyboard, and navigating to the "action-end" slot of the list item:

• navigating using tab, I can press enter/spacebar to open a calcite dropdown in the "action-end" slot
• navigating using left-right arrow keys, pressing enter/spacebar on the same item has no effect

Navigating using arrow keys makes the action-end item look focused, however the item cannot be used as expected, which may cause accessibility problems.

Related issue #7936

Actual Behavior

I have found that if you have a Calcite List, you can navigate from the List Item to the item in its "actions-end" slot using tab, and then (e.g. if the action-ends slot contains a Calcite Dropdown trigger action) you can use enter or spacebar to trigger the dropdown:

List Item Focused:

Tab to actions-end slot - pressing enter or spacebar will open the dropdown:

However once you have the actions-end slot focused, you can navigate around using the keyboard arrow keys, if you navigate away from the actions-end icon and then back to it, it looks like it is focused again (although the styling is different):

And now pressing enter or spacebar has no effect - the dropdown does not open.

Expected Behavior

Expected that if the action-end item is focused it should open by pressing enter or spacebar.

Reproduction Sample

https://codepen.io/pcoster/pen/oNJmZmj

Reproduction Steps

Follow the steps outlined in 'Actual Behavior' above

Reproduction Version

1.9.1

Working W3C Example/Tutorial

No response

Relevant Info

No response

Regression?

No response

Priority impact

p3 - want for upcoming milestone

Calcite package

• @esri/calcite-components
• @esri/calcite-components-react
• @esri/eslint-plugin-calcite-components

Esri team

ArcGIS Knowledge

[geospatialem]

Research spike to determine next steps regarding tree grid role.

[driskull]

According to W3C docs...

Enter: If cell-only focus is enabled and focus is on the first cell with the aria-expanded property, opens or closes the child rows.,Otherwise, performs the default action for the cell.

https://www.w3.org/WAI/ARIA/apg/patterns/treegrid/#keyboardinteraction

So we would just need to figure out the "default action for the cell".

If a cell contains multiple actions, buttons, etc. How do we determine the default action? Should we just click the first element slotted in?

Thoughts @geospatialem @jcfranco

[geospatialem]

If a cell contains multiple actions, buttons, etc. How do we determine the default action? Should we just click the first element slotted in?

It looks like the treegrid pattern would always have focus on the first element and enter would trigger the action.

So, in our case, the first slotted action in "actions-end" would be focused, and to get to other actions, would need to use tab and to go backwards through other actions, shift + tab similar to this native example.

Also of note: the treegrid role behaves differently with AT active, in particular JAWS, where the arrow keys, tab, and tab + shift will behave slightly different when JAWS is active.
- Keyboard only (also NVDA): tab to step into the next focused element / shift and tab to step back
- JAWS and keyboard 🦈 : Same as above and arrow keys to step forward/back between all elements, including focused elements

[github-actions]

Installed and assigned for verification.

[geospatialem]

Verified in 1.12.0-next.6.