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.