1851735 - The chevron button in shopping-details summary is not labeled

Status: VERIFIED FIXED

(Firefox :: Shopping, defect, P1)

Description

[Anna Yeddi [:ayeddi]]

Preconditions:

• Set the browser.shopping.experience2023.enabled - TRUE
• Set the browser.shopping.experience2023.optedIn - 1
• Enable a screen reader, i.e. NVDA on Windows

STR:

1. Reach the following links https://www.amazon.com/dp/B07V6ZSHF4?th=1
2. Hover the mouse cursor over either How we determine review quality chevron button or Settings chevron button
3. Navigate to the How we determine review quality collapsed button (i.e. by using Tab), then press DownArrow to hear the announcement for the chevron button. Repeat for Settings chevron button

Expected:

• The label (adjacent text) should be read out loud by NVDA alongside the role of the button
• Either the chevron button is not announced by a screen reader (because the label, role, and state are already announced by the focusable <summary> element) or the button provides a meaningful label

Actual:

• The button is not announced by a screen reader.
• When navigated to in browsing mode, an extra control is announced as button, collapsed, button

Comment 1

[Jonathan Epstein]

:ayeddi - any chance you're available to address this?

Comment 2

[Anna Yeddi [:ayeddi]]

(In reply to Jonathan Epstein from comment #1)

:ayeddi - any chance you're available to address this?

I actually have the patch in progress, finishing adding tests for the button. Should be in Phab for reviews soon.

Comment 3

[Anna Yeddi [:ayeddi]]

Attachment: Bug 1851735 - Adding accessible name to the chevron button on Shopping cards. r=jhirsch

While the button is included in the <summary> element, it is still can be accessed in screen reader's browse mode or with the mouse tracking (by hovering over the button with NVDA, for example). We need to make sure the button is clearly labelled and does communicate its expanded/collapsed state programmatically, since we're exposing this control on-screen.

Comment 4

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/4d8c9e2984f4
Adding accessible name to the chevron button on Shopping cards. r=shopping-reviewers,jhirsch

Comment 5

[Atila Butkovits]

https://hg.mozilla.org/mozilla-central/rev/4d8c9e2984f4

Comment 6

[Rares Doghi, Desktop QA]

Hi @Anna, I tried to verify this fix in build 20230919201806 and 20230920005018 but NVDA still wont read the Chevrons from How we determine review quality or Settings on Hover.
Reaching the Labels with the Tab key and then hitting the Down arrow they are being read as collapsed or expanded buttons.

Comment 7

[Anna Yeddi [:ayeddi]]

(In reply to Rares Doghi, Desktop QA from comment #6)

Hi @Anna, I tried to verify this fix in build 20230919201806 and 20230920005018 but NVDA still wont read the Chevrons from How we determine review quality or Settings on Hover.
Reaching the Labels with the Tab key and then hitting the Down arrow they are being read as collapsed or expanded buttons.

Rares, thank you for testing it.

Unfortunately, this appears to be NVDA behavior for buttons that do not have inner text (and rely on a CSS-provided images for a label) - this behavior is the same in other browsers too, i.e. while using the following test case and hovering either buttons:
data:text/html,<div id="1">How we determine review quality?%20%20%20%20%20 <button style="height:3rem;width:3rem;" aria-labelledby="1"></button>%20 </div><p>something else</p><button style="height:3rem;width:3rem;" aria-label="1000"></button>. These buttons are adjacent to the section headings and users who rely on hover usually have some vision, thus this would not block their flow as the adjacent text is provided (and buttons are now labeled should these users want to navigate to them using screen reader provided list of buttons, for instance).

Important part is that these buttons now have accessible names (are not unlabeled) and would not be confusing a user what would they do if activated. I would vote to mark the bug as Verified, because we do provide all we should to the screen reader.

Comment 8

[Rares Doghi, Desktop QA]

Got it, I will mark it verified because they are being read if we reach them with keyboard navigation, this seems to be an NVDA issue. Thanks Anna