1908937 - [A11Y] [Microsurveys] Consider increasing the "Submit" button contrast ratio from the Survey

Status: RESOLVED FIXED

(Fenix :: Experimentation and Telemetry, defect)

Description

[Lorand Janos]

Attachment: WhatsApp Image 2024-07-19 at 18.18.33_edd5cfba.jpg

Steps to reproduce

1. Have Google Accessibility Scanner installed.
2. Activate the micvrosurvey feature from secret settings.
3. Launch a microsurvey after using the print feature
4. Use the Accessibility Scanner and scan the Survey.

Expected behavior

No suggestions are made.

Actual behavior

A "Consider increasing this item's text foreground to background contrast ratio" suggestion is made, referring to the Submit text on the button.

Device information

• Firefox version: Nightly 130.0a1
• Android device model: Samsung Z Fold 4
• Android OS version: Android 14

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'Fenix::Experimentation and Telemetry' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Comment 2

[twhite]

Issue is related to the PrimaryButton component colours originally added in https://bugzilla.mozilla.org/show_bug.cgi?id=1886243

Comment 3

[Anna Yeddi [:ayeddi]]

It seems that the button is in the disabled state (per iOS, this would be until an option is selected by a user) - so technically the 4.5:1 or higher color contrast requirement does not apply here.

We still want the text to be legible for users, so they could estimate the button’s action whenever they make a selection above, but there it’s 2.79:1 which is close to 3:1 for non-text UI per WCAG, which again does not apply to disabled controls…

We could do better by making it 3:1 or higher in color contrast for the label text against its background, but I would mark it as access-S4 though, since it’s a delight question not compliance. AFAIK the Design systems team is also working on the updated set of colors that could be used to indicate the disabled state of the control, but this is still in progress.

Comment 4

[Dasha Andriyenko [:Dasha]]

I'm submitting a request for an a11y review of this issue as per Anna's recommendation.

Description:

• We are aiming to make the disabled buttons in Android more color accessible (at least a 3:1 ratio), while still maintaining a disabled look. The design systems team will provide color recommendations for the disabled button states.

How do we test this?

• Once implemented, the new buttons should be updated everywhere in the Android UI design system. Therefore you should be able to follow the "steps to reproduce" linked in this bug to open an example button.

When will this ship? Don't know as we don't know when the Acorn team will provide the final direction
Tracking bug/issue: Bug 1908937
Initial Design Explorations
Engineering lead: Tom White

Please describe the accessibility guidelines you considered and what steps you've taken to address them:

• Colour contrast 3:1 and above
• Maintaining a clear cognitive affordance that let's user know that the button is disabled
• The screen reader should announce the disabled state of the button

Describe any areas of concern to which you want the accessibility team to give special attention:

• Please help us strike a balance between color contrast accessibility but also clear communication that something isn't clickable.

Comment 5

[Rebeca Tudor]

Attachment: Bug 1908937 - [a11y]Increase contrast for disabled buttons

Comment 6

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/97fd4991a8d8
[a11y]Increase contrast for disabled buttons r=android-reviewers,twhite

Comment 7

[Serban Stanca [:SerbanS]]

https://hg.mozilla.org/mozilla-central/rev/97fd4991a8d8