2052179 - Long accessible name with missing punctuation in moz-box-link that has both a label and description

Status: RESOLVED FIXED

(Firefox :: Settings UI, defect, P3)

Description

[Henry Wilkes (they/them) [:henry-x]]

Steps to reproduce:

1. Turn on screen reader. (Tested with Orca).
2. Open privacy settings about:preferences#privacy.
3. Move focus to the "View your personalized protections dashboard" link.

Result: the screen reader reads:

View your personalized protections dashboard See how many sneaky trackers Nightly has blocked for you, including social media trackers, fingerprinters, and cryptominers.

Link

Opens in a new tab

Where the first line is the accessible name, and the last name is the accessible description (inherited from the title attribute). There is no punctuation between the "dashboard" and "See", which means that the screen reader will read it as a single sentence. This is because the accessible name is made of the concatenation of the content, where linebreaks are squashed into a regular space.

Expect:

View your personalized protections dashboard

Link

See how many sneaky trackers Nightly has blocked for you, including social media trackers, fingerprinters, and cryptominers. Opens in a new tab

Note that the accessible description includes both the description and the title text. This works in this case because the description ends with some punctuation, so concatenation is safe.

Comment 1

[❌ Anna Yeddi [:ayeddi] ❌ On leave until 2027-01-04]

Hi Henry,
is it something like the following example that you have in mind as a solution:
data:text/html,<a href="mozilla.org" aria-labelledby="label" aria-describedby="description image" title="Opens in new tab"><p id="label">On-screen label</p><p id="description">On-screen description<img alt="Opens in a new tab" id="image" src="chrome://global/skin/icons/open-in-new.svg">

Sadly, VoiceOver, for instance, reads all on-screen text and image alt > then description > then title, so it's looong: {On-screen label On-screen description Opens in a new tab} (On-screen description Opens in a new tab} {Opens in a new tab}. Moving title and using alt="" did not change the results...

Comment 2

[Henry Wilkes (they/them) [:henry-x]]

is it something like the following example that you have in mind as a solution:

Yes, I expect the accessible name/label to just be the main text ("View your personalized protections dashboard") so a user can quickly know they are focusing a link element. And the accessible description to be a combination of the "Opens in a new tab" title and the visible description, in either order, with some punctuation between them.

Regarding VoiceOver, it is announcing both the accessible name, description and then the text content? Is that a VoiceOver bug given that the accessible name computation for <a> is specified to be either the text content or the name, but not both? Or is it a symptom of misuse of aria-label on the web?

If you want to avoid this effect on VoiceOver, could you maybe keep the description outside of the link, so to modify your example:

<div title="Opens in new tab">
  <p><a href="mozilla.org" aria-describedby="description image">On-screen label</a></p>
  <p id="description">On-screen description.</p>
  <img alt="Opens in a new tab" id="image" src="chrome://global/skin/icons/open-in-new.svg">
</div>

Or even just drop the full description from the link element, if it isn't actually that important to the link itself.

<div title="Opens in new tab">
  <p><a href="mozilla.org" aria-describedby="image">On-screen label</a></p>
  <img alt="Opens in a new tab" id="image" src="chrome://global/skin/icons/open-in-new.svg">
  <p id="description">On-screen description.</p>
</div>

This may duplicate the some of the text if you are reading the full page in browse mode, but the focus mode behaviour will be better.

Comment 3

[Mark Kennedy [:mark]]

Thanks Henry for the extra detail! 👍

Comment 4

[SaaSha]

Attachment: Bug 2052179 - Keep moz-box-link description out of accessible name. r?#reusable-components-reviewers-rotation!

Use aria-labelledby and aria-describedby so the link name is just the label, and the visible description is announced as the accessible description along with the opens-in-new-tab title.

Comment 5

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/9ba51020e2b8
https://hg.mozilla.org/integration/autoland/rev/30be9ee42c2a
Keep moz-box-link description out of accessible name. r=fluent-reviewers,bolsson,mkennedy,akulyk

Comment 6

[Norisz Fay [:noriszfay]]

https://hg.mozilla.org/mozilla-central/rev/30be9ee42c2a