Keyboard focus and VoiceOver focus behaves differently when shift + tab (both safari and Chrome)

I have a parent div element (that has a aria label for the screenreader to announce), it contains a link element.I need the screenreader to focus and read div element first, and then when you tab into the child link, to focus and read the child link. This forward tabbing is done as expected since both parent and child element are having tab index of 0.
However, when you shift tab backwards from the child back to the parent element, the tab keyboard focus (the keyboard tab wrapper) moves to the parent, but VO focus wrapper stays at the child component, and VO doesn’t announce anything.

I have tried these following methods in the JS file already:

1. change the parent’s tabIndex to 1 dynamically when the child element is on focus, and when parent element receives focus, change it back to 0.
2. When child element gets focus, set its aria-hidden attribute to true, and when focus leaves child element, it changes back to false.
3. Use a onKeyDown event handler to capture a shiftKey and a eventKey of "tab", then parentElement.focus()
4. ChatGPT also recommends to do a setTimeOut to let focus to respond, which i tried and failed, doesn’t make any sense to me either.

Expected: The VO focus should follow the shift + Tab focus to the parent element and announce the aria-label of the parent element.

None of these worked and I’m out of ideas, any input would be super helpful!

You need to sign in to view this answers