Page MenuHomePhabricator

Improve Media Viewer in High Contrast mode.
Open, Needs TriagePublic

Description

The close button and other UI elements using background-image: are not visible for Internet Explorer and Firefox users when in High Contrast mode.


How to test in Firefox:
In about:preferences, scroll to Fonts & Colors in Language and Appearance, click [Colors...], under "Override the colors specified by the page with your selections above" switch from [Only with High Contrast themes] to [Always].

Event Timeline

Dispenser created this task.Feb 7 2018, 3:01 AM
Restricted Application added a project: Multimedia. · View Herald TranscriptFeb 7 2018, 3:01 AM
Restricted Application added a subscriber: Aklapper. · View Herald Transcript

A workaround if we're unable to render icons is to draw boxes when in high contrast mode with border:1px solid transparent;. The transparent color will be forced to the visible foreground color.

@Dispenser And how to you make the OS tell the browser that it's in high contrast mode and the browser exposes that to the client? I think that's more complicated than just a rewrite of a CSS property :/

@Volker_E I tested it, it works. Empty green boxes are better than invisible buttons.

How High Contrast mode works in Firefox: The browser detects if the OS is in high contrast mode and switches to a color scheme that clobbers all colors forcing "text" (also includes border-color) to the High foreground color and removes all background images + graidants and backgrounds to High background color. This also affect getComputedStyle.

simon04 moved this task from Backlog to Design on the MediaViewer board.Jun 10 2019, 6:58 AM