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

[SaanicaG]

trafficstars

Details

Fixed the Color contrast issue of focus for left nav tab for high contrast theme. Added underlines for links as per the requirement.

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

Screenshots of added underlines upon hover are pasted as below-

Theme - None

Theme - Aquatic

Theme - Desert

Theme - Dusk

Theme - Night Sky

Pull request checklist

• [x] Addresses an existing issue: (https://github.com/microsoft/accessibility-insights-web/issues/4263)
• [x] 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.
• [x] (UI changes only) Added screenshots/GIFs to description above
• [ ] (UI changes only) Verified usability with NVDA/JAWS

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

[madalynrose]

I believe the new directive is to change the left nav item's background color on hover, and also to add text underline on hover to all links (e.g. on the Getting Started and Overview pages in Assessment). @nang4ally can you add/amend anything I missed?

[nang4ally]

Agree with Madalyn- that is what we agreed on with the Design call. This is a summary of what we decided:

• To change the background color of the left navigation bar in high contrast mode to match the system settings.
• To add underlines and color changes to the links in the content area to indicate hover state.
• To invert the text color of the get started and help links on hover to match the save assessment button.

[madalynrose]

This looks great! I see one link that is missing hover styles: the target page link in the command bar Once that's updated, I think this is ready for merge!

[v-rakeshsh]

This looks great! I see one link that is missing hover styles: the target page link in the command bar Once that's updated, I think this is ready for merge!

HI @madalynrose Fixed the underline style for Link. please find the screenshot from Dev

[v-sharmachir]

This forked repo is inaccessible, opened new PR https://github.com/microsoft/accessibility-insights-web/pull/7569 with same change