Open Bug 1906181 Opened 7 months ago Updated 4 months ago

[Tab Strip] Indications of selected and active tab states are not sufficient

Categories

(Fenix :: Tabs, defect, P2)

All
Android
defect

Tracking

(Accessibility Severity:s2)

Accessibility Severity s2

People

(Reporter: ayeddi, Unassigned, NeedInfo)

References

(Blocks 1 open bug)

Details

(Keywords: access, Whiteboard: [fxdroid][group4][needs-ux])

Attachments

(2 files)

Steps to reproduce

  1. Open Firefox and open a few tabs
  2. Review the visual difference between the currently opened (selected) tab and other tabs
  3. Tap-and-hold another tab to move it within the tab strip. While still holding the tab, review the visual difference between the active tab and other tabs

Expected behavior

  1. It is visually clear which tab is selected (currently opened in the web content view) and which one is active (being held and can be moved)
    • Per WCAG 2.2, having a color-based visual difference of background colors for active and inactive tabs that would have at least 3:1 in color contrast and/or shape-based indication (i.e. the border of the active tab has a thicker border) would be sufficient.

Actual behavior

  1. It is nearly impossible to visually distinguish selected and not selected states among tabs in the tab strip: the indication only relies on color alone, thus per WCAG 2.2, the color difference between the states should be at least 3:1 in color contrast or higher, in this case, for the background of selected and not selected tabs:
    1. In the Dark theme, the color contrast ratio is: 1.7:1 which is failing WCAG 1.4.11 Non-text Contrast (AA) for UI components and graphical objects.
    2. In the Light theme, the color contrast ratio is: 1.1:1 which is failing WCAG 1.4.11 Non-text Contrast (AA) for UI components and graphical objects.
  2. The active state is not distinguishable from the default state and while trying to hold it on longer, the tab becomes selected (Is it expected?).
  3. Similar to the bug 1704347

Device information

  • Firefox version: Nightly 129.0a1 (build #2016026447)
  • Android device model: Samsung Galaxy Tab S7+
  • Android OS version: 13
Severity: -- → S2
Assignee: nobody → npoon
Whiteboard: [fxdroid][group4][needs-ux]

Question for UX: Can I get some guidance on the change to make here? Should we simply make the tab items on the Tab Strip have a higher contrast or should we make their borders thicker? Or perhaps we do both?

Hi Anna, thanks for filing this bug. Would you be able to tell me if this issue also persists in private browsing mode? I tried to use the accessibility scanner to check but even in normal mode, the app is not raising any flags for the contrast.

Flags: needinfo?(ayeddi)
Flags: qe-verify+

(In reply to Nicholas Poon [:Nick] from comment #2)

Question for UX: Can I get some guidance on the change to make here? Should we simply make the tab items on the Tab Strip have a higher contrast or should we make their borders thicker? Or perhaps we do both?

This was the response that I got from Michael Verdi from UX:
This issue affects all of our browsers. Currently we don't have a tool in our design system to fix this. My only guidance for now is to leave it (sorry). Fixing this is a bigger issue that the design team will have to take up.

Flags: needinfo?(ayeddi)
Flags: qe-verify+ → qe-verify-
Flags: qe-verify-
Assignee: npoon → nobody
See Also: → 1906288
Assignee: nobody → rsainani
Status: NEW → ASSIGNED
Priority: -- → P2
See Also: → 1920516

Assigning myself as I'm working on Bug 1920516 which updates the colors.

[:ayeddi] Could you please verify this again on nightly as Bug 1920516 has now landed which updated the colors in general. If not, we'll have to leave it for now based on the above discussion :(

Flags: needinfo?(ayeddi)
Assignee: rsainani → nobody
Status: ASSIGNED → NEW
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Created:
Updated:
Size: