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)
Tracking
()
Accessibility Severity | s2 |
People
(Reporter: julienw, Assigned: jhirsch)
Details
(Keywords: access)
Attachments
(2 files)
STR:
- 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".
- go to about:config.
- Search for a text field, for example search for
base-url
to selectdevtools.performance.recording.ui-base-url
- Double click this field.
- Click anywhere inside to unselect the default selection.
- Hover the textfield.
=> The text turns invisible when it's hovered.
Reporter | ||
Comment 1•1 month ago
|
||
In this image, only a part of the text is selected, to show the difference between selected and unselected.
Reporter | ||
Comment 2•1 month ago
|
||
Note: only with a light theme. With a dark theme this works fine.
Assignee | ||
Comment 3•1 month ago
|
||
Thanks for filing. Paging a11y folks to help me understand the a11y severity here.
Updated•1 month ago
|
Comment 4•27 days ago
|
||
Hi julienw,
Is this just in about:config, or are you seeing this behaviour in text fields in general?
Reporter | ||
Comment 5•26 days ago
|
||
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 :-)
Comment 6•26 days ago
|
||
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?
Reporter | ||
Comment 7•23 days ago
|
||
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!
We have color: inherit
on this input.
(without this property, this would be color: FIeldText
from forms.css)
On tr:hover
the color and background-color change. Note that this is specific for about:config.
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.
Comment 8•23 days ago
|
||
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?
Comment 9•23 days ago
|
||
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.
Reporter | ||
Comment 10•22 days ago
|
||
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!
Assignee | ||
Comment 11•16 days ago
|
||
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 | ||
Comment 12•16 days ago
|
||
Description
•