core-components icon indicating copy to clipboard operation
core-components copied to clipboard

core-toggle: Focus moves to wrong element when using QuickNav in VoiceOver in Safari after expanding a core-toggle element

Open esseb opened this issue 5 years ago • 1 comments

Steps to reproduce:

  1. Go to https://static.nrk.no/core-components/latest/index.html?core-toggle/readme.md
  2. Enable VoiceOver in Safari on Mac
  3. Enable QuickNav (press left + right keyboard arrows simulatenously)
  4. Focus the second core toggle button "Popop JSX" (the fact that this is React is not relevant)
  5. Press tab to expand the core toggle
  6. Press the right keyboard arrow to move focus

Expected result:

Focus should move to the first element within the expanded core toggle.

Actual result:

Focus moves to the previous core toggle button instead.

Further information:

Chrome works fine. I can only reproduce this bug in Safari.

I made a reduced testcase on https://codesandbox.io/s/nrkcore-toggle-voiceover-quicknav-bug-in-safari-6pjuh which only uses the vanilla core toggle component. The bug behaves slightly differently based on the parent/ancestor elements of the core toggle component that gets expanded. We first noticed this bug on https://yr.no/nb/farevarsler

https://www.applevis.com/forum/macos-mac-apps/problem-voiceover-and-new-safari-14-mac appears to be describing this bug, but we were able to reproduce the bug in both Safari 13 and Safari Technology Preview also.

This appears to be purely a bug with VoiceOver in Safari, so I'm not sure what we could do here.

esseb avatar Oct 27 '20 14:10 esseb

We've confirmed that this is still an existing issue.

We're looking into restructuring the components of core-toggle to utilise native<details>-tag. Will keep this issue in mind and look to solve as one.

skjalgepalg avatar Aug 13 '21 13:08 skjalgepalg