1920554 - [Toolbar Redesign] A11y Touch Targets for Toolbar

Status: RESOLVED FIXED

(Firefox for Android :: Toolbar, enhancement, P2)

Description

[tchoh]

After running an accessibility (a11y) tester , several touch targets within the Toolbar were found to be too small, resulting in a non-compliant and difficult-to-use interface, especially for users with motor impairments. The touch targets across various elements in the Toolbar do not meet the recommended minimum size of 48dp x 48dp, leading to usability concerns.

Affected Components and Current Dimensions:

• New Tab Button: 34dp x 34dp (Too small)
• Tab Counter Button: 34dp x 34dp (Too small)
• Menu Button (Landscape Only): Width 36dp (Needs adjustment)

Expected Behavior:
All touch targets should meet the minimum recommended size of 48dp x 48dp to improve accessibility. This ensures users can easily tap each element, even with limited precision.

Steps to Reproduce:

1. Run an a11y test on the Toolbar. The app used is Accessibility Scanner
2. Verify the touch targets for the components listed above.
3. Note the dimensions are smaller than the recommended size.

Proposed Fix:

1. Increase the touch target size for all affected components to at least 48dp x 48dp.
2. Ensure touch target areas are consistent across different orientations (portrait and landscape).
3. Test the updated sizes with an a11y tester to verify compliance.

Thank you @petru for testing this and bringing it up

Comment 1

[Chris Peterson [:cpeterson]]

(In reply to tchoh from comment #0)

Affected Components and Current Dimensions:

• Security Indicator: 40dp x 40dp (Needs adjustment)
• Display Toolbar: Height 40dp (Should be increased)
• New Tab Button: 34dp x 34dp (Too small)
• Tab Counter Button: 34dp x 34dp (Too small)
• Menu Button (Landscape Only): Width 36dp (Needs adjustment)

Tim, the Security Indicator and Display Toolbar (I think?) buttons are part of the address bar (phase 2 of our toolbar redesign) and New Tab Button, Tab Counter Button, and the Menu Button are part of the nav bar (phase 1 of our toolbar redesign). Can you please split this bug into two bugs: one for the address bar buttons and one for the nav bar buttons? That way we can schedule the two tasks to the appropriate milestone meta bugs.

Comment 2

[Chris Peterson [:cpeterson]]

Aarjav says the touch target bugs should block the toolbar beta milestone. The touch target sizes should be 48*48 minimum for all tappable icons and surfaces, as detailed here: https://www.figma.com/design/8fsCvtnweBkWGZ9NfL907l/__-Toolbar-Redesign?node-id=18304-352944&node-type=section&t=EQ6MyE0KvQI9JlPl-0

Comment 3

[Petru-Mugurel Lingurar [:petru]]

Attachment: Bug 1920554 - Make the new tab button and tab counter button bigger r=#android-reviewers

Previously we were using smaller buttons to ensure their ripples have the right size.
Now we use 48dp buttons and ripples.

Comment 4

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/a84fea1111e9
Make the new tab button and tab counter button bigger r=android-reviewers,Roger

Comment 5

[Cristina Horotan [:chorotan]]

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