Esri / calcite-design-system

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

[Switch] In FF and Safari, Switch can have "double focus ring" #10824

Open macandcheese opened 1 week ago

macandcheese commented 1 week ago

Check existing issues

Actual Behavior

On MacOS, in Safari or FF, you can "tab back to" a selected Switch and it will receive focus. Chrome is not effected.

Safari: Screenshot 2024-11-21 at 10 14 18 AM

FF: Screenshot 2024-11-21 at 10 14 03 AM

Expected Behavior

I'd expect there to be a single focus outline.

Reproduction Sample

https://codepen.io/mac_and_cheese/pen/mdNZNEv?editors=100

Reproduction Steps

  1. In Safari or FF - Open Codepen
  2. Click to check / focus Switch
  3. Tab off switch
  4. Shift tab back to switch
  5. Notice double focus
  6. Repeat in Chrome and observe no issue

Reproduction Version

2.13.2

Relevant Info

Maybe related? https://github.com/Esri/calcite-design-system/issues/8617

Regression?

No response

Priority impact

impact - p3 - not time sensitive

Impact

No response

Calcite package

Esri team

Calcite (design)

geospatialem commented 1 week ago

Tested across Windows browsers, and this is also occurring in Firefox (but not Edge or Chrome).

image