aria-label on <label> elements sometimes not read out on Firefox

[avinashbot]

When attaching an aria-label to a element, it isn't read out when I navigate to the input attached to it (using the arrow keys). However, when I tab to the input, the aria-label is read out. This only happens on Firefox. In Chrome, it's always read out. Looking at the accessibility tree in Firefox devtools, the checkbutton has the correct name, so the problem seems to be specific to NVDA on Firefox.

Steps to reproduce:

1. Open demo (https://kqrx5.csb.app/) in Firefox
2. Browse to the checkbox. The label "This is a checkbox label" is not spoken.
3. Move focus to the checkbox. The label is read out.

Actual behavior:

• NVDA reads "clickable checkbox not checked" when navigated to.
• NVDA reads "clickable This is a checkbox label check box not checked" when tabbed to.

Expected behavior:

It should read "clickable This is a checkbox label check box not checked" for both instances.

System configuration

NVDA installed/portable/running from source:

Installed

NVDA version:

2020.4

Windows version:

Windows 10

Name and version of other software in use when reproducing the issue:

• Firefox: 86.0.1 (latest)
• Chrome: 89.0.4389.90 (latest)

Other information about your system:

Other questions

Does the issue still occur after restarting your computer?

Yes

Have you tried any other versions of NVDA? If so, please report their behaviors.

No

If add-ons are disabled, is your problem still occurring?

Yes

Did you try to run the COM registry fixing tool in NVDA menu / tools?

Yes

[ehollig]

@jcsteh your inputs would be valuable here

[jcsteh]

I see the same result in both Chrome and Edge, so I guess something has changed in the last year. Chrome used to remove label elements from the tree in some cases, so that might be what has changed. Now, Chrome exposes the label element the same way Firefox does.

This happens because where there is a visible label, NVDA prefers to expose the visible label in browse mode, rather than just the accessible name exposed for the control. This allows semantics and formatting inside the label to be preserved, whereas the accessible name is just plain text. In this case, there's a visible label, so NVDA avoids rendering the control's accessible name, but the visible label contains no visible text, so nothing gets rendered.

This is a pretty odd pattern. I don't understand the use case for having a wrapping label with an aria-label. If aria-label is what you want to use, you could apply it directly to the checkbox.

[Adriani90]

@jcsteh is this a duplicate of #12024? Then I suggest closing one of them. I think the root cause might be the same. In that issue the aria-label is also spoken only in focus mode.

[jcsteh]

No, this isn't a duplicate of #12024. My analysis in #12177 (comment) still applies.