Closed limgit closed 1 year ago
Hmm, this looks like a regression from the V7 changes. The same code looks fine in v6.13.3: https://codesandbox.io/s/issue-1622-selected-tab-doc3fp
It looks like using the Link
component instead of an a
tag directly should also style correctly, as a workaround on v7:
<Tab
href={hash}
is={Link}
isSelected={selectedIndex === index}
appearance="primary"
key={tab}
onClick={() => setSelectedIndex(index)}
>
{tab}
</Tab>
Thanks for the reply! I'll use the workaround until a fix is applied.
Edit: FYI for future readers: I added aria-selected={selectedIndex === index}
prop to the Tab component (along with isSelected={selectedIndex === index}
) for workaround(Using Link
component styles the text little bit differently, which is not what I wanted).
I do think you're on to something with the incorrect selectors being generated - I think that's an edge case in the newer ui-box
features that wasn't handled properly. The selector for _current
maps to this:
https://github.com/segmentio/evergreen/blob/e13b9b4f2609ed3ecb5f7dc218dfe4fe1a1da048/src/tabs/src/Tab.js#L27
The nested selectors defined in the theme (i.e. :before
and :after
) should be attached to both of these:
However, these are only being attached to the last of the parent selectors, as you noted:
-.ub-tfrm_qu4iyp_fiauus[aria-current="page"], .ub-tfrm_qu4iyp_fiauus[aria-selected="true"]:before {
+.ub-tfrm_qu4iyp_fiauus[aria-current="page"]:before, .ub-tfrm_qu4iyp_fiauus[aria-selected="true"]:before {
transform: scaleY(1);
}
I should have a PR up there to fix it soon, and then we can bring it in here. It seems to solve the issue without having to change the existing tab.js
theme file.
Once this lands, I don't think you should need the aria-selected={selectedIndex === index}
prop anymore (since it sets aria-current="page"
internally if isSelected
is true).
When I use
appearance="primary"
for tab, style of the selected tab differs between tab link and basic tab.Is it by design or a bug?
I examined the stylesheet and it seems to be a bug since the css selector looks not correct:
I think it should be like this:
or at least, the selected tab link should have
aria-selected="true"
attribute.Rendered Example
Code
Package version