Style of selected tab differs between tab link and basic tab about evergreen

[brandongregoryscott]

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>

[brandongregoryscott]

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:

evergreen/src/tabs/src/Tab.js

Line 27 in e13b9b4

_current: '&[aria-current="page"],&[aria-selected="true"]',

The nested selectors defined in the theme (i.e. :before and :after) should be attached to both of these:

evergreen/src/themes/default/components/tab.js

Lines 45 to 51 in e13b9b4

	'&:before': {
	transform: 'scaleY(1)'
	},
	'&:focus': {
	color: 'colors.blue600'
	}

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).

[limgit]

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).