1853210 - Shopping Microsurvey includes an unlabelled visually hidden button that is focusable at the end of the container

Status: RESOLVED FIXED

(Firefox :: Messaging System, defect, P1)

Description

[Anna Yeddi [:ayeddi]]

Attachment: Unlabelled_invisible_button_is_focused_after_the_Next_button.png

Preconditions:

• Set the browser.shopping.experience2023.enabled - TRUE
• Set the browser.shopping.experience2023.optedIn - 1
• Set the browser.shopping.experience2023.survey.pdpVisits - 4
• Set the browser.shopping.experience2023.survey.hasSeen - FALSE

STR:

1. Reach the following PDP link: https://www.amazon.com/dp/B07V6ZSHF4?th=1
2. Ensure the microsurvey Help improve Firefox is shown in the Shopping sidebar (if it's not, try reloading the page. ^{I'm not sure how to reliably prompt it})
3. Navigate with Tab keypresses through the Shopping Sidebar past the Help improve Firefox radio button group and observe the focus indication movement between this group and the following How we determine review quality control.
4. Enable a screen reader, i.e. NVDA on Windows
5. When a screen reader is running and the How we determine review quality is focused, press Tab + Shift to move the focus to the previous focusable element and observe the announcement for this control and (if possible) visible position of the focus indication

Expected:

• Only visible and active UI elements (controls that can be clicked/tapped) are receiving keyboard focus and when they are focused, the focus indication's position is clearly visible on the screen
• Every focusable with Tab element is announced by a screen reader so the user could hear the purpose of this element (its label/accessible name), role (button/radio button/link, etc.) and, when applicable, state.

Actual:

• The off-screen element is receiving keyboard focus, while the focus indication jsut disappears from the screen and its location remains unknown until the user presses Tab or Shift+Tab once again.
• A button that is announced by a screen reader is not labelled and its purpose is unknown.

Comment 1

[Anna Yeddi [:ayeddi]]

If a user presses Enter while this secret button is focused, the microsurvey is dismissed that would prevent a keyboard-only user or/and a screen reader user from being able to share their feedback. This is not reversible (unless the user tries to change the about:config which should not be expected, especially from users with cognitive difficulties who rely on a screen reader to understand the content.

Thus, bumping the accessibility severity to S2

Comment 2

[Shane Hughes [:aminomancer]]

Should be fixed in bug 1851264. The micro survey is still in active development, with layout changes incoming. Per the Figma spec, the dismiss button is supposed to be there, the layout just needs to be adjusted to make room for it.

Comment 3

[Jason Prickett]

Attachment: Bug 1853210 - Add onboarding shopping container close fluent handling and string r?pdahiya,#omc-reviewers

Comment 4

[Shane Hughes [:aminomancer]]

Should the Feature Callouts have ARIA labels and tooltips as well? I don't think we were given strings for that, but we could just use the same "Close" for every dismiss button.

Comment 5

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/a886af6aeae4
Add onboarding shopping container close fluent handling and string r=pdahiya,omc-reviewers,fluent-reviewers,flod,shopping-reviewers,Gijs

Comment 6

[Noemi Erli[:noemi_erli]]

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