Supporting single `tabpanel`

Open lukewar opened this issue 4 years ago • 0 comments

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?

Oct 28 '21 16:10 lukewar