USWDS - Header: Enable chevrons and add/remove icons to be visible in WHC/Forced Colors mode. Resolves #4453#4485
USWDS - Header: Enable chevrons and add/remove icons to be visible in WHC/Forced Colors mode. Resolves #4453#4485mahoneycm wants to merge 13 commits into
Conversation
…opriately appears in Windows high contrast mode.
|
I noticed the close button was disappearing on mobile while in WHC. Using the same solution as the chevron, I was able to replace the inline svg with Before:
After:
|
mejiaj
left a comment
There was a problem hiding this comment.
Looks and works pretty well. Thank you!
Some additional improvements we could make:
- Add some HCM styles to the navigation bar [_add-bar.scss] (used in
usa-currenthere and in sidenav) - Add a background or border to the search button for HCM only
| $nav-link-arrow-icon-size: 2; | ||
|
|
||
| // Maps for icon masks | ||
| $place-icon: ( |
There was a problem hiding this comment.
Let's rename this to something more obvious like $place-icon-defaults.
| ) | ||
| ); | ||
|
|
||
| $mobile-icons: map-merge( |
There was a problem hiding this comment.
Let's also update here for readability $mobile-icon-defaults.
| $after: "after"; | ||
| $before: "before"; | ||
| $icon-margin: "auto"; | ||
| $vertical-align: "auto"; |
There was a problem hiding this comment.
Let's remove these variables and just add these to each implementation. That way we can easily change 1 without affecting the other.
| $after: "after"; | ||
| $before: "before"; | ||
| $icon-margin: "auto"; | ||
| $vertical-align: "auto"; |
There was a problem hiding this comment.
I don't believevertical-margin: auto has any meaning. Do you mean middle?
Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align
|
@mahoneycm |
|
Closed in favor of #4604 |
Preview
Headers →
Description
Resolves #4453.
This PR uses the place-icon mixin to create a CSS mask for the Header navigation icons and enables them to be visible in WHC using
@media (forced-colors: active) {background-color: ButtonText;}Additional information
Currently:
After Fix:
Bonus Mobile view:
Before you hit Submit, make sure you’ve done whichever of these applies to you:
npm testand make sure the tests for the files you have changed have passed.