1893053 - Select and checkbox controls on the about:newtab page's settings dialog have subtle focus indication

Status: VERIFIED FIXED

(Firefox :: New Tab Page, defect, P1)

Description

[❌ Anna Yeddi [:ayeddi] ❌ On leave until 2027-01-04]

Attachment: Subtle focus indication of the Select dropdown and a checkbox

The focus indication is very subtle for the checkboxes and combobox with the row numbers for Shortcuts on the Settings dialog of the about:newtab page.

Being able to easily discern where the keyboard focus is located and follow it while navigating the page is crucial for the keyboard-only users, especially those with limited vision or with a glare on their screens. It is also important for users with cognitive difficulties and users with color deficiency to be able to tell apart a focused and not focused control to avoid activating wrong element.

It is recommended that the focus outline to follow the default browser behavior or to provide at least 2px thick perimeter around the control and to ensure this outline provides at least 3:1 in color contrast between both the page background and the non-focused control appearance.

Comment 1

[BugBot [:suhaib / :marco]]

The severity field is not set for this bug.
:amy, could you have a look please?

For more information, please visit BugBot documentation.

Comment 2

[Maxx Crawford [:maxx]]

Triage note: UX laid out all the different interaction states for reference for the customize panel:

https://www.figma.com/design/IBWq1tsiJqG4fyXWUKligD/HNT-Library?node-id=1-2559&t=0epABJ6Ex5HqQUjf-1

Comment 3

[Nina Pypchenko [:nina-py]]

Attachment: Bug 1893053 - Update focus/active states for Shortcuts form controls to accessible colours r=#home-newtab-reviewers

• Use colours from the Figma designs linked in the bug report for focus-visible and active
  states on sponsored checkbox and number of rows dropdown in the Shortcuts section of new tab
  page settings.

• Fix an existing issue where the top of the box shadow on the dropdow was being cut off
  by other elements on the page.

Comment 4

[Nina Pypchenko [:nina-py]]

Attachment: focus-dropdown.png

Comment 5

[Nina Pypchenko [:nina-py]]

Attachment: active-dropdown.png

Comment 6

[Nina Pypchenko [:nina-py]]

Attachment: focus-dropdown-dark.png

Comment 7

[Nina Pypchenko [:nina-py]]

Attachment: active-dropdown-dark.png

Comment 8

[Nina Pypchenko [:nina-py]]

Attachment: focus-checkbox.png

Comment 9

[Nina Pypchenko [:nina-py]]

Attachment: active-checkbox.png

Comment 10

[Nina Pypchenko [:nina-py]]

Attachment: focus-checkbox-dark.png

Comment 11

[Nina Pypchenko [:nina-py]]

Attachment: active-checkbox-dark.png

Comment 12

[Nina Pypchenko [:nina-py]]

A fix has been submitted. Screenshots above. I've taken the focus and active colours for the dark theme from the moz-toggle widget.

Ideally, the custom checkbox should be replaced with the one from the Acorn design system: https://acorn.firefox.com/latest/components/checkbox/desktop-535kxbzV.

Additionally, the dropdown needs to be brought in line with the Figma designs referenced above - I'd love to do it for this patch, but am wary of expanding the scope of this change. Amy, what do you think? Could I submit follow-up tickets for these two tasks?

Comment 13

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/eb7d5e82aaea
Update focus/active states for Shortcuts form controls to accessible colours r=home-newtab-reviewers,maxx,amy

Comment 14

[agoloman]

https://hg.mozilla.org/mozilla-central/rev/eb7d5e82aaea

Comment 15

[Bogdan Maris, Desktop Test Engineering]

Attachment: Active state when clicking with mouse - win

Reproduced the initial behavior using an old Firefox build (2024-04-23), the focus indicator is very subtle. Verified that using latest Firefox Beta build 134.0b3 across platforms (Windows 11, macOS 15 and Ubuntu 22.04) the focus is now more noticeable on both focus/active state.

Not sure though about what the active state is doing when the dropdown for example is not focused and clicked. To me this looks like a bug, not sure if this is already filled or not.

Comment 16

[Nina Pypchenko [:nina-py]]

Hi Bogdan, it's been a while since I used Windows so I don't know if it's even normal for the select field to behave like that, but I tend to think it's a bug and should be filed away as a follow-up. Is it reproducible on an old Firefox build with the light blue focus colours, or only the latest Beta with the new bright blue for focus and darker blue for active field? This might help us narrow down the problem in the CSS.

Comment 17

[Bogdan Maris, Desktop Test Engineering]

(In reply to npypchenko from comment #16)

Hi Bogdan, it's been a while since I used Windows so I don't know if it's even normal for the select field to behave like that, but I tend to think it's a bug and should be filed away as a follow-up. Is it reproducible on an old Firefox build with the light blue focus colours, or only the latest Beta with the new bright blue for focus and darker blue for active field? This might help us narrow down the problem in the CSS.

Thanks for your reply. It seems that the issue I was saying is a regression from this bug so yeah it was introduced in this patch. Logged bug 1935319 and cc'ed you in the bug (it does reproduce on all OSs). Will go ahead and close this bug as verified fixed though.