Tabindex order from an Offcanvas to the nested navigation, and then to the navigation items

[Misho]

Hi @charlie!

I have an Off-canvas element that has the Navigation Inline element nested.

Im trying to tune-in the tabindex using custom attributes on the Off-canvas and the Navigation element.

The proper order should be this:

1. Tabbing to reach the off-canvas toggle (then enter to activate it, opening the offcanvas area).
2. Tabindex should now ideally lead to the first navigation item nested inside of the off-canvas, or at least to the navigation element itself, where the next click of the Tab would lead to the first navigation item.

I can set the custom attribute to set the navigation Inline element itself, but the next click on the Tab key leaves it, moving on with the next element.

If it is not possible to set custom attributes for the navigation items themselves, then at least when any of the navigation elements get “tabindexed”, the next in the index order should be the first item inside that navigation.

I hope this makes sense.

Thank you!

(Sorry, I posted this wrongly to the support forum instead of Beta. Feel free to delete it).

[charlie]

I think I catch what you mean on this, but correct me if you are trying to do something else. I tried fooling around with tabindex and unless other browsers are different, on Firefox you would need to set the tabindex of the close button as well to get the feel you are looking for. Otherwise you’ll be tabbing through the address bar too.

What really worked well, was just placing the close button at the bottom of this off-canvas div. Browsers then interpret this as the last element so the last item to tab through is the close button. Feels like a better UX this way too.

I can write a request for custom attributes for the menu items and for the close button. The close button in general could use more options.

Thanks!