Focus not visible on Button in Windows High Contrast Mode (WHCM)
Closed, ResolvedPublicBUG REPORT
Actions

Assigned To

Authored By

	Bkudiess-msft
	May 22 2020, 5:16 PM

Description

Background

Windows features an operating system display mode called High Contrast Mode (WHCM). Unlike other display modes (for example setting dark mode flag), WHCM completely overrides authored colors with user-set colors in supporting browsers. IE/Edge but also Firefox/Win.
Here, when WHCM is active it relies on putting a certain color from its reduced palette on outline property disregarding transparent and only overrides the color value of the shorthand property. If we were to set outline: none it would fail to put a visible outline on the element.

Steps to Reproduce:

Go to any page with a OOUI button
Turn on high contrast mode
Navigate to the button using keyboard

Actual Results:

No focus is visible on the button

Expected Results:

There should be a visual indication that the current button is in focus

Goal

Set a compliant rule to support our visible custom focus outlines while also supporting the WHCM overrides.

Details

Related Changes in Gerrit:

	Subject	Repo	Branch	Lines +/-
	WikimediaUI theme: Add button focus for Windows high contrast mode	oojs/ui	master	+17 -0
	Update OOUI to v0.39.3	mediawiki/core	master	+209 -93

Customize query in gerrit

Related Objects

Mentioned Here: T253598: Focus not visible on checkbox in high contrast dark mode

Event Timeline

Bkudiess-msft created this task.May 22 2020, 5:16 PM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptMay 22 2020, 5:16 PM

Bkudiess-msft updated the task description. (Show Details)May 22 2020, 5:25 PM

@Volker_E @Aklapper The following PR contains a fix for this issue. https://gerrit.wikimedia.org/r/c/mediawiki/core/%2B/598085

My open questions in T253598#6193715 remain, the approach of preferring proprietary high contrast mode over any other mode and environment isn't sufficient for our scope and reach. If we can't address high contrast mode focus differently (and without a lot of extra code), taking away custom focus behavior will not be merged at current understanding.

Change 607640 had a related patch set uploaded (by Bkudiess-msft; owner: Bkudiess-msft):
[oojs/ui@master] Adds button focus in high contrast mode

https://gerrit.wikimedia.org/r/607640

gerritbot added a project: Patch-For-Review.Jun 24 2020, 11:21 PM

Status quo:

With patch:

Notice the far bigger radius.

Change 607640 merged by jenkins-bot:
[oojs/ui@master] WikimediaUI theme: Add button focus for Windows high contrast mode

https://gerrit.wikimedia.org/r/607640

Maintenance_bot removed a project: Patch-For-Review.Jul 9 2020, 9:10 AM

matmarex moved this task from Backlog to Next-up on the OOUI board.Jul 9 2020, 1:03 PM

Change 611174 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/core@master] Update OOUI to v0.39.3

https://gerrit.wikimedia.org/r/611174

gerritbot added a project: Patch-For-Review.Jul 10 2020, 7:09 AM

Change 611174 merged by jenkins-bot:
[mediawiki/core@master] Update OOUI to v0.39.3

https://gerrit.wikimedia.org/r/611174

Maintenance_bot removed a project: Patch-For-Review.Jul 10 2020, 11:11 AM

Volker_E moved this task from Next-up to OOUI-0.38.0 on the OOUI board.Sep 10 2022, 12:04 AM

Volker_E edited projects, added OOUI (OOUI-0.38.0); removed OOUI.

Volker_E closed this task as Resolved.Sep 10 2022, 12:06 AM

Volker_E moved this task from OOUI-0.38.0 to OOUI-0.39.3 on the OOUI board.

Volker_E edited projects, added OOUI (OOUI-0.39.3); removed OOUI (OOUI-0.38.0).

Volker_E renamed this task from Focus not visible on Button on high contrast mode to Focus not visible on Button in Windows High Contrast Mode (WHCM).Jan 15 2025, 9:49 PM

Volker_E updated the task description. (Show Details)

Extended by more detailed explanation on why the outline: 1px solid transparent workaround is needed. Also tagged by Codex as it inherited this solution from OOUI for future reference.

Restricted Application added a project: Design-System-Team. · View Herald TranscriptJan 15 2025, 9:52 PM

	F31908190: image.png
	Jun 26 2020, 10:51 PM

	F31908197: image.png
	Jun 26 2020, 10:51 PM

Focus not visible on Button in Windows High Contrast Mode (WHCM)Closed, ResolvedPublicBUG REPORTActions