fix: Left nav lacks clear tab or focus indicators with Windows HC modes

[SaanicaG]

Details

Fixed the Color contrast issue of focus for left nav tab for high contrast theme.

Motivation

Addresses Issue - Left nav lacks clear tab or focus indicators with Windows HC modes

Context

• Added focus indicators/clear tab on left nav. Screenshots added for reference-

Theme - Desert

Theme - Aquatic

Theme - Dusk

Theme - Night Sky

Pull request checklist

• Addresses an existing issue: (Left nav lacks clear tab or focus indicators with Windows HC modes #4263)
• Ran yarn fastpass
• Added/updated relevant unit test(s) (and ran yarn test)
• Verified code coverage for the changes made. Check coverage report at: <rootDir>/test-results/unit/coverage
• PR title AND final merge commit title both start with a semantic tag (fix:, chore:, feat(feature-name):, refactor:). See CONTRIBUTING.md.
• (UI changes only) Added screenshots/GIFs to description above
• (UI changes only) Verified usability with NVDA/JAWS

[madalynrose]

This is functional, but I find that the hover styles in contrast themes are nausea-inducing. Could we implement it closer to how it is in the default theme where we change the background color on hover? Or maybe underline the button text?

@nang4ally what do you think?

[v-viyada]

This is functional, but I find that the hover styles in contrast themes are nausea-inducing. Could we implement it closer to how it is in the default theme where we change the background color on hover? Or maybe underline the button text?

@nang4ally what do you think?

I remember, we discussed about this in one of standup meeting and finalized only to outline for hover style which is similar to windows file explorer in high contrast but we can still change if this does not look as required.

Btw we have limited color selection in contrast themes. Below are the color options in aquatic theme and users can change them according to their choice.