1735454 - Upgrade spotlight: Theme variation radio buttons all have "Use this colorway" as a11y label

Status: VERIFIED FIXED

(Firefox :: Messaging System, defect, P1)

Description

[James Teh [:Jamie]]

STR (with a screen reader):

1. Open the browser console and enter:
   Cc["@mozilla.org/browser/browserglue;1"].getService().wrappedJSObject._showUpgradeDialog()
2. Press the Explore colorways button.
3. Choose to explore abstract colorways.
4. Tab to the "Soft" radio button.
   • Expected: The screen reader reports "Soft" as the label of the radio button.
   • Actual: The screen reader reports "Use this colorway".

The labels "Soft", "Balanced" and "Bold" are set as the textContent of the radio inputs. This is non-standard and is thus not exposed to accessibility.

The correct fix is either to move the text outside of the input or to set aria-label. Both of these would require changes to l10n strings, which probably isn't feasible at this point.

We can get the correct string at runtime. However, we can't set the aria-label attribute because Fluent clobbers it.

I'll attach a patch which creates a hidden label node and references it with aria-labelledby. It's really ugly, but I honestly don't think there's a better option at this point without messing with strings.

Comment 1

[James Teh [:Jamie]]

Attachment: Bug 1735454 - Provide a more useful a11y label on the theme variation radio buttons in the upgrade spotlight r=pdahiya!

Comment 3

[Ray Fambro]

Thanks for the context. If we can get the "hack" patch option to work I think that would be better than nothing here. Especially since this isn't a long term experience.

Comment 4

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/59a9a1433a84
Provide a more useful a11y label on the theme variation radio buttons in the upgrade spotlight r=pdahiya

Comment 5

[Ed Lee :Mardak]

[Tracking Requested - why for this release]: Screen readers don't read the variant button text in the upgrade spotlight

Comment 6

[Cristina Cozmuta (:CrissCozmuta)]

https://hg.mozilla.org/mozilla-central/rev/59a9a1433a84

Comment 7

[Ed Lee :Mardak]

Comment on attachment 9245656 [details]
Bug 1735454 - Provide a more useful a11y label on the theme variation radio buttons in the upgrade spotlight r=pdahiya!

Beta/Release Uplift Approval Request

• User impact if declined: Screen readers don't read the "Soft" "Balanced" "Bold" variant names, so it sounds like there's no difference among the options.
• Is this code covered by automated tests?: Yes
• Has the fix been verified in Nightly?: No
• Needs manual test from QE?: Yes
• If yes, steps to reproduce: 1. turn on NVDA on windows

2. open upgrade spotlight Cc["@mozilla.org/browser/browserglue;1"].getService().wrappedJSObject._showUpgradeDialog()
3. continue to colorway screen
4. mouse hover and/or keyboard focus variants

• List of other uplifts needed: none
• Risk to taking this patch: Low
• Why is the change risky/not risky? (and alternatives if risky): Small javascript change to copy over the displayed text to a11y attributes without needing to change fluent strings.
• String changes made/needed: none

Comment 8

[Dianna Smith [:diannaS]]

Comment on attachment 9245656 [details]
Bug 1735454 - Provide a more useful a11y label on the theme variation radio buttons in the upgrade spotlight r=pdahiya!

Approved for 94.0b6

Comment 9

[Ryan VanderMeulen [:RyanVM]]

https://hg.mozilla.org/releases/mozilla-beta/rev/accbd50b4248

Comment 10

[Robert Martin [:romartin], Ecosystem QA]

I have verified the following using Firefox Nightly 95.0a1 (Build ID: 20211014212856) and Firefox Beta 94.0b6 (Build ID: 20211014201116):
On Windows 10 x64:

• All the elements from the Upgrade Users Onboarding spotlight are recognized by a screen reader software with both clicking and keyboard navigation.
  On Ubuntu Linux 20.04 x64:
• All the elements from the Upgrade Users Onboarding spotlight are recognized by a screen reader software with both clicking and keyboard navigation
  On macOS 11.6:
• All the elements from the Upgrade Users Onboarding spotlight are recognized by the screen reader software with keyboard navigation.
• The elements from the Upgrade Users Onboarding spotlight are NOT recognized by the screen reader software if they are selected with mouse clicks. For this issue, I've logged the following bug 1736013.

I would like to also mention that bug 1736013 is not a regression caused by this fix, so it's safe to mark this one as VERIFIED FIXED.