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.

Sign up for GitHub

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

Jump to bottom

Supporting single tabpanel #40

Open
lukewar opened this issue Oct 28, 2021 · 0 comments
Open

Supporting single tabpanel #40

lukewar opened this issue Oct 28, 2021 · 0 comments

Comments

@lukewar
Copy link

lukewar commented Oct 28, 2021

I am working on a project picker component that is using tabs for switching between lists of projects. Since the content type for each tab is the same, only the source changes, I wish to use single tabpanel with a virtualised-list inside.

139296935-eb7a0d12-fa66-4a85-a31c-005536d41a08

<!DOCTYPE html>
<html>
  <body>
    <tab-container>
      <div role="tablist">
        <button type="button" role="tab" aria-selected="true">Tab one</button>
        <button type="button" role="tab" tabindex="-1">Tab two</button>
        <button type="button" role="tab" tabindex="-1">Tab three</button>
      </div>
      <div role="tabpanel">
        <virtualised-list></virtualised-list>
      </div>
    </tab-container>
    <script src="https://cdn.skypack.dev/@github/tab-container-element" type="module"></script>
  </body>
</html>

After talking to @keithamus I have learned that currently tab-container requires to have the same set of tabpanels as tabs as it announces panel changes to the screen reader.

Is that feasible to support mentioned use case and comply with accessibility requirements set on the tab-container-element?
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@lukewar