Open Bug 1941287 Opened 1 month ago Updated 16 days ago

In about:config on high-contrast mode on Linux and Mac, when hovering an edited field, the unselected text is invisible

Categories

(Toolkit :: Preferences, defect, P1)

defect

Tracking

()

ASSIGNED
Accessibility Severity s2

People

(Reporter: julienw, Assigned: jhirsch)

Details

(Keywords: access)

Attachments

(2 files)

STR:

  1. Enable High Contrast mode in Orca and Firefox

In Firefox: in the Colors preference panel, click "Use system colors" and select "Only with high contrast themes" below.
In Gnome: in the Accessibility preferences, select "High Contrast".

  1. go to about:config.
  2. Search for a text field, for example search for base-url to select devtools.performance.recording.ui-base-url
  3. Double click this field.
  4. Click anywhere inside to unselect the default selection.
  5. Hover the textfield.

=> The text turns invisible when it's hovered.

Attached image image.png

In this image, only a part of the text is selected, to show the difference between selected and unselected.

Note: only with a light theme. With a dark theme this works fine.

Thanks for filing. Paging a11y folks to help me understand the a11y severity here.

Keywords: access
Accessibility Severity: --- → s2

Hi julienw,

Is this just in about:config, or are you seeing this behaviour in text fields in general?

Flags: needinfo?(felash)

I tried in various places, but I believe this is in about:config only. I don't see the hover CSS change in other places I looked :-)

Flags: needinfo?(felash)

Bizarre. I wonder if this is because about:config is rendered in the parent process.

Do you see similar behaviour in the input in about:logging?

Flags: needinfo?(felash)

No this is specific to about:config! about:logging and about:preferences do not show this.

I think I found the issue, it's quite subtle!

Exhibit 1:
https://searchfox.org/mozilla-central/rev/a965e3c683ecc035dee1de72bd33a8d91b1203ed/toolkit/themes/shared/in-content/common-shared.css#560-568

We have color: inherit on this input.
(without this property, this would be color: FIeldText from forms.css)

Exhibit 2:
https://searchfox.org/mozilla-central/rev/a965e3c683ecc035dee1de72bd33a8d91b1203ed/toolkit/components/aboutconfig/content/aboutconfig.css#117-120

On tr:hover the color and background-color change. Note that this is specific for about:config.

Exhibit 3:
https://searchfox.org/mozilla-central/rev/a965e3c683ecc035dee1de72bd33a8d91b1203ed/toolkit/themes/shared/in-content/common-shared.css#148-149

When in forced-colors mode, the variable used for color is set to SelectedItemText (and its background to SelectedItem). This is perfectly fine for the label... but not for the input where only the color is inherited, not the background-color (which makes sense)!

Note that the text color for :hover when not in forced-colors stays black, that's why the problem happens in forced-colors only.

How to fix it?

I would think that this color: inherit in exhibit 1 was a cheap way to make dark mode work. Instead I'd explicitely set the input's text color to something that matches its background. Other places use var(--in-content-text-color) but I don't know if that's appropriate here, you know better than me.

Flags: needinfo?(felash)

I would think that this color: inherit in exhibit 1 was a cheap way to make dark mode work. Instead I'd explicitely set the input's text color to something that matches its background. Other places use var(--in-content-text-color) but I don't know if that's appropriate here, you know better than me.

Hey hjones - I think we're tending into ReComp / Design Tokens territory a bit here. Any suggestions or thoughts here?

Flags: needinfo?(hjones)

Hey! Yeah so our --in-content-* vars are unofficially deprecated (only unofficial because we don't have the bandwidth to make removing all of them a priority). We have a --text-color design token that should be equivalent.

If inherit is working in other cases maybe this is something we just want to fix in aboutconfig.css just to limit the risk of unintended side effects, since common-shared.css is pretty global.

Flags: needinfo?(hjones)

According to the code in https://searchfox.org/mozilla-central/source/toolkit/themes/shared/design-system/tokens-shared.css#195 (my understanding is that prefers-contrast is also used when forced-colors is on), using --text-color looks reasonable!

I can reproduce this on macos as well, and the suggested fix seems to work, so I'll get the one-liner patch out for review :+1:

Assignee: nobody → jhirsch
Severity: -- → S2
Status: NEW → ASSIGNED
Priority: -- → P1
Summary: In high-contrast mode on Linux, when hovering an edited field, the unselected text is invisible → In about:config on high-contrast mode on Linux and Mac, when hovering an edited field, the unselected text is invisible
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Created:
Updated:
Size: