Docs: problems with the two off-canvas components for docs navigation and general navigation on small screen
Prerequisites
-
I have searched for duplicate or closed issues -
I have validated any HTML to avoid common problems -
I have read the contributing guidelines
Describe the issue
Split from https://github.com/twbs/bootstrap/issues/36586 as I might have misunderstood what that issue was about, and proceeded to look at https://getbootstrap.com instead...and came across issues there:
it seems that for the navigation, something's not quite right in how the off-canvas was implemented: while the off-canvas for the "Toggle docs navigation" correctly traps focus, the off-canvas for the general navigation doesn't...users can still tab out of this and into the underlying page.
@mdo worth checking how this was added/implemented in this case. Also yes, while the "Toggle navigation" button does have an aria-expanded
, it's currently always set to false
, regardless. I suspect this was a left-over from the previous design that used dropdowns, as the off-canvas doesn't set aria-expanded
since the idea is that it's a modal, and the underlying page should not actually be accessible (because of the focus trapping and the aria-modal="true"
).
Also noticed that focus is not moved to either of the off-canvases (the docs nav, and the general nav), but remains on the toggle buttons. Not looked at the markup in depth, but suspect a tabindex="-1"
is missing on them (compare to the working off-canvas examples https://getbootstrap.com/docs/5.2/components/offcanvas/).
Reduced test cases
N/A
What operating system(s) are you seeing the problem on?
Windows
What browser(s) are you seeing the problem on?
Chrome
What version of Bootstrap are you using?
5.2