Fix display of warning text in Edge when Windows High Contrast Mode is enabled #2186
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
When Windows High Contrast Mode (HCM) is enabled for Edge, the warning text icon is affected by the readability backplate [1] which draws a box around the exclamation mark, obscuring parts of the circle. Opt out of the readability backplate by setting `forced-color:adjust: none` and handle it ourselves, by overriding the colors to system colours in a media query which detects if forced colors are active. Use `forced-color-adjust` and `forced-colors` over the MS specific `-ms-high-contrast-adjust: none;` and `-ms-high-contrast: active` to allow for future support from other browsers (e.g. Firefox, which allows users to set their own colour scheme for pages). HCM with IE11 does not seem to be affected by the same issue – I don’t think it implements a readability backplate. [1]: https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/6208eaffa0362ca107644c99b902c0b06bd5a0c8/Accessibility/HighContrast/explainer.md#ensuring-readability
|
We have the same issue in Firefox, which this unfortunately doesn't fix, because Firefox doesn't support the |
vanitabarrett
approved these changes
Apr 14, 2021
36degrees
changed the title
36degrees
force-pushed
the
warning-text-hcm
branch
from
cd972e1
to
31f78f9
Compare
Merged
3 tasks
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
When Windows High Contrast Mode (HCM) is enabled for Edge, the warning text icon is affected by the readability backplate which draws a box around the exclamation mark, obscuring parts of the circle.
Opt out of the readability backplate by setting
forced-color:adjust: noneand handle it ourselves, by overriding the colors to system colours in a media query which detects if forced colors are active.Use
forced-color-adjustandforced-colorsover the MS specific-ms-high-contrast-adjust: none;and-ms-high-contrast: activeto allow for future support from other browsers (e.g. Firefox, which allows users to set their own colour scheme for pages).HCM with IE11 does not seem to be affected by the same issue – I don’t think it implements a readability backplate.