## Problem description VoiceOver in Safari on macOS does not behave correctly when navigating using Left and Right arrow keys a custom tag picker component which consists of a combobox for item selection preceded by added tags which are implemented as buttons with role="option" enclosed in role="listbox" container. ## Steps to reproduce 1. Turn on VoiceOver. 2. Visit this TagPicker component example in Safari: https://react.fluentui.dev/?path=/docs/components-tagpicker--default 3. Navigate to the combobox labelled as "Select employees"located under the "Default" h3 heading. 4. Type "a", for example, and then pick a person using the Down arrow key and insert with the Enter key. 5. Repeat step (4) to add more people. 6. Navigate in the TagPicker component using the Left and Right arrow keys. 7. Observe the navigation behavior and listen to the VoiceOver narration as you navigate. 8. Open Google Chrome on macOS and compare the VoiceOver behavior there for the same combobox with the behavior in Safari. ## Actual behavior VoiceOver does not constrain the navigation only within the combobox and added tags preceding it when navigating using Left and Right arrow keys the same way it does correctly with Google Chrome. Instead, in Safari, keybord focus sometimes jumps out of the TagPicker when navigating the TagPicker, or sometimes starts reading added tags character by character instead of navigating between the tags. ## Expected behavior After adding several tags, when navigating in TagPicker using the Left and Right arrow keys, VoiceOver should limit the navigation only within the added tags and combobox the same way it does in Google Chrome, narrating the added tags correctly one by one as user focuses them.
<rdar://problem/130195724>