Off-canvas example: content still focusable when off-canvas menu collapsed

[patrickhlauke]

On small screen sizes, when the top navigation turns to off-canvas, the links/controls inside it are still keyboard-focusable despite not being visible

https://getbootstrap.com/docs/4.0/examples/offcanvas/

Normally we'd add display:none when the menu is closed, but flipping between display:none and display:block here kills the animation.

If inert attribute was well supported cross-browser, that would be an approach...but it's a bit early for that (perhaps using polyfill?).

But in short: currently this is a classic example of what not to do, accessibility-wise.

[mdo]

My bad 😬

[patrickhlauke]

sorry, that last sentence was a bit harsh...

[patrickhlauke]

#25524 fixed the issue when the navbar is closed. probably when the navbar is open, the main content of the page should not be focusable as it's behind the open menu (acting like a modal, in effect)...but as this is just a simple example (which, incidentally, fails in IE11) we can probably live with that for now...