Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add a working example for tabs plugin with dropdown #35213

Closed
wants to merge 2 commits into from

Conversation

rohit2sharma95
Copy link
Contributor

While working for #31443, I found that docs are missing a working example for the tabs plugin with dropdown (Since that PR is not working for tabs with dropdown). It is not that much required though but it covers one more use case with a working demo 🙂

@rohit2sharma95 rohit2sharma95 force-pushed the rs/tabs-dpdwn-example branch 3 times, most recently from ae97040 to e1db80c Compare October 17, 2021 17:53
@patrickhlauke
Copy link
Member

on the road atm so can't check in depth, but: we removed the "tab interface with dropdown" on purpose a few years ago because that pattern can't be expressed sensibly using ARIA, and because it's bad UX. i believe we even say so specifically in the documentation somewhere

@XhmikosR
Copy link
Member

XhmikosR commented Dec 3, 2021

@patrickhlauke so, how do we proceed with this? I mean, if it's a bad practice, it doesn't make any sense to add it...

@patrickhlauke
Copy link
Member

patrickhlauke commented Dec 3, 2021

my preference would be not to include it. we even have this already in the docs

Note that dynamic tabbed interfaces should not contain dropdown menus, as this causes 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.

maybe we could strengthen this from "should not" to "must not" or "can't"

@XhmikosR XhmikosR requested review from ffoodd and mdo December 7, 2021 18:56
@ffoodd
Copy link
Member

ffoodd commented Dec 8, 2021

Agreed with @patrickhlauke — we should really avoid this. We may even promote this paragraph to a callout, I guess.

@XhmikosR
Copy link
Member

Going to close this then. @patrickhlauke feel free to change the wording, although it looks like it's clear enough. So, perhaps we should make it a callout after all.

@XhmikosR XhmikosR closed this Dec 22, 2021
@XhmikosR XhmikosR deleted the rs/tabs-dpdwn-example branch December 22, 2021 12:27
patrickhlauke added a commit that referenced this pull request Dec 22, 2021
following on from #35213 this

- expands the note, making it clear it's not supported
- makes it a callout
XhmikosR pushed a commit that referenced this pull request Dec 23, 2021
…5588)

following on from #35213 this

- expands the note, making it clear it's not supported
- makes it a callout
XhmikosR pushed a commit that referenced this pull request Jan 3, 2022
…5588)

following on from #35213 this

- expands the note, making it clear it's not supported
- makes it a callout
XhmikosR pushed a commit that referenced this pull request Jan 4, 2022
…5588)

following on from #35213 this

- expands the note, making it clear it's not supported
- makes it a callout
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants