1720340 - Tooltip caret markers invisible in about:preferences when HCM is active

Status: RESOLVED FIXED

(Firefox :: Settings UI, defect, P3)

Description

[Morgan Reschenberg [:morgan]]

STR:

In System Preferences > Accessibility > Display, check the "Increase Contrast" checkbox.

1. Navigate to about:preferences
2. In the in-content search bar, type a letter that corresponds to an access key (ex. "a")

Expected:
Occurrences of the letter are visibly highlighted within the page and a tooltip appears over buttons whose spawned popup includes the text.

Actual:
The tooltips are unreadable because they feature white text on a white background. They should probably use the same highlight color.

A related issue is reproducible with FF-level HCM instead of OS-level HCM:

(Ensure no box is checked in System preferences)

1. In about:preferences, scroll to Language & Appearance, click "colors" and select "always" in the dropdown
2. Hit OK
3. As above, search for text in the in-content search bar (ex. "a")

Expected:
tooltips are rendered in tightly wrapped boxes with a small arrow denoting the button or dropdown they pertain to

Actual:
tooltips are rendered in tightly wrapped boxes with black squares partially obscuring content below them (no arrows are visible)

Comment 1

[Morgan Reschenberg [:morgan]]

Attachment: no_arrows_tooltip.png

Comment 2

[Morgan Reschenberg [:morgan]]

Attachment: macOS_invisible_tooltips.png

Comment 3

[Morgan Reschenberg [:morgan]]

Attachment: expected_nonHCM_tooltips.png

Comment 4

[Anna Yeddi [:ayeddi]]

Attachment: OS-level HCM tooltips in Dark mode (macOS_tooltips_HCM+nightly_dark.png)

OS-level HCM tooltips in Dark mode

Comment 5

[Anna Yeddi [:ayeddi]]

Attachment: OS-level HCM tooltips in Light mode (macOS_tooltips_HCM+nightly_light.png)

OS-level HCM tooltips in Light mode

Comment 6

[Anna Yeddi [:ayeddi]]

Attachment: Firefox-level HCM tooltips without arrows (macOS_tooltips_FF_HCM+nightly_light.png)

Firefox-level HCM tooltips without arrows

Comment 7

[Anna Yeddi [:ayeddi]]

Tested on MacOS Monterey v.12.1 with Nightly build 98.0a1 (2022-01-21) (64-bit), locally built from the mozilla-unified.

It appears that the only issue remaining is the lack of arrows for Firefox-level HCM, as OS-level HCM appears to work as expected for both Dark and Light modes/themes as on screenshots added above

Comment 8

[BugBot [:suhaib / :marco/ :calixte]]

The severity field for this bug is set to S3. However, the accessibility severity is higher, [access-s2].
:jaws, could you consider increasing the severity?

For more information, please visit auto_nag documentation.

Comment 9

[:Gijs (he/him)]

Actually, if this is now only about the arrows being blocks rather than arrows, is this still S2? (And, can we easily fix this on the front-end side? It looks like we're filling in foreground color across the image used for the arrow... which I think we can't change with CSS?)

Comment 10

[Morgan Reschenberg [:morgan]]

(In reply to :Gijs (he/him) from comment #9)

Actually, if this is now only about the arrows being blocks rather than arrows, is this still S2? (And, can we easily fix this on the front-end side? It looks like we're filling in foreground color across the image used for the arrow... which I think we can't change with CSS?)

I'm not familiar with how the arrow gets drawn here :( I looked at it in the inspector and it seems like it's a pseudoelement on the actual <span> the tooltip is contained in?

It looks like this is still an issue if I forcibly disable backplate (browser.display.permit_backplate=false) so it probably has to do with how we do color inheritance, but I can't say if that's a style-system issue or something else.

Comment 11

[Fred Chasen [:fchasen]]

I don't think we currently don't apply any styles on psuedo elements in HCM (so transparency wouldn't be applied).

Now that https://bugzilla.mozilla.org/show_bug.cgi?id=1591210 landed, we should be able to fix this by adding forced-color-adjust: none.

I just tested it with layout.css.forced-color-adjust.enabled pref on and it the arrow look as expected when I added that adjust rule.

Comment 12

[Fred Chasen [:fchasen]]

Attachment: Bug 1720340 - Fix color of tooltip caret markers for about preferences in forced color mode r=gijs

Adds "forced-color-adjust: none" to the search tooltip psuedo styles in preferences.css to disable any backplating in forced color mode.
High contrast color are now specified in a forced-colors media query.

Comment 13

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/7cf4e898abf8
Fix color of tooltip caret markers for about preferences in forced color mode r=desktop-theme-reviewers,mossop,Itiel

Comment 14

[Noemi Erli[:noemi_erli]]

https://hg.mozilla.org/mozilla-central/rev/7cf4e898abf8