Open SaanicaG opened 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.
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?
Agree with Madalyn- that is what we agreed on with the Design call. This is a summary of what we decided:
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!
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
Theme - Desert![image](https://github.com/microsoft/accessibility-insights-web/assets/148259220/0b4b3801-90a4-4b65-aa77-86bbd1980685)
Theme - Aquatic![image](https://github.com/microsoft/accessibility-insights-web/assets/148259220/e31135b4-a940-47bd-af4d-03b877a8aaae)
Theme - Dusk![image](https://github.com/microsoft/accessibility-insights-web/assets/148259220/7a691ab7-50ef-4d16-9b20-78600f42e755)
Theme - Night Sky![image](https://github.com/microsoft/accessibility-insights-web/assets/148259220/0954218d-5cfc-49f6-8abd-a53ea65a8d56)
Screenshots of added underlines upon hover are pasted as below-
Theme - None
Theme - Aquatic
Theme - Desert![image](https://github.com/microsoft/accessibility-insights-web/assets/148259220/ab169447-993b-4c21-bd6d-33eac0ebeae6)
Theme - Dusk![image](https://github.com/microsoft/accessibility-insights-web/assets/148259220/384fe106-435e-4dfe-aaa3-456d5c32928f)
Theme - Night Sky
Pull request checklist
yarn fastpass
yarn test
)<rootDir>/test-results/unit/coverage
fix:
,chore:
,feat(feature-name):
,refactor:
). SeeCONTRIBUTING.md
.