2008119 - Button accessible name does not convey its function: missing topic context (Settings dialog > Topics dialog > buttons Following/Unfollow/Blocked/Unblock)

Status: RESOLVED FIXED

(Firefox :: New Tab Page, defect)

Description

[John Northup]

Steps to Reproduce

Open DevTools. Activate the Customize button. Within the Settings dialog, activate the Manage topics button. The Topics dialog opens. Using the Accessibility Inspector, inspect the buttons adjacent to the topic names.

Expected Behavior

name conveys button function completely.

Actual Behavior

name conveys button text, but not the related topic.

User Impact

Multiple Following and Blocked buttons have identical accessible names and are not programmatically associated with the topics they act upon. As a result, AT users cannot easily determine which topic each button refers to.

WCAG 2.2 References

• WCAG 2.1.1 - Keyboard
• WCAG 1.4.13 - Content on Hover or Focus

Recommendations

The segments of text to the left of the buttons are <label> elements whose for attributes match the id attributes of the corresponding <moz-button> elements that contain the buttons—however, the labels are not announced, likely because <moz-button> has no semantic role and is not labelable. Remove the <label> structure and instead use aria-label to give each <button> a distinct, descriptive accessible name (e.g., aria-label="unfollow movies").

Testing Environment

Any

Assistive Technology Used

Any

Code Pointers

<moz-button type="default" index="1" section="arts" id="follow-topic-arts" data-l10n-attrs="label,tooltiptext" size="default" iconposition="start" menuid="">
  <link rel="stylesheet" href="chrome://global/content/elements/moz-button.css">
  <button id="main-button">
    <span part="button" class=" button-background " type="default" size="default">
      <label is="moz-label" part="moz-button-label">
        <slot></slot>
      </label>
    </span>
  </button>
  <link rel="stylesheet" href="chrome://global/content/elements/moz-label.css">
  <span class="section-button-follow-text" data-l10n-id="newtab-section-follow-button">Follow</span>
  <span class="section-button-following-text" data-l10n-id="newtab-section-following-button">Following</span>
  <span class="section-button-unfollow-text" data-l10n-id="newtab-section-unfollow-button">Unfollow</span>
</moz-button>

Further Reference

• WebAIM: Keyboard Accessibility

Comment 1

[John Northup]

Attachment: Following, Unfollow, Blocked, Unblock button states

Comment 2

[Oana Botisan, Desktop QA]

Managed to reproduce this issue on macOs 13 using Nightly 149.0a1. I will set this request as "NEW" to allow the engineering team to consider whether they will implement the fix or not, even thought to me it seems to have the same root cause as bug 2008117.

Comment 3

[Anna Yeddi [:ayeddi]]

The context of controls is missing.
Alternative resolution may be using aria-labelledby on the (shadow DOM) <button> element that would refer to both the id of its <label> and the text element that includes the topic's name.

Thus, it's expected to get aria-labelledby="buttonID headingID" or, since it involves shadow DOM and these id references may not be calculated, an aria-label="button-label-string heading-text-string" could be used as a backup.

Comment 4

[Anna Yeddi [:ayeddi]]

Assigning the Severity value to align with the Accessibility severity, per discussions with :thecount and :marco

Comment 5

[liz]

can this be reassigned to me?

Comment 6

[Kelly Cochrane [:kcochrane]]

Sure

Comment 7

[liz]

Attachment: Bug 2008119 - Add descriptive accessible name to new tab page follow/unfollow and block/unblock topic buttons r=kcochrane

Comment 8

[liz]

https://phabricator.services.mozilla.com/D292753

Comment 9

[liz]

Attachment: Bug 2008119 - Add descriptive accessible name to new tab page follow/unfollow and block/unblock topic buttons r=kcochrane

Comment 10

[liz]

Attachment: Bug 2008119 - Add descriptive accessible name to new tab page follow/unfollow and block/unblock topic buttons r=kcochrane differential revision: https://phabricator.services.mozilla.com/D292753

Comment 11

[liz]

Hi, why did you give up on me working on this bug?
Canyou assign another to me ? the one where I would not be assigned as a reviewer?

Comment 12

[Kelly Cochrane [:kcochrane]]

You are still assigned to this bug.. I requested feedback: https://phabricator.services.mozilla.com/D292753, so you'll need to make further changes.

Comment 13

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/a239d783e522
https://hg.mozilla.org/integration/autoland/rev/a9322127e631
Add descriptive accessible name to new tab page follow/unfollow and block/unblock topic buttons r=home-newtab-reviewers,fluent-reviewers,bolsson,reemhamz

Comment 14

[Silaghi Andreea]

https://hg.mozilla.org/mozilla-central/rev/a9322127e631