(4.9) high contrast themes (forced colours): on no focus indication input fields / form controls

[phiw13]

Reason: box-shadow is suppressed with HTC and only box-shadow is used to indicate focus on form controls with TXP-4.9dev Hive admin

STR

• on your Mac: using Firefox 89-beta or newer as a proxy (it is not perfect, but sufficient)

• Browser Preferences -> Language and Appearance -> Color: set to use system colours always (checkbox) and from the drop down, select Always.

• visit Textpattern admin back-end

• use the tab key to navigate the page. Or, just click in an input field. On text input fields you may discover that the focus is on the field if/when seeing the blinking text cursor. Eventually, maybe…. No other indication is available.

Solution, as a minimum:

@media (forced-colors: active) {
  :is(input, select, button, textarea):focus { outline: 10px solid; } 
}

• OK, may be just outline: auto is enough – degustibus et coloribus… (atm I am not sure what Chromium/Blink based browsers do with that one though)
• no need to specify color, currentColor is used anyway
• include in the list any link-button or other interactive element that may have the (default) outline suppressed (e.g. .txp-details)

I leave you the pleasure to discover any other issues with high-contrast themes (no little arrows on .txp-details and sortable columns in list tables…)

PS - TXP 4.8 fares better but don’t try the navigation menu (using the keyboard)…

[philwareham]

Thanks Philippe - I'll investigate this (and your solution) soon.

[phiw13]

Form controls related:

radio + checkbox disappear when toggling state (on/off) - tested in Brave (chromium) emulation mode (forcing “forced-colors“ MQ).

solution: reset to native state in the forced-colors MQ

input:is([type=radio],[type=checkbox]) { appearance: auto }