Closed Bug 1747715 Opened 2 years ago Closed 2 years ago

Make dotted focus rings 2px wide in high contrast mode

Categories

(Toolkit :: Themes, enhancement, P1)

enhancement
Points:
2

Tracking

()

VERIFIED FIXED
97 Branch
Tracking Status
firefox97 --- verified
firefox98 --- verified

People

(Reporter: dao, Assigned: dao)

References

(Blocks 1 open bug, Regressed 1 open bug)

Details

Attachments

(2 files)

I often (depending on the background, screen resolution, brightness etc.) find 1px dotted focus rings hard to notice, and I imagine this is even more of an issue for vision-impaired users. Custom focus rings e.g. in Firefox toolbars are already 2px wide, and I believe this has become the default on Windows. So perhaps we should just make all focus rings 2px wide across the board, but let's be conservative and start with doing this for high contrast mode.

Summary: Make dotted focus ring 2px wide in high contrast mode → Make dotted focus rings 2px wide in high contrast mode
Blocks: 1747801
Pushed by dgottwald@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/da44efee8b93
Make dotted focus rings 2px wide in high contrast mode. r=harry,desktop-theme-reviewers
Status: ASSIGNED → RESOLVED
Closed: 2 years ago
Resolution: --- → FIXED
Target Milestone: --- → 97 Branch

Can we just make them 2px solid -moz-accent-color like for the form element UA styles? The dots look so ugly and archaic for me compared to the accent color. They kinda remind me of <blink>

(In reply to aminomancer from comment #4)

Can we just make them 2px solid -moz-accent-color like for the form element UA styles? The dots look so ugly and archaic for me compared to the accent color. They kinda remind me of <blink>

That might be something to consider. One concern would be that -moz-accent-color might not always have much contrast since we're dealing with arbitrary backgrounds. The text color is usually guaranteed to have good contrast. In any case, that's something for another bug. Feel free to file one.

Flags: qe-verify+

Hello Dao,
I tried to reproduce your issue in order to verify the fix. But I was not able to reproduce it. I used high contrast on Win10x64 and verified the focus on radio button from 'Save files to' from about:preferences page, but I see no difference between NB (96.0a1- 20211125214104) and Beta 97.0b1(20220110145841) ( I will attach a screenshot with the button).
Can you please mention the exact environment and buttons you want QA manual to verify the fix?
Thank you.

Flags: needinfo?(dao+bmo)
Attached image High contrast.png

You can verify this for instance in the Library window or About window. Please file new bugs for any parts of the UI using a thinner dotted outline in high-contrast mode. Thanks!

Flags: needinfo?(dao+bmo)
Blocks: 1749712

Navigated through the browser with "Tab" so that highlights were used while using 97.0b7 build.
All highlights are now made with 2 px dotted lines.

Status: RESOLVED → VERIFIED
Flags: qe-verify+
Regressions: 1760867
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Created:
Updated:
Size: