Tabs a11y: Need way to pass element to right of tablist while keeping outside of role="tablist" element.

[bvandercar-vt]

Feature request

Tabs: Need way to pass element to right of tablist while keeping outside of role="tablist" element.

For example, on the docs app, this searchbar:

Is currently created like such:

But the issue with this is that the input element gets put within the element that has role="tablist". This is a major accessibility failure, as this input element is not truly part of the list of tabs; it's a separate component that is adjacent to the list of tabs.

Desired implementation would be something like:

With the expected result being visually the same.

[adidahiya]

it's a separate component that is adjacent to the list of tabs.

Then it sounds like you should probably render it as a sibling of <Tabs> rather than as a child node. You should be able to do this with a bit of custom styling and rendering your tab panels separately from the tablist. I made a code sandbox to demonstrate this approach: https://codesandbox.io/p/sandbox/blueprint-v5-x-sandbox-react-16-forked-sntdc8?file=%2Fpackage.json%3A10%2C5

[bvandercar-vt]

@adidahiya Those examples are not equivalent because even though they look similar, you have not included the tab panel in them. The problem with making it a sibling is that it moves the entire Tabs element over:

[adidahiya]

@bvandercar-vt you're right. I updated my sandbox to show how it could work with the panels rendered independently of the <Tabs> component. You would need to render some of the a11y markup of .bp5-tab-panel yourself since Blueprint does not export a <TabPanel> component (this is something I would be open to implementing or accepting as a contribution PR). But it is doable: