Need for alternate Tab design in those cases where there is "Tab Nesting"

[bojanasan]

When a page already contains the standard EUI tab components at the top of the page, I'd like to consider having a secondary tab component. Using the same component in both places creates some challenges around visual hierarchy and styling as well.

The first view shows what the page would look like with current tab components repeated

This second view shows the alternate just by using Heading components

Would love to hear thoughts and suggestions, or any other considerations for this potential component.

[bojanasan]

@cchaos Btw I've updated the color of the font using Heading text (I'm guessing that was the accessibility issue you were referring to?) and maybe it looks better this way too.

[cchaos]

Thanks @bojanasan! Yes that was partially the accessibility issue was the unselected text color was much too light. The only problem now is that the visual contrast between the selected and unselected states don't pass WCAG. This is typically why we've provided the bottom border. We had the same issue with our EuiLink component and so we opted to increase the weight so that it stands out against a paragraph of regular text.

I'm not sure we'd want to drop the font-weight of the unselected tab in this case because it would no longer look like a clickable element.

[dborodyansky]

Has < EuiButtonGroup> been considered as a nested pivot control within tabs instead of creating a new pattern?