1979693 - Screen readers do not clearly announce icon selection state in Avatar picker

Status: NEW

(Toolkit :: Startup and Profile System, defect)

Description

[Simona Badau, Desktop Test Engineering]

Found in

• Nightly 143.0a1

Affected versions

• Nightly 143.0a1

Tested platforms

• Affected platforms: macOS 15, Windows 11, Ubuntu 25.04

Preconditions

• Enable the screen reader specific to the operating system (VoiceOver on macOS, NVDA on Windows, Orca on Ubuntu).

Steps to reproduce

1. Navigate to about:editprofile.
2. Open the Avatar picker by clicking the Edit button below the avatar.
3. In the Icon tab - use the Screen Reader to navigate through the icons.

Expected result

• The screen reader should announce a descriptive label for each icon (e.g. “Briefcase”) and clearly state whether the icon is selected or not selected.

Actual result
*On macOS, VoiceOver does not announce the selection state. It only says: “You are currently on a selectable (null), inside a list box.”

• On Windows and Ubuntu, screen readers announce “not selected” when the icon is not selected (e.g. “Briefcase, not selected”). However, when an icon is selected, it only announces the name (e.g. “Briefcase”) without clarifying the selection state.

Regression range

• This is not a regression, it's introduced with the new avatar picker.

Comment 1

[James Teh [:Jamie]]

(In reply to Simona Badau, Desktop QA from comment #0)

*On macOS, VoiceOver does not announce the selection state. It only says: “You are currently on a selectable (null), inside a list box.”

Simona, to clarify, does it announce the label?
Morgan, could this be because of the intervening fieldset between the list and its items?

• On Windows and Ubuntu, screen readers announce “not selected” when the icon is not selected (e.g. “Briefcase, not selected”). However, when an icon is selected, it only announces the name (e.g. “Briefcase”) without clarifying the selection state.

This is expected for NVDA on Windows. In a single select list, 'selected" is considered to be the more common state, so it isn't announced by default. If you press NVDA+tab, it will be reported as additional information.

Comment 2

[Morgan Reschenberg [:morgan]]

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

(In reply to Simona Badau, Desktop QA from comment #0)

*On macOS, VoiceOver does not announce the selection state. It only says: “You are currently on a selectable (null), inside a list box.”

Simona, to clarify, does it announce the label?
Morgan, could this be because of the intervening fieldset between the list and its items?

Hmmm, could be, though I would've thought this would be fixed by bug 1970742.

The tree looks like this on mac:

> list
> group
> > group
> > > option (selected)
> > > > group
> > > > > button (where focus lands)

I think the problem is that focus moves to the most-nested control by default, so we skip past the option which actually has the selected state and go straight to the button (which always has "selected=false" regardless of the option's selection).

Interestingly, I can get VoiceOver to correctly expose selected state if I use tab and (non-VO) arrow key navigation here. This causes VO's focus to match keyboard focus and move on the options rather than the buttons (...?).
STR:
0. Open VoiceOver, ensure in the VoiceOver utility the default option "VoiceOver focus <follows keyboard focus>" is set.

1. Open about:editprofile
2. Use the tab key to move keyboard and voiceover focus to the "edit" button
3. activate the edit button with spacebar
4. Hit tab three times to move to: icon, custom, and finally "barbell" which should cause VoiceOver to say "1 of 28"
5. Using the arrow keys without the voice over modifier, move focus to the selected icon (for me this was "sparkle, selected, 26 of 28")

Comment 3

[Morgan Reschenberg [:morgan]]

Hmm, maybe it is an issue with the intervening groups. I tested the difference between these two configs:

URI with identical tree structure to the breakdown above, which produces the same VO behaviour as about:editprofile

data:text/html,<div role="listbox"><div role="grouping"><div role="grouping><div role="option" aria-selected="true"><div role="grouping"><button>hi</button></div></div><div role="option"><div role="grouping"><button>hello</button></div>

URI with tree structure like this:

> listbox
> > option (selected)
> > > group
> > > > button

data:text/html,<div role="listbox"><div role="option" aria-selected="true"><div role="grouping"><button>hi</button></div></div><div role="option"><div role="grouping"><button>hello</button></div>

In the latter, I can navigate through the listbox with VO+arrow keys and hear the selected state.

I think this is because AXSelectedChildren is only set in the latter example, not the former.

Comment 4

[Simona Badau, Desktop Test Engineering]

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

(In reply to Simona Badau, Desktop QA from comment #0)

*On macOS, VoiceOver does not announce the selection state. It only says: “You are currently on a selectable (null), inside a list box.”

Simona, to clarify, does it announce the label?

When following the VoiceOver instructions and using the corresponding commands, I hear: "Flower, text. You are currently on a selectable text, inside a list box."

When using the arrow keys to navigate through the icons I hear: "Flower, text, 9 of 28. You are currently on a selectable text, inside a list box."

Comment 5

[BugBot [:suhaib / :marco]]

The severity field is not set for this bug.
:mossop, could you have a look please?

For more information, please visit BugBot documentation.