Tab active class isn't removed correctly when inside drop-down menu (5.2 regression)

[cpsievert]

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

In the codepen link below, first click on the "C" tab (inside the dropdown "Menu"), then click on the "A" tab. Content for both the "A" tab and the "C" tab are still shown (the content for the "C" tab should not be shown).

It appears this bug was introduced in 5.2.0 (by changing the CDN links to 5.1.3 in the codepen, the issue goes away).

Reduced test cases

https://codepen.io/cpsievert/pen/OJvoYJb

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

macOS

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

Chrome

What version of Bootstrap are you using?

v5.2.0

[WinterSilence]

you miss data-bs-target and aria-selected attributes

[tungphan995]

Thank you for believing in me.

…

On Sunday, August 14, 2022, Anton ***@***.***> wrote: you miss data-bs-target attribute — Reply to this email directly, view it on GitHub <#36947 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AHORFCZ5QISJ7JJDFSKKADTVZEOONANCNFSM56MRRAHA> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

[cpsievert]

@GeoSot has this issue actually been fixed (it doesn't appear to be)?

[GeoSot]

As you didn't respond to @WinterSilence answer after 17 days, I supposed it was closed.

Please feel free to reopen it, if his answer doesn't solve your issue

[cpsievert]

@WinterSilence's comment does not resolve the issue and I cannot reopen it.

[GeoSot]

@patrickhlauke when you have the time, you may take a look at this.
I don't think it was documented, neither seems a valid behavior to me 😕 Do you believe we should handle it?

[patrickhlauke]

The tab JavaScript plugin does not support tabbed interfaces that contain dropdown menus, as these cause both usability and accessibility issues. From a usability perspective, the fact that the currently displayed tab’s trigger element is not immediately visible (as it’s inside the closed dropdown menu) can cause confusion. From an accessibility point of view, there is currently no sensible way to map this sort of construct to a standard WAI ARIA pattern, meaning that it cannot be easily made understandable to users of assistive technologies.

https://getbootstrap.com/docs/5.2/components/navs-tabs/#accessibility

[patrickhlauke]

Unless I'm missing a piece of the history, it seems we explicitly didn't include tabs with dropdowns with the 5.0.0 release, then this "regression" was patched back in, despite the documentation already suggesting it shouldn't be done. Docs were then later strengthens to make it clear that it's not something that should be done. In hindsight, the regression patch should not have been merged.

[patrickhlauke]

Note how the accessibility tree for the codepen example is borked, since role="tab" elements must be directly owned by a role="tablist" element, and you can't have links and lists like that inside a tablist.

Basically, you can either have a proper, compliant ARIA tabbed interface (in which case you can't use unorthodox constructs like tabs with dropdowns), or you have to abandon ARIA tabs altogether. We opted for the former, as it covers the vast majority of use cases. https://www.w3.org/WAI/ARIA/apg/patterns/tabpanel/

[cpsievert]

Docs were then later strengthens to make it clear that it's not something that should be done.

As a heavy user and follower of Bootstrap, I wasn't aware of this. To make it more clear, the section dedicated to using dropdowns should at least link to that accessibility note https://getbootstrap.com/docs/5.2/components/navs-tabs/#using-dropdowns

Basically, you can either have a proper, compliant ARIA tabbed interface (in which case you can't use unorthodox constructs like tabs with dropdowns), or you have to abandon ARIA tabs altogether. We opted for the former, as it covers the vast majority of use cases. https://www.w3.org/WAI/ARIA/apg/patterns/tabpanel/

I understand wanting to push for ARIA compliance, especially in terms of documentation and examples, but given the precedence for tabs within dropdowns in previous versions of Bootstrap, it doesn't seem like justification for breaking/dropping such a widely used feature. I know, for example, many users of Shiny/R Markdown (both of which builds on Bootstrap) will be surprised/upset to see this feature no longer available to them. Would you be willing to entertain a PR if I send a fix for this particular issue?

[patrickhlauke]

Would you be willing to entertain a PR if I send a fix for this particular issue?

I'd prefer seeing this as a 3rd party extension/plugin, not a core feature.