Prevent tabbing into closed navigation

[PVince81]

When the navigation is closed, add "inert" attribute to prevent tabbing
into the sidebar.

• FIXME: inert="false" does NOT disable inert, need to remove the attribute completely 😒

Note: I didn't test this but tied the attribute to the open value. I verified in the Talk app that the open attribute is properly updated when swiping, resizing the window, etc. So setting inert under the same conditions should work.

[PVince81]

according to https://stackoverflow.com/a/64598898 just setting the attribute to null should make Vue remove it

[PVince81]

would be good to do some tests with an app that has the sidebar

sadly the style guide cannot test the app navigation

[PVince81]

does anyone has a working npm link setup to quickly test this ?

[vinicius73]

The change seems ok, Vue will remove this prop.
But I did not test it properly.

Maybe a full example of this component will help in future changes.

[skjnldsv]

Inert seems not supported enough yet :(

[nickvergessen]

Inert seems not supported enough yet :(

Well sounds like we can fix most of the browsers now and the last one will catch up eventually.

[skjnldsv]

Inert seems not supported enough yet :(

Well sounds like we can fix most of the browsers now and the last one will catch up eventually.

Not really, the browser versions are all very new. Chrome 102 is just from last May.
We should consider another approach too imho

[skjnldsv]

See comments

[PVince81]

We should consider another approach too imho

we could look into polyfills for inert

I don't think we should invest time trying to hack this around on our own, unless quick, easy and reliable

in caniuse it said Firefox 106 supports it now: https://caniuse.com/?search=inert

[skjnldsv]

in caniuse it said Firefox 106 supports it now: caniuse.com/?search=inert

Scheduled to be released on 2022-10-18 😕

What about just tabindex=-"1"
EDIT: Ah, I guess it won't solve the issue with accessibility tools ?

[skjnldsv]

Also:

[PVince81]

tabindex="-1" on the container doesn't fix sub-items as far as I remember.
we'd need to set this on every link and field within the sidebar and remember its original value, if any, and then reset it back
quite an involved hack

[PVince81]

idea: would it be possible to unmount the navigation when it's closed after a small delay ? then mount it again when opened ?

might cause delays though when mounting again while the user is swiping

[skjnldsv]

idea: would it be possible to unmount the navigation when it's closed after a small delay ? then mount it again when opened ?

might cause delays though when mounting again while the user is swiping

Would be a good idea, debounce show/hide could be worth it
You would need two props one for v-show and another for v-if

[susnux]

Currently 88% of global users are supported, the remaining missing browsers from our browserslist config are currently Safari 15.4 and Firefox ESR.

I think this approach:

Well sounds like we can fix most of the browsers now and the last one will catch up eventually.

is now good enough for version 8 / NC28 (meaning I think this is fine for current master).

[raimund-schluessler]

This seems to break opening the sidebar when it is closed, see #4433

[susnux]

I think we need to move the button outside the navigation element