Hidden TabPanels are not crawlable by serch engines #9026
Description
Provide a general summary of the issue here
A bit unsure if this should be filed as a bug or more of a question, I guess it is a little bit of both. But I noticed that hidden tab panels in the Tabs-component are rendered conditionally. Which makes sense from a performance perspective, but I think that this might pose problems for search engine crawlers. Have you every considered this as an issue?
The way I know crawlers to work is that they just traverse the DOM, and while they are able to wait for scripts to load elements into view. But they do not "click around" on buttons that might hide other content.
This seems to work much better with the Disclosure component, for instance. Where the content is visually hidden and hidden from screen readers, but still present in the DOM.
🤔 Expected Behavior?
All TabPanel components should be present in the DOM at all times. But inert and hidden and from the user.
😯 Current Behavior
Only the active TabPanel is rendered in the DOM. Examples can be found in the docs, for instance: https://react-spectrum.adobe.com/react-aria/Tabs.html
💁 Possible Solution
All TabPanel components should be present in the DOM at all times, but all the ones that are inactive should be inert and have aria-hidden="true" and are hidden visually
🔦 Context
We had this issue brought to us by our content team
🖥️ Steps to Reproduce
Just simply inspect the DOM on the examples on https://react-spectrum.adobe.com/react-aria/Tabs.html, for instance
Version
react-aria-components 1.13.0
What browsers are you seeing the problem on?
Chrome
If other, please specify.
Not browser related
What operating system are you using?
macOS
🧢 Your Company/Team
No response
🕷 Tracking Issue
No response