Hovered tab background color is the same as default state background color

[sydk-adhoc]

Background: I have typical deuteranopia, so have some trouble distinguishing subtle color changes, and this is particularly true with things like hover states, when all that changes is text color, and the change is either minor in terms of contrast change or relies on two colors that are problematic for me.

Adding further cues, like a change in background color, can be helpful.

In the case of tabs, it looks to me like there's an intention to change the background color of hovered tabs, but that there's an error in the source tokens (see below), because the two states use exactly the same color (that being #fff, or white). If this isn't a bug, I think the pattern still needs to be re-evaluated for A11Y.

Note that I find this Vertical Navigation pattern somewhat more accessible, given my color-blindness. Even this, however, is probably more subtle than it should be (and it only changes the hovered item's background color, not the text color)

Reference tokens:

design-system/packages/design-system-tokens/src/tokens/Theme.medicare.json

Line 4139 in 2a0d36e

"$value": "{theme.color.background}",

design-system/packages/design-system-tokens/src/tokens/Theme.medicare.json

Line 4159 in 2a0d36e

"$value": "{theme.color.background}",

[jack-ryan-nava-pbc]

Thanks for raising this @sydk-adhoc

We'll open a ticket and investigate.