spectrum-web-components icon indicating copy to clipboard operation
spectrum-web-components copied to clipboard

[Bug]: Menu item focus state in overlay when using keyboard in Safari has visual issues

Open rickharris opened this issue 8 months ago • 0 comments

Code of conduct

  • [X] I agree to follow this project's code of conduct.

Impacted component(s)

sp-menu-item, sp-picker, sp-action-menu

Expected behavior

When navigating menu items inside of an overlay with the keyboard, focus state should appear correctly as menu items are focused and unfocused.

Expected behavior shown in Chrome:

https://github.com/adobe/spectrum-web-components/assets/216355/3c5731af-da33-47c8-9f03-f1e3adef01e4

Actual behavior

When navigating menu items inside of an overlay with the keyboard, menu items appear to be getting partially stuck in the focused state

Actual behavior in Safari:

https://github.com/adobe/spectrum-web-components/assets/216355/b036051c-4ecd-4868-bdef-5ea0d167d0c5

Screenshots

No response

What browsers are you seeing the problem in?

Safari

How can we reproduce this issue?

  1. Go to https://stackblitz.com/edit/vitejs-vite-fs3h7n?file=src%2Findex.css,src%2Fmy-element.ts&terminal=dev in Safari
  2. Click overlay trigger button. Open one of the menus inside of the dialog and use up and down arrows to navigate the menu.

Sample code that illustrates the problem

No response

Logs taken while reproducing problem

No response

rickharris avatar May 30 '24 17:05 rickharris