Closed Bug 1767323 Opened 7 months ago Closed 6 months ago

Firefox "Autofill Profiles" dialog (for saved addresses & credit cards) title-text is hard to read in dark mode, because it's the same color regardless of dark/light mode

Categories

(Toolkit :: Form Autofill, defect, P3)

defect

Tracking

()

VERIFIED FIXED
102 Branch
Tracking Status
firefox102 --- verified

People

(Reporter: dholbert, Assigned: manisha270417, Mentored)

References

(Blocks 1 open bug)

Details

(Keywords: good-first-bug, Whiteboard: [lang=css])

Attachments

(3 files)

STR:

  1. Turn on dark mode for content, if it's not already on: i.e. visit about:preferences#general and under "Website Appearance", choose "Dark" (or equivalently: just match your system/Nightly theme and have a dark theme applied).
  2. Now, visit about:preferences#privacy
  3. Scroll down to "Forms and Autofill" section, and click either "Saved Addresses" or "Saved Credit Cards".
  4. Look at the fieldset-title just above the scrollable area (above the first saved address or credit card)

ACTUAL RESULTS: The fieldset title text ("Addresses" or "Credit Cards") is very close to the background color and hard to read.

EXPECTED RESULTS: Easier to read text.

See attached screenshot.

From poking around in devtools, it looks like this text's color is hardcoded here in manageDialog.css:

fieldset > legend {
  box-sizing: border-box;
  width: 100%;
  padding: 0.4em 0.7em;
  color: #808080;
  background-color: var(--in-content-box-info-background);
  border: 1px solid var(--in-content-box-border-color);

https://searchfox.org/mozilla-central/rev/a730b83206183bf097820c5780eef0d5e4103b9d/browser/extensions/formautofill/content/manageDialog.css#28

Note that some colors here -- background and border -- are controlled via CSS Variables which we customize to respect dark/light mode, but the text color (color) is just hardcoded to #808080 regardless of theme.

We should probably be using a theme-dependent CSS Variable here.

The background-color seems to be rgba(249, 249, 250, 0.15); composited over rgb(35,34,43), which (according to my eyedropper tool) works out to #5D5C67.

WebAIM Contrast-checker says that the foreground #808080, combined with this background color, has a contrast ratio of 1.66:1 which represents a failure on accessibility metrics:
https://webaim.org/resources/contrastchecker/?fcolor=808080&bcolor=5D5C67

In contrast [ha ha, contrast]: when I change Firefox to light mode, the background-color of this component is #F0F0F4 which WebAIM rates with a better contrast ratio of 3.47:1 (and is much easier to read):
https://webaim.org/resources/contrastchecker/?fcolor=808080&bcolor=F0F0F4

I'm guessing this color was chosen with a light-mode theme in mind, and dark mode wasn't considered (or was introduced later).

Attachment #9274685 - Attachment description: image.png → screenshot

For comparison, here's the dialog for the "Settings: Location Permissions" button in Preferences. It's got a similar "table-of-values-with-a-title" design-pattern, where the title is clearly readable.

Perhaps/probably we want to change manageDialog.css so that its hard-to-read "title" (the fieldset's legend) matches the foreground/background coloring of the similar UI elements (Website|Status) in the dialog that I've screenshotted here.

Attachment #9274685 - Attachment description: screenshot → screenshot of hard-to-read title text in "Saved Addresses" preferences dialog
Blocks: dark-mode

Ethan, can you get this bug tracked by the Form Autofill team?

Severity: -- → S3
Flags: needinfo?(ettseng)
Priority: -- → P3

The issue is with the manageDialog.css having a hardcoded color value, which :dholbert pointed out in Comment #0, instead of taking advantage of --in-content-page-color...but we can remove the custom color style from manageDialog.css and let the color style from common-shared.css cascade instead. The background-color style of manageDialog.css should also be updated to use --in-content-box-background instead of --in-content-box-info-background for a higher contrast ratio. This will prevent the white text on grey background when Firefox is using a dark theme.

To help Mozilla out with this bug, here's the steps:

  1. Comment here on the bug that you want to volunteer to help.
    This will tell others that you're working on the next steps.
  2. Download and build the Firefox source code
    • If you have any problems, please ask on Element/Matrix in the #introduction channel. They're there to help you get started.
    • You can also read the Developer Guide, which has answers to most development questions.
  3. Start working on this bug.
    • Ensure credit card and address autofill is enabled by setting the following prefs in about:config:
      • extensions.formautofill.addresses.supported set to "on"
      • extensions.formautofill.addresses.enabled set to true
      • extensions.formautofill.creditCards.supported set to "on"
      • extensions.formautofill.creditCards.enabled set to true
    • You will need to remove the color style from the fieldset > legend rule in manageDialog.css
    • You will also need to update the background-color style in the fieldset > legend rule from --in-content-box-info-background to --in-context-box-background
    • Verify your changes by switching between dark and light themes and ensure the text is now legible in the "Saved Addresses..." and "Saved Credit Cards..." dialogs.
    • If you have any problems with this bug, please comment on this bug and set the needinfo flag for me. Also, you can find me and my teammates on the #form-autofill channel on Element/Matrix most hours of most days.
  4. Build your changes with mach build and test your changes by switching between dark and light themes for Firefox and ensuring the old styles are gone. Also check your changes for adherence to our style guidelines by using mach lint.
  5. Submit the patch (including an automated test, if applicable) for review. Mark me as a reviewer so I'll get an email to come look at your code.
  6. After a series of reviews and changes to your patch, I'll mark it for checkin or push it to autoland.
Mentor: tgiles
Component: Preferences → Form Autofill
Flags: needinfo?(ettseng)
Keywords: good-first-bug
Product: Firefox → Toolkit
Whiteboard: [lang=css]

The product::component has been changed since the backlog priority was decided, so we're resetting it.
For more information, please visit auto_nag documentation.

Priority: P3 → --
Priority: -- → P3
Assignee: nobody → manisha.singh2019
Status: NEW → ASSIGNED
Pushed by tgiles@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/d76db0cedbaa
Title-text for saved addresses and credit cards readable in dark/light mode. r=tgiles
Status: ASSIGNED → RESOLVED
Closed: 6 months ago
Resolution: --- → FIXED
Target Milestone: --- → 102 Branch
Flags: qe-verify+

I managed to reproduce this issue on a 2022-05-02 Nightly build on macOS 11; verified as fixed on Firefox 102.0b4(20220605185654) and Nightly 103.0a1(20220605213032) on macOS 11, Windows 10 x64 and Ubuntu 20.04.

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