Offcanvas navbar expand remaining aria-hidden

[florianlacreuse]

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

Following PR #34273.

An offcanvas navbar with .navbar-expand-${breakpoint} can lead to a remaining aria-hidden="true", if the offcanvas is closed and the navbar is expanded again. This edge case happen when resizing the window on desktop or rotating an ipad (for instance).

Reduced test cases

https://codepen.io/florianlacreuse/pen/wvreVxN

What operating system(s) are you seeing the problem on?

Linux

What browser(s) are you seeing the problem on?

Chrome

What version of Bootstrap are you using?

v5.1.3

[florianlacreuse]

May be aria-hidden="true" attribute is not required for an offcanvas element since it already has the css property visibility: hidden;?

For instance, collapsed elements don't have the aria-hidden attribute, just a basic display: none;: https://getbootstrap.com/docs/5.1/components/collapse/#example

[GeoSot]

@patrickhlauke can you help us on this?

[patrickhlauke]

I'll have a look...

[ffoodd]

I think @florianlacreuse is right regarding visibility. AFAIK it effectively removes the element from the AOM. 🤔

[patrickhlauke]

yes, visibility:hidden, like display:none, already hides things from the accessibility tree, so this could potentially be used - though i believe it's done on purpose currently because it just reuses the regular scripting for modal https://getbootstrap.com/docs/5.1/components/modal/ (since off-canvas is just a variant of a modal).

more fundamentally, the offcanvas component doesn't currently deal with (as in clean up after itself) changes in viewport size. a more dramatic problem: open the offcanvas and resize the page while it's open ... you'll end up with the semi-transparent overlay over the page.

I'd say for both of these the more robust solution would be to check for when the offcanvas disappears/isn't used anymore, and do a proper graceful handoff (run the code to "close" the offcanvas, to remove the overlay; and then remove the aria-hiddens inside what was the offcanvas)

[patrickhlauke]

ah, looking even at the modal code itself, i see it uses display:none so its addition or aria-hidden="true" is also redundant. might need a nice little simplification/refactor of the modal and offcanvas code then to just rely on display:none/visibility:hidden and forego the aria-hidden

(though the other issue of the overlay remaining there when resizing an open offcanvas page remains...probably worth filing a separate issue for that though)

[patrickhlauke]

did some refactoring... #35589

[florianlacreuse]

@patrickhlauke Thank you for your feedback and the PR!

I agree about the need of offcanvas navbar to deal with viewport size changes, having this behavior built-in would be perfect.

[patrickhlauke]

The separate issue I filed for the overlay behaviour #35594