MDN web docs page is not fully accessible in forced-colors/high-contrast mode

kroudams commented 2 years ago

MDN new design doesn't look particularly accessible in high-contrast/forced-colors mode

Mostly it lacks the hover effect and active item support (in "In this article" <aside>) and icons are indiscernible

Enter any page on MDN (e.g. https://developer.mozilla.org/en-US/docs/Web/CSS/@media/forced-colors)
Apply high-contrast mode (in Windows: left Alt + left Shift + Print screen)
Look at the page

Icons should be visible and hover/active item effects should be visible.

Icons are not visible and hover/active item effect cannot be differentiated.

Desktop

Chrome

Stable

Windows

No response

[X] I have read the Community Participation Guidelines.
[X] I have verified that there isn't already an issue that reports the same bug to avoid creating a duplicate.
[X] I have checked that this is a concrete bug. For Q&A open a GitHub Discussion.

kroudams commented 2 years ago

For icons we could probably set background-color to something like CanvasText

Example:


@media screen and (forced-colors: active) {
    .bc-legend-item-dt .icon {
        background-color: CanvasText;
    }
}

Or


@media screen and (forced-colors: active) {
   :root {
     --icon-primary: CanvasText;
   }
}

The same is true for hover state / active item.

caugner commented 1 year ago

If this works, then we should go for it:


@media screen and (forced-colors: active) {
   :root {
     --icon-primary: CanvasText;
   }
}
``

mdn / yari