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

SaanicaG commented 4 months ago

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 commented 4 months ago

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.

image showing color option for windows aquatic theme

madalynrose commented 2 months ago

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 commented 2 months ago

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 commented 2 weeks ago

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

microsoft / accessibility-insights-web