1784433 - [Colorway Closet] Colorway intensity is not read with screen reader while mouse navigation

Status: ASSIGNED

(Core :: Disability Access APIs, defect, P3)

Description

[Hani Yacoub, Desktop QA]

Found in

• Firefox 105.0a1

Affected versions

• Firefox 105.0a1

Affected platforms

• Windows 10 x64
• Windows 11 x64
• Ubuntu 20.04 x64

Preconditions
In about:config set:
"browser.theme.colorway-closet" to true
"browser.tabs.firefox-view" to true

Steps to reproduce

1. Turn on screen reader
2. Open "Colorways closet" from Fxview or from about:addons
3. Using the mouse click on any of the Intensity options

Expected result
Colorway intensity should be read.

Actual result
Chrome//browser/content/colorway/colorwaycloset.html dialog is read instead of the colorway intensity.

Regression range
Not a regression.

Note
The issue is not reproducible using keyboard navigation.

Comment 1

[Anna Yeddi [:ayeddi]]

Attachment: Colorways NVDA click selection.png

the NDVA does announce radio buttons almost as expected when clicked on the radio itself (it first announces it as [intensity], radio button, not checked, [#] of 3 and then adds checked), but if you click on the label text, then the whole dialog is being announced (not only the URL but the landmark, grouping and only then the radio checked)

The on label click behavior does look to me as an issue with the dialog being re-rendered and communicated to the assistive technology. This is Firefox default behavior - the same is observed with a radio group on the WAI Tutorials page, thus Colorways page is coded without any issues

Attached are screenshots of the NVDA speech viewer output with those 2 types of behavior highlighted - for Colorways, WAI Tutorial examples and the example of expected behavior from the about:settings > Web appearance radio group.

It appears to be likely an a11y core issue or maybe a widget one.

Moving this bug to Core: Disability Access API component as per discussion with :dao and :morgan

Comment 2

[Anna Yeddi [:ayeddi]]

Attachment: Radio NVDA click selection (not as expected).png

Comment 3

[Anna Yeddi [:ayeddi]]

Attachment: Radio on about-settings with NVDA (expected behavior).png

Comment 4

[James Teh [:Jamie]]

I can't reproduce this most of the time, though I did se it once or twice. I think it's less a tree issue and more an issue of focus bouncing away and back again, so NVDA thinks it needs to re-read the focus context.

Anna, would you mind attaching an NVDA Speech Viewer snippet (in text) showing what NVDA is speaking when this happens? Probably better to do this with the WAI tutorials page to make it easier to repro.

Comment 5

[Anna Yeddi [:ayeddi]]

(In reply to James Teh [:Jamie] from comment #4)

I can't reproduce this most of the time, though I did se it once or twice. I think it's less a tree issue and more an issue of focus bouncing away and back again, so NVDA thinks it needs to re-read the focus context.

Anna, would you mind attaching an NVDA Speech Viewer snippet (in text) showing what NVDA is speaking when this happens? Probably better to do this with the WAI tutorials page to make it easier to repro.

Sure, this is what NVDA announces during different interactions with radio buttons on the WAI Tutorials page - used "HTML file" option as an example:

1. Hovering over a radio button itself: [Label], i.e. HTML file (no state)
2. Hovering over a label text associated with the radio button: [Label], i.e. HTML file (no state)
3. Clicking a radio button itself: with the "HTML file"

Grouping Controls | Web Accessibility Initiative (WAI) | W3C — Mozilla Firefox
Grouping Controls | Web Accessibility Initiative (WAI) | W3C  document
main landmark
complementary landmark
Output format  grouping
checked
Grouping Controls | Web Accessibility Initiative (WAI) | W3C  document
main landmark
complementary landmark
Output format  grouping
HTML file  radio button  checked  3 of 3

4. Clicking a label text associated with the radio button: with the "HTML file"

Grouping Controls | Web Accessibility Initiative (WAI) | W3C  document
main landmark
complementary landmark
Output format  grouping
HTML file  radio button  checked  3 of 3

Comment 6

[James Teh [:Jamie]]

It definitely seems like focus might be bouncing around spuriously here, perhaps to a dead Accessible. The next step would be to look at the a11y focus events that get fired here and see if we can spot the problematic event.

Comment 7

[Amy Churchwell [:amy]]

Hi there, I am struggling to reproduce this issue.
I am running Windows 11 via Parallels and have tested the intensity picker with the Windows default Narrator and also the NDVA software. Both appear to read out the intensity options/selection as expected. Is this still an active issue?

Comment 8

[Hani Yacoub, Desktop QA]

I can't managed to reproduce the issue anymore on the latest Firefox Nightly.

But I observed that when I click on the "Intensity" box not on the circle on the radio button a long dialog is read "Choose your colorway dialog. Main landmark. Intensity grooving. "Bold" radio button checked 3 of 3" comparing with clicking in the circle on the radio button where a shorter dialog is read ""Bold" radio button checked 3 of 3".
Is this expected?

Comment 9

[Dão Gottwald [:dao]]

(In reply to Hani Yacoub from comment #8)

I can't managed to reproduce the issue anymore on the latest Firefox Nightly.

But I observed that when I click on the "Intensity" box not on the circle on the radio button a long dialog is read "Choose your colorway dialog. Main landmark. Intensity grooving. "Bold" radio button checked 3 of 3" comparing with clicking in the circle on the radio button where a shorter dialog is read ""Bold" radio button checked 3 of 3".
Is this expected?

Redirecting needinfo to Anna.

Comment 10

[Anna Yeddi [:ayeddi]]

(In reply to Hani Yacoub from comment #8)

I can't managed to reproduce the issue anymore on the latest Firefox Nightly.

But I observed that when I click on the "Intensity" box not on the circle on the radio button a long dialog is read "Choose your colorway dialog. Main landmark. Intensity grooving. "Bold" radio button checked 3 of 3" comparing with clicking in the circle on the radio button where a shorter dialog is read ""Bold" radio button checked 3 of 3".
Is this expected?

On today's Nightly, I've got the same results as Hani did. Thus, I think the bug can be worksforme-ed.

The announcement of the entire document when an activation happens by clicking on the label instead of the radio button itself looks like Firefox behavior, not a Colorways closet only one. I.e. if testing with the data:text/html,<label><input type=radio name=test>Soft</label><label><input type=radio name=test>Bold</label>, the results will be the same - while clicking the label text to select the option, NVDA would announce: document, [Soft], radio button, checked, [1] of 2 where on more complex page like Fx View with a Colorways dialog and with a radio group label this all is being announced by NVDA. For example, if we add a fieldset with a legend to the radio group above (data:text/html,<fieldset> <legend>Legend text here!</legend><label><input type=radio name=test>Soft</label><label><input type=radio name=test>Bold</label>) it will be announced as: document, Legend text here!, grouping, [Bold], radio button, checked, [2] of 2 when clicked on the label text.

I filed a separate bug 1799170 to further investigate this behavior.