1871093 - [a11y] Consider increasing contrast for the "Report product is in stock" button on Xiaomi Pad5 (Android 13)

Status: RESOLVED FIXED

(Fenix :: Shopping, defect, P2)

Description

[Adina Petridean QA [:apetridean]]

Attachment: report.JPEG

Prerequisites

Have a clean profile.
Have the Shopping experience enabled through Secret settings - Nimbus experiments.
Have Accessibility scanner enabled.

Steps to reproduce

1. Open a product detailed page from Amazon, BestBuy, or Walmart, and search for a product with no analysis done yet which is not in stock.
2. Tap the shopping icon (price tag icon) in the URL bar and scan the page with A11y scanner.

Actual behavior:

The following is a list of opportunities to improve the accessibility of Firefox Beta. Each item corresponds to an outlined area on the attached screenshot.

Text contrast:

[1046,1158][1515,1211]
The item's text contrast ratio is 2.32. This ratio is based on an estimated foreground color of #FBFBFE and an estimated background color of #00B3F4. Consider using colors that result in a contrast ratio greater than 4.50 for small text, or 3.00 for large text.

Expected behavior:

There are no suggestions.

Device information:

Firefox: Beta 122.0b1
Device: Xiaomi Pad5 (Android 13)

Any additional information?

This issue was only noticed on Xiaomi Pad5 (Android 13).
The severity of this issue is categorized as S3 because it was not observed on other devices.

Comment 1

[Chris Peterson [:cpeterson]]

Attachment: Figma_colors.png

Kate says:

1. We checked design file and indeed Me and Crystal have missed that accessibility bug. Today Crystal has added a new colored for the button background, I have updated the design and now accessibility works.

2. The New button background color is “dark/action/android/info”. Can be found via this Figma link: https://www.figma.com/file/VE5xayz3yOSB5qOATUU9Im/Mobile-Shopping-Experience-MVP?type=design&node-id=5283-77843&mode=design&t=WOMtkPxevTZL43mH-4

Comment 2

[BMO Github Automation]

Attachment: [mozilla-mobile/firefox-android] Bug 1871093 - Review checker change info card button color (#5114)

Comment 3

[Vlad Dreghici [:vdreghici]]

I attached a PR for this issue, but when fixing it I noticed that the background color of the info card in dark mode is Blue50 with alpha 80 which is equivalent to #0060DF. I have attached a picture here as well. This makes the button very hard to distinguish from the background. Considering that in the Figma specs, the background color should be #0250BB with alpha set to 80%, I decided to add this change as well in the PR for this ticket. Check PR for more details.

Comment 4

[Vlad Dreghici [:vdreghici]]

Attachment: no_stock_same_color_bg_button.png

Comment 5

[Chris Peterson [:cpeterson]]

(In reply to Vlad Dreghici [:vdreghici] from comment #3)

I attached a PR for this issue, but when fixing it I noticed that the background color of the info card in dark mode is Blue50 with alpha 80 which is equivalent to #0060DF. I have attached a picture here as well. This makes the button very hard to distinguish from the background. Considering that in the Figma specs, the background color should be #0250BB with alpha set to 80%, I decided to add this change as well in the PR for this ticket. Check PR for more details.

@ Kate, Vlad would like UX review on the changes he made to the button background color.

Comment 6

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

The severity field for this bug is set to S3. However, the accessibility severity is higher, .
:vdreghici, could you consider increasing the severity?

For more information, please visit BugBot documentation.

Comment 7

[Vlad Dreghici [:vdreghici]]

UX has updated the figma designs.

Comment 8

[BMO Github Automation]

Authored by https://github.com/DreVla
https://github.com/mozilla-mobile/firefox-android/commit/21dd47216cdf0a9e6c17e9d91075842ae77b51b0
[main] Bug 1871093 - Review checker change info card button color

Comment 9

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

The patch landed in nightly and beta is affected.
:vdreghici, is this bug important enough to require an uplift?

• If yes, please nominate the patch for beta approval.
• If no, please set status-firefox123 to wontfix.

For more information, please visit BugBot documentation.

Comment 10

[Adina Petridean QA [:apetridean]]

Attachment: report.JPEG

Comment 11

[Adina Petridean QA [:apetridean]]

Verified as fixed on the latest Nightly - 124.0a1 from 31.01.2023 with Xiaomi Pad5 (Android 13).