Off-canvas example: content still focusable when off-canvas menu collapsed
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.