Keyboard focus on child components

[kharrop]

I'm unable to use "tab" or keyboard navigation to change my focus to my newly triggered object. I have to tab through the rest of my nav in order to get focus on the object that's positioned closest to my trigger.

Current behavior: I tab to the first main nav item, and then tabbing goes to the next main nav item Expected behavior: I tab to the first main nav item which triggers my sub nav and I am able to tab to those sub-items.

[sunify]

Thanks for report and sorry for long response. Will take a look

[slafleche]

The problem is this component doesn't know what triggers the portal and doesn't know what's inside. So it's not really its responsibility. Depending on how you use it, you may need different solutions.

Here's what i would do if it's just a dropdown triggered by a button:

First it needs to be a proper accessible button menu https://www.w3.org/TR/wai-aria-practices-1.1/#menubutton

If you only have text inside the menu, and there's nothing to click/focus on, then just add a role="alert" on the contents of the portal.

If there is, then it's more complicated:

You need to also add an onKeyDown handler on your button to listen for a "tab" press.

If there is a tab press and the dropdown contents are visible, you need to set to the focus on the first tabbable element in the dropdown.

The first and last tabbable elements of the dropdown need to listen for tab press as well. The first needs to set the tab back to the button if you shift+tab out of the portal. The last needs to close the dropdown contents and set the focus on the element AFTER the button.

If you work with dynamic UI, i strongly suggest using https://github.com/davidtheclark/tabbable to handle the tab order. It's excellent.