search

Esri / calcite-design-system

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

Dropdown: Should act like a single component and only focus the trigger element. #8206

Open driskull opened 7 months ago

driskull commented 7 months ago

Check existing issues

Summary

The problem with the dropdown is that it steals focus away from the "trigger" element.

Actual Behavior

When you open a dropdown and shift-tab it takes you back to the trigger rather than the previous element.

Expected Behavior

Ideally, the trigger should remain focused and the dropdown items should appear focused but not actually be focused.

This is better because it would act like a single component that is in focus rather than two separate components passing focus back and forth between each other.

We should use the "active-descendant" approach because of this.

Reproduction Sample

https://codepen.io/driskull/pen/RwvxBZG?editors=1000

Reproduction Steps

  1. Open the sample
  2. tab to the "plus" trigger
  3. hit enter
  4. Focus is moved to the dropdown group rather than staying on the dropdown component.
  5. Ideally a component should only have one element that has tabindex for something like a menu.

Reproduction Version

1.10

Working W3C Example/Tutorial

https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/examples/menu-button-actions-active-descendant/

Relevant Info

No response

Regression?

No response

Priority impact

p2 - want for current milestone

Calcite package

Esri team

ArcGIS Maps SDK for JavaScript

macandcheese commented 7 months ago

cc @jcfranco related to the reference-element changes for Dropdown.

jcfranco commented 7 months ago

cc @jcfranco related to the reference-element changes for Dropdown.

Added a comment about ☝️ here, but I think for this particular case @driskull's suggestion is the way to go. We should look into updating other similar components.

geospatialem commented 6 months ago

Take a look at type property, which specifies either "click" or "hover" for consideration of deprecation/removal, or next steps as the above issue is addressed.

geospatialem commented 2 days ago

Conduct a team spike effort via a meeting for a future implementation.