2000851 - The Sports results are not correctly read by the screen reader app if contains multiple results

Status: VERIFIED FIXED

(Firefox :: Address Bar, defect, P1)

Description

[Cosmin Muntean [:cmuntean], Ecosystem QA]

[Notes]:

• We have different behaviors on OSes:
  • Windows (NVDA and Windows Narrator): The screen reader app only reads: "text frame".
  • MacOS (VoiceOver): The screen reader app reads the team names and the score, but doesn't read the league, time, and status.
  • Ubuntu 22.04 (Orca): The screen reader app only reads: "section".

[Affected versions]:

• Firefox Beta 146.0b4 (Build ID: 20251117130030)
• Firefox Nightly 147.0ai (Build ID: 20251117130030)

[Affected Platforms]:

• Windows 10 x64
• macOS 14.4.1
• Ubuntu 20.04

[Prerequisites]:

• Have Firefox Beta 146 build extracted/installed.
• For Windows, have the NVDA screen reader installed.
• Have the following prefs set:
  • browser.search.region = US
  • browser.urlbar.merino.providers = sports
  • browser.urlbar.merino.timeoutMs = 2000
  • browser.urlbar.quicksuggest.online.available = true
  • browser.urlbar.sports.featureGate = true

[Steps to reproduce for Windows]:

1. Open the browser with the profile from the prerequisites.
2. In the addressbar type a keyword that would trigger sports suggestions (eg: vikings score).
3. Focus the addressbar.
4. Listen to what the screen reader app reads.

[Expected result]:

• The screen reader app reads the Sports suggestion correctly.

[Actual result]:

• The screen reader app only reads: "text frame".

Comment 1

[Cosmin Muntean [:cmuntean], Ecosystem QA]

Please note that this is reproducible when we have two results displayed in the sports suggestion. The issue is not reproducible if the Sports suggestions have only one result.

Comment 2

[Drew Willcoxon :adw]

Attachment: Bug 2000851 - Fix a11y for realtime Suggest suggestions.

This does two things:

1. Properly transform OPTION to COMBOBOX_OPTION

Modify Accessible::ARIATransformRole so that COMBOBOX_LIST is recognized as
a valid ancestor of OPTION. I'm not sure if that's right, but I'll describe
the problem I'm trying to solve.

The urlbar results list consists of rows, where each row usually corresponds to
a single suggestion and a single clickable item. Recently we've added a new type
of row called "realtime" rows that can contain multiple child items. These child
items are basically individual "mini" suggestions and could be rows themselves,
but in the UI, they are all grouped side-by-side inside a single row. All items
in the row are related in some way: for example, they'll all be stock market
suggestions, or sports suggestions, or flight status suggestions.

For example, searching for "etfs" shows a realtime row that contains stock
market items, where each item corresponds to a different stock market index.
Clicking an item will do a search for that particular market index.

These individual items aren't buttons, which is why I didn't use role="button"
for them. As mentioned, they're more like mini suggestions.

The problem is that Firefox's a11y code doesn't recognize these items as being
options even when role="option" is set on them. The DOM for normal rows looks
like this:

.urlbarView-row[role="presentation"] > .urlbarView-row-inner[role="option"]

And that works fine. For these realtime rows, the DOM looks like this:

.urlbarView-row[role="presentation"] > .urlbarView-row-inner[role="group"] > .urlbarView-realtime-item[role="option"]

But instead of being recognized as options, the items are recognized as
"generic". And as far as I can tell, it's because of that extra layer of
hierarchy. When the extra layer is not present, the Parent()->IsCombobox()
if-block is entered, and the OPTION is transformed to COMBOBOX_OPTION. The
code doesn't extend that check to all ancestors -- just the parent. That seems
like an oversight.

2. Set role=["group"] and aria-label on the realtime row

As mentioned above, set role=["group"] on the .urlbarView-row-inner. Also
set aria-label on it so that screen readers inform the user about the type of
suggestion that it represents.

The realtime row is excluded from the total row count. That's unfortunate but I
don't see a way around it without radically changing the urlbar's a11y tree, for
example by using the grid role instead of listbox or something.

Partly for that reason, I chose verbose aria-label values, like this:

Market suggestions group: Press Tab to move to next item in group. Press Down to continue to next row.

I tested all of this with NVDA and VoiceOver and things work as expected,
although VoiceOver doesn't seem to read the group's aria-label. I'd appreciate
any feedback.

Comment 3

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/6dca39456e07
https://hg.mozilla.org/integration/autoland/rev/4b1b0a7a5f60
Fix a11y for realtime Suggest suggestions. r=daisuke,fluent-reviewers,urlbar-reviewers,accessibility-frontend-reviewers,bolsson,flod,Jamie

Comment 4

[Norisz Fay [:noriszfay]]

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

Comment 5

[Cosmin Muntean [:cmuntean], Ecosystem QA]

I have verified this issue on the latest Firefox Beta 147.0b1 (Build ID: 20251208163038) and the latest Nightly 148.0a1 (Build ID: 20251208220232) on Windows 10, macOS 14.4.1 and Ubuntu 24.0.

• The screen reader app reads the Sports suggestion correctly.