Update radio button outline color to improve accessibility

mozilla-mobile / firefox-ios

Firefox for iOS

Mozilla Public License 2.0

12.23k stars 2.94k forks source link

Update radio button outline color to improve accessibility #20103

Open cwzilla opened 6 months ago

cwzilla commented 6 months ago

Hi team,

It was recently discovered and reviewed by the a11y team that our radio button outline in the unchecked state is inaccessible.

Could we create a new token for the color to be applied to the outline?

Name	Light	Dark	Private
`borderRadioButtonDefault`	Light Grey 80 #8F8F9D	Light Grey 80 #8F8F9D	Light Grey 80 #8F8F9D

Here is a Figma example component for reference. Thanks! cc: @cyndichin

┆Issue is synchronized with this Jira Task

data-sync-user commented 5 months ago

➤ Cyndi Chin commented:

Figma Link: https://www.figma.com/design/zEr9HBYt4CPz1tmYy8oq2N/Ongoing-Draft-(Public)?node-id=146-39713&t=ub1oMsy8JYwTcS0J-0 ( https://www.figma.com/design/zEr9HBYt4CPz1tmYy8oq2N/Ongoing-Draft-(Public)?node-id=146-39713&t=ub1oMsy8JYwTcS0J-0|smart-link )

data-sync-user commented 5 months ago

➤ Cyndi Chin commented:

Discussed with Crystal Wong that we can update the existing image asset instead of using this token.

Instead of adding a new token and modifying existing code, for this ticket we would like to minimize changes and update the current radio button asset with the new one.

Our current radio button are specific to onboarding, as part of this work, lets also rename them to radioButtonChecked, radioButtonUnchecked or open to any better naming.

[^ae81702b-c96e-457d-af82-d6f98a7b0919]

data-sync-user commented 5 months ago

➤ Daniel Dervishi commented:

Testing instructions:

Click on “Continue” associated with the microsurvey popup at the bottom of the screen.
Verify that the radio button unchecked state meets accessibility standards

!Screenshot 2024-06-04 at 4.28.55 PM.png|width=33.33333333333333%,alt="Screenshot 2024-06-04 at 4.28.55 PM.png"!

Further the same can be tested in onboarding by:

Go to settings
Click the firefox version 5 times
Click experiments under debug
Click app customization in onboarding
Select treatment a
Go back to settings and click show tour under support
Skip the first three pages, after which the updated radio button unchecked state should be visible

data-sync-user commented 5 months ago

➤ Diana Andreea Barladeanu commented:

Validated on v9000 (42572), with iPhone 15 (17.5).

!09AC0C0C-3838-4139-B948-B1FEEB2199A8.jpg|width=944,height=2048,alt="09AC0C0C-3838-4139-B948-B1FEEB2199A8.jpg"!

data-sync-user commented 4 months ago

➤ Diana Andreea Barladeanu commented:

Validated on v128 (42870), with iPhone 15 (17.5).