1879518 - NVDA will not read the correct Text from the Callout 4 panel

Status: RESOLVED INVALID

(Firefox :: Messaging System, defect, P1)

Description

[Rares Doghi, Desktop QA]

Found in

• Nightly 124.0a1 (2024-02-07)

Affected versions

• Nightly 124.0a1 (2024-02-07)
• Beta 123.0b8

Affected platforms

• Windows

Preconditions:
Reach about:config and set the following prefs:
browser.shopping.experience2023.enabled, set to true (doubleclick)
browser.shopping.experience2023.optedIn, set to 1 (doubleclick, input ‘0’, hit enter)
browser.shopping.experience2023.autoOpen.enabled - true
browser.shopping.experience2023.autoOpen.userEnabled - true

Enable NVDA

Steps to reproduce

1. Reach https://www.amazon.com/Lufeiya-Computer-Drawers-Storage-Shelves/dp/B0CJ8PZB31/ref=sr_1_6?keywords=desk&qid=1707480103&sr=8-6&th=1
2. Disable the Automatically open Review Checker from the Settings Card.
3. Use the Tab key in order to reach the Got it button from the Callout 4 panel.
4. Hit UP arrow on the keyboard in order for NVDA to read the Text.

Expected result

• NVDA should read the Text from the Callout 4.

Actual result

• The First time the user hits the UP arrow from the Got it button NVDA will read: Heading level 2 Reviews instead of the text.

Regression range
Not a Regression

Comment 1

[Rares Doghi, Desktop QA]

Hi @Shane, the reason this issue happens I think its because the "reviews" word is on a different row or something similar, because when we read that "Click the price tag icon in the address bar whenever you want to see if you can trust a product's reviews" that last word "reviews" is not read at all. NVDA will stop reading after "product's".

Comment 2

[Anna Yeddi [:ayeddi]]

@Rares, do you have a screenshot of the callout in question or of the Figma mockup related to it? I've been trying to catch this callout but I don't think I have had any luck.

Comment 3

[Rares Doghi, Desktop QA]

Hi @Anna just make sure the following prefs are set :
browser.shopping.experience2023.autoOpen.enabled true
browser.shopping.experience2023.enabled true
browser.shopping.experience2023.optedIn 1

Reach a product details page on amazon.
Turn Off the Auto open Review Checker from the settings card in the sidebar.

I will attach a screenshot of it.

Comment 4

[Rares Doghi, Desktop QA]

Attachment: 1.png

Comment 5

[Eitan Isaacson [:eeejay]]

Is there a workaround? Setting to access-s2 because this UI is not perceivable to NVDA users. If there is a workaround users would know to do we can set it to s3.

Comment 6

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

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

For more information, please visit BugBot documentation.

Comment 7

[Punam Dahiya [:pdahiya]]

Fix prioritized for current release, bumping the Severity to S3 as it will be good to fix this issue for feature callout messaging surface. Thanks

Comment 8

[Shane Hughes [:aminomancer]]

Anna, Rares — Do you know of any hypothetical solutions? Maybe there's something we can change in the markup to avoid this? Our team is not too familiar with NVDA, so we rely on the a11y team's expertise for these kinds of bugs.

Comment 9

[Rares Doghi, Desktop QA]

I think the problem is that the last word "reviews" is in a different heading (NVDA will read Heading level 2), if we hit Up again it will read the rest of the text but without the "reviews" text. I think maybe these two split into 2 different headings ?

Comment 10

[Shane Hughes [:aminomancer]]

The whole subtitle is one h2 element, one text node. The string is here, it's referenced from here, and ultimately it's rendered here. Looking at this, maybe the issue is aria-flowto="". I find it a bit odd this didn't show up until now, though. This message isn't substantively different from any previous feature callout, in terms of the markup hierarchy.

Comment 11

[Shane Hughes [:aminomancer]]

This seems to be just a basic feature of NVDA, and unavoidable. There's a 100 character limit. If you go to NVDA settings, to the Browse Mode tab, the first setting on the page is the character limit. You can see it in practice anywhere. Visit any website with long paragraphs (here for example) and click around the paragraph and use the arrow keys to move the cursor. The yellow box cursor indicates the point where it starts to read from. Longer paragraphs are split into more sections (that one was split into 5 for me), and this callout's subtitle just happens to be long enough to create 2 sections, but only by 1 word. So unfortunately the 2nd section is only 1 word long.

Comment 12

[Rares Doghi, Desktop QA]

The other callouts do not have that much text, maybe thats why we didnt see it, we do see the same issue on the Highlights card for this product :

https://www.amazon.com/Portable-Mechanical-Keyboard-MageGee-Backlit/dp/B098LG3N6R/ref=sr_1_1?_encoding=UTF8&content-id=amzn1.sym.12129333-2117-4490-9c17-6d31baf0582a&dib=eyJ2IjoiMSJ9.xPISJOYMxoc_9dHbx858f_O35VE9n8_s6WvG1ovb3cIWKRweLjJZ7h3aKciYh-mZNUgh-9TYMWHeA3d1lN_OHdVaMT1WwJMrEFdXiArp5szN71kq6D4-0F1RwGZiL3sAlQKB21_4sS-zuQYFw7bO6WvECZQPQsiVJldjnsaBB0emvTFHRjGXkZAtObRg1EXP9030nW55yjIk1rFZyDBu4LUK5bvft-6u6E7e-YZNbrY.5xRFHDBFi0rtRz2lYHXX5Sc7hhMIwCPm2J0cc8YCLsY&dib_tag=se&keywords=gaming+keyboard&pd_rd_r=5f4e0822-9154-4de3-bfbb-a7f349802e6e&pd_rd_w=NUj8f&pd_rd_wg=vE4em&pf_rd_p=12129333-2117-4490-9c17-6d31baf0582a&pf_rd_r=FYNXWBX6V967K1QYP0VH&qid=1709029489&sr=8-1

If we reach the first highlight from recent reviews with the Down arrow, NVDA will split reading the first Highlight into two parts, with the second part being just the "this to you" 3 words, however the only difference is that Its not reading "Heading level 2" or "list with 3 items" again before the 3 words.

Comment 13

[Shane Hughes [:aminomancer]]

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

however the only difference is that Its not reading "Heading level 2" or "list with 3 items" again before the 3 words.

Yeah I can reproduce that too. I'm guessing that's just because the item that's overflowing is just a span, no label. The only label it reads is list, and the list is several ancestors above the overflowing span. Whereas in the callout, the item that's overflowing is an h2. So it reads the label for the overflowing item - "heading level 2".

Comment 14

[Shane Hughes [:aminomancer]]

Closing this as invalid since it seems to be an NVDA feature rather than a Firefox bug. Feel free to reopen if you think there's anything Firefox can do to prevent it.