Responsive tabs and accessible alternatives

[stern-shawn]

Hi! Porting this over from a related discussion (#2223) as requested 😄

We have some... not great behavior with tabs on mobile views, even with say 5 tabs and relatively short titles:

(Doc itself, these are live now thanks to Paste 🙌 )

A couple ideas we have are to make the tabs bar scrollable, similar to a pattern I found in the MUI library. I have a rudimentary version working (sans auto-scrolling as the user navigates with left/right arrow keys, etc, but the scrolling potential is there) as seen here:

scrollable-tabs.mov

We've also tossed around the notion of rendering a select/combobox component at mobile breakpoints (similar to how we're rendering a menu as opposed to the side-by-side table of contents on tablet/mobile), which I see you suggested! My question there is, how would we approach implementing that while also keeping accessibility in mind? Would it be accessible to have a structure like this, and leverage the Tabs state hook + Select events to manage which is selected?

<Tabs>
  <Select /> // Might be outside of the Tabs, ignore the bad pseudocode
  <TabPanels>
    ...
  </TabPanels>
</Tabs>

I think I understand how to do this and make it work, but I'm concerned that the pattern may not make sense to a reader, especially one using assistive technology. Any help would be much appreciated 😄

[TheSisb]

Hi @stern-shawn,

Sorry for the delay here, we were discussing it internally. If this is a blocker right now, I would recommend using a select dropdown on smaller resolutions to unblock you. I've made a ticket for us to consider building an overflow UI for tab lists, which includes arrow buttons. Unfortunately our timeline isn't clear for when this feature will drop, but I've made the ticket and will report back when we have some updates for you.

[stern-shawn]

I appreciate it, and for now I'm not worried about it as a blocker. I can't imagine we have a huge segment of the user base viewing Twilio Docs from mobile, much less CLI installation docs. 😄

Would it be optimal? Yup! Is it worth messing with y'all's timeline? Hardly. I'm about to be on PTO until ~10/28 so if it's really urgent, hopefully one of my teammates will chime in. Otherwise, we just appreciate the framework so far, will use a Select-based option if needed, and look forward to cool new stuff in the coming releases 🎉

[TheSisb]

Thanks for the update and flexibility @stern-shawn, we really appreciate it!

The nice thing is, if you just use the Tabs component as-is today then when the fix is out all you need to do is update your Paste version. So it's a small annoyance right now and an easy fix later if you avoid rolling your own solution.

[nkrantz]

👋 Linking the JIRA ticket for easy finding! https://twilio-productivity.atlassian.net/jira/software/c/projects/DS/boards/25/backlog?selectedIssue=DS-282&text=tab

[serifluous]

This update for this was done in PR #4067 and will be available once #4096 is merged.

[stern-shawn]

Awesome, thank you and @krisantrobus for putting in the work on this! I'll get something in the docs backlog for us to upgrade us to the latest version and verify this plays nicely with everything 🚀