TabPanel ID's are partially undefined when rendered before TabList

[rvanlaarhoven]

Provide a general summary of the issue here

When rendering the <TabPanel> components before the <TabList>, the ID's of the TabPanel mismatch the aria-controls properties of the Tab's, because they don't receive the Tabs identifier as part of the ID.
Instead, it passes undefined-tabpanel-* as the id and undefined-tab-* as the aria-labelledby on the tab panels.
Users can still interact with the tabs, so the issue is hard to spot, but it will result in incorrect aria references.

It seems like currently useTabsPanel depends on the TabListState here:

react-spectrum/packages/@react-aria/tabs/src/useTabPanel.ts

Line 30 in 114f890

export function useTabPanel<T>(props: AriaTabPanelProps, state: TabListState<T> | null, ref: RefObject<Element | null>): TabPanelAria {

🤔 Expected Behavior?

Not sure if the strict order of the components is expected behavior, but I'd expect the "tabs identifier" to be generated in the parent Tabs component and passed down to both the TabPanels and the TabList, so that the order doesn't really matter.

If it is expected to have this strict order, I'd expect some kind of notification (e.g. a console warning) saying the order is incorrect.

😯 Current Behavior

So the following example results in the correct state:

<Tabs>
  <TabList aria-label="History of Ancient Rome">
    <Tab id="FoR">Founding of Rome</Tab>
    <Tab id="MaR">Monarchy and Republic</Tab>
  </TabList>
  <TabPanel id="FoR">Arma virumque cano, Troiae qui primus ab oris.</TabPanel>
  <TabPanel id="MaR">Senatus Populusque Romanus.</TabPanel>
</Tabs>

while the following example will result in an incorrect state:

<Tabs>
  <TabPanel id="FoR">Arma virumque cano, Troiae qui primus ab oris.</TabPanel>
  <TabPanel id="MaR">Senatus Populusque Romanus.</TabPanel>
  <TabList aria-label="History of Ancient Rome">
    <Tab id="FoR">Founding of Rome</Tab>
    <Tab id="MaR">Monarchy and Republic</Tab>
  </TabList>
</Tabs>

💁 Possible Solution

No response

🔦 Context

No response

🖥️ Steps to Reproduce

See a reproduction here: https://codesandbox.io/p/devbox/quirky-cloud-yxs4vl. The tab panel elements receive id="undefined-tabpanel-FoR" aria-labelledby="undefined-tab-FoR"

Version

react-aria-components@v1.10.1

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

MacOS

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[snowystinger]

I assume that this is because you want the Tabs to be below the TabPanel visually? Can you use a css grid layout or flex to lay it out visually that way without changing the order of the Tabs and TabPanel?
I don't think there is anything else we can do, we need to know the collection items in order to generate the ids for linking.

[rvanlaarhoven]

The problem is not the item Id's. The TabPanel receives their own IDs, which should match the ones of the Tabs, so those are fine. The problem is the first part of the IDs, which is the unique identifier of the whole Tabs component. I am not sure if we should depend on the TabListState for that, and rather have it defined on a higher level (e.g. in the parent <Tabs />).

Regarding UI, I don't think you can expect to always have tabs on top visually. There's many reasons why a designer would want tabs on the bottom or on the right.
However, I can imagine that in terms of accessibility the Tab's need to be above the TabPanel's in the HTML. And yes there's CSS grid or flex to solve the visual part.

Though in our case, the mistake was made to place them the other way around because the design expected that, and there was no warning saying this would break the accessible part of the component.

So that's why – if the strict order of components is expected – another suggestion would be to trigger a console.warning inside the <TabPanel> when the tabs identifier is undefined.