Offcanvas with body scrolling - confusing/illogical focus behaviour and concept

[patrickhlauke]

The idea with the offcanvas is that it's conceptually a modal dialog that just happens to be styled differently. However, the examples with body scrolling https://getbootstrap.com/docs/5.0/components/offcanvas/#backdrop break this concept - focus isn't moved to the offcanvas when opened, and not maintained in the offcanvas.

What's the intended use case here? Making this a non-modal offcanvas dialog? (that can be open while the main page is also still active)

If so, this needs a lot more work (treating the offcanvas essentially as a completely separate page/zone, and implementing keyboard interactions (e.g. using Ctrl+F6 or similar) for the user to move focus from the page to the offcanvas and back again, and then within those, keep the focus cycle clean.

Particularly puzzled by the backdrop+body scrolling example...what use case is this trying to address?

[patrickhlauke]

In the latest release, following #36717 (comment), the situation is slightly improved, but still not perfect:

• all offcanvas cases now set focus to the offcanvas when it opens
• offcanvas with backdrop, and offcanvas without explicit scrolling enabled, are now correctly modal and traps focus

The only oddity left is:

• offcanvas with scrolling but no backdrop https://getbootstrap.com/docs/5.2/components/offcanvas/

While focus is moved to the offcanvas, it is then not maintained inside it. However, the offcanvas still has aria-modal="true" which will lead to an odd situation where, when running with most recent screen readers, it will act as a modal (and hide the rest of the page from the user), but for keyboard users without SRs running, it won't.

If we're really trying to implement a non-modal offcanvas panel, the offcanvas should also still keep focus, but implement something like Ctrl+F6 to jump back out - and then a matching Ctrl+F6 to jump back into the offcanvas.

Unfortunately, a good solid example implementation of a non-modal dialog is still not available on the APG w3c/aria-practices#102 ...

Alternatively, we should decide and document that an offcanvas with body scrolling is, in effect, a strange variant of an expand/collapse disclosure widget - but in that case, it should not be marked as role="dialog" aria-modal="true"