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

[esseb]

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.

[skjalgepalg]

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.

[kristofferlium]

I re-tested this now and the issue is resolved in MacOS 13.

Because this has proven to be a hard bug to solve and this is obviously due to a bug in Safari on previous MacOS-versions, we have decided to close this issue.