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

[kroudams]

Summary

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

URL

https://developer.mozilla.org/en-US/docs/Web/CSS/@media/forced-colors

Reproduction steps

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

Expected behavior

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

Actual behavior

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

Device

Desktop

Browser

Chrome

Browser version

Stable

Operating system

Windows

Screenshot

Anything else?

No response

Validations

• [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]

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]

If this works, then we should go for it:

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