Best practices for page navigation using Tabs

[vankhoawin]

https://paste.twilio.design/components/tabs

Hey team, had a question about page navigation using Tabs; for numbers, we use Tabs to group and navigate between a set of pages all related to a single number.

example page:

For a11y we're using Anchors inside the Tabs:

        <Tab
          key="someKey"
          id="someId"
        >
          <Button variant="reset" as="a" href="someLink">
            Messages Log
          </Button>
        </Tab>

However this has issues as clicking on anything within a Tab other than the text will not trigger navigation. I've tried instead to use the Tab's onClick for navigation, but that has the a11y deficiency of not 1) being able to open in new tabs or 2) semantically not being an HTML tag that can richly enough explain its navigation role. My question is, is using Tabs for page navigation recommended by DSYS, and if so, are we implementing it correctly? As always, thanks for the discussions.

[SiTaggart]

Hi @vnguyen94

So, yeah this has kind of come up before, and you are 100% right. See my comment from the other thread about tabs as nav #1244 (reply in thread)

We're still in that situation though, we still don't have the in page sub nav component for you to use, so it might be a case of using what we have for now, and following some of the tips in the other thread about how to achieve it with Tabs. Super not ideal, sorry about that.

As always though, super open to contributions if you fancy giving it a crack. 👍🏼 You can probably convince the design team that copying the styles into different markup would be "Good enough".

[vankhoawin]

The thread link was insightful, thanks. Don't really have too much bandwidth for contributions at the moment (CopyBox 😭 ), so for now we'll probably leave the functionality as is.