How to style a collapsed Tabs
component's Picker
?
#5325
-
I'm using tabs to alternate between three different search form options, and I'm rendering a This is all fine, but once they get collapsed, the I wonder if there's any way to style the Also, on a similar note, is there an easy way of centering the <Tabs>
<TabList alignSelf="center">
{/* ... */}
</TabList>
</Tabs> It does center nicely and it works properly on large windows, but on my laptop window it gets collapsed even though there's clearly enough room to accommodate the centered |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 2 replies
-
It's not accessible to have a contextual help or anything else interactive inside a Tab. See https://w3c.github.io/aria/#tab I suggest finding a different way to relay the information in the contextual help. You could put one outside the tabs, much like the "add"/"remove" buttons are added here https://react-spectrum.adobe.com/react-spectrum/Tabs.html#customizing-layout Once you remove it from there, you won't need to worry about it inside the collapsed menu. This is a good thing because in Spectrum, that icon would indicate that the item is unavailable, which is not what it seems you're trying to convey. See https://react-spectrum.adobe.com/react-spectrum/Menu.html#unavailable-items |
Beta Was this translation helpful? Give feedback.
It's not accessible to have a contextual help or anything else interactive inside a Tab. See https://w3c.github.io/aria/#tab
Children presentational: True
. I'm not sure how a keyboard user would get to that contextual help either.I suggest finding a different way to relay the information in the contextual help. You could put one outside the tabs, much like the "add"/"remove" buttons are added here https://react-spectrum.adobe.com/react-spectrum/Tabs.html#customizing-layout
Once you remove it from there, you won't need to worry about it inside the collapsed menu. This is a good thing because in Spectrum, that icon would indicate that the item is unavailable, which is not what it seems you…