Page MenuHomePhabricator
Create Task
Maniphest T390132

FavoriteButton is missing accessible attributes
Closed, ResolvedPublicBUG REPORT
Actions

Description

The FavoriteButton is missing some accessibility attributes on the <button> element:

  • aria-role="button"
  • aria-labelledby on the button, pointing to the child oo-ui-labelElement-label element, which needs to be updated to contain the (already invisible) label. This is not actually required, per MDN: "the accessible name for a <button>, <a>, or <td> comes from the text between the opening and closing tags." So as long as we add a label, this will be accessible.
  • aria-pressed attribute because it's a toggle button. Shouldn't be used if the label is dynamically changed.

Details

Related Changes in Gerrit:
SubjectRepoBranchLines +/-
Remove aria-role=button from a button elementmediawiki/extensions/TemplateDatamaster+0 -2
Add label, title, and aria-role to FavoriteButtonmediawiki/extensions/TemplateDatamaster+16 -0
Customize query in gerrit

Related Objects
Search...

StatusSubtypeAssignedTask
 In ProgressNoneT367428 [EPIC] Favoriting Templates
 In ProgressNoneT377186 [STORY] New widget to search and favourite templates
 ResolvedBUG REPORTSamwilsonT390132 FavoriteButton is missing accessible attributes

Event Timeline

Samwilson created this task.Mar 27 2025, 6:13 AM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptMar 27 2025, 6:13 AM
Samwilson mentioned this in T390021: Not possible to favorite from the search results without mouse.Mar 27 2025, 6:22 AM
Maintenance_bot added a project: VisualEditor.Mar 27 2025, 6:29 AM
Aklapper renamed this task from FavoriteButton is missing accessible atrributes to FavoriteButton is missing accessible attributes.Mar 27 2025, 8:35 AM
Aklapper added a project: Accessibility.
Samwilson added a parent task: T377186: [STORY] New widget to search and favourite templates.Mar 27 2025, 10:32 AM
Samwilson claimed this task.Mar 28 2025, 3:14 AM
Samwilson updated the task description. (Show Details)
Samwilson moved this task from Ready for Dev to In Development on the Community-Tech (Fox Squad) board.
gerritbot added a comment.Mar 28 2025, 3:20 AM

Change #1131873 had a related patch set uploaded (by Samwilson; author: Samwilson):

[mediawiki/extensions/TemplateData@master] Add label, title, and aria attributes to FavoriteButton

https://gerrit.wikimedia.org/r/1131873

gerritbot added a project: Patch-For-Review.Mar 28 2025, 3:20 AM
Samwilson added a comment.Mar 28 2025, 3:33 AM

Does it make sense (i.e. is it required for screen reader accessibility) to use the same text for the title and label?

<button type="button" class="oo-ui-inputWidget-input oo-ui-buttonElement-button" title="Remove template from favorites" aria-role="button" aria-pressed="true">
    <span class="oo-ui-iconElement-icon oo-ui-icon-bookmark"></span>
    <span class="oo-ui-labelElement-label oo-ui-labelElement-invisible">Remove template from favorites</span>
    <span class="oo-ui-indicatorElement-indicator oo-ui-indicatorElement-noIndicator"></span>
</button>

The inner text in .oo-ui-labelElement-label is not visible.

Samwilson updated the task description. (Show Details)Mar 28 2025, 4:28 AM
Samwilson moved this task from In Development to Feedback and Review on the Community-Tech (Fox Squad) board.
gerritbot added a comment.Mar 31 2025, 11:18 AM

Change #1131873 merged by jenkins-bot:

[mediawiki/extensions/TemplateData@master] Add label, title, and aria-role to FavoriteButton

https://gerrit.wikimedia.org/r/1131873

Samwilson closed this task as Resolved.Mar 31 2025, 11:26 AM

In reply to my comment above: it's fine to have the same text as tooltip and label.

I think this can be resolved without QA, given how busy QA engineers are at the moment. Any remaining issues will be picked up in the overall review.

Maintenance_bot removed a project: Patch-For-Review.Mar 31 2025, 11:30 AM
TheDJ subscribed.Mar 31 2025, 11:57 AM

<button type="button" class="oo-ui-inputWidget-input oo-ui-buttonElement-button" title="Remove template from favorites" aria-role="button" aria-pressed="true">

button has an implicit role of button, you don't have to set it explicitly. See the technical summary https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#technical_summary

role=button is for when you fake a button with a span or something similar.

ReleaseTaggerBot added a project: MW-1.44-notes (1.44.0-wmf.23; 2025-04-01).Mar 31 2025, 12:00 PM
Samwilson reopened this task as Open.Mar 31 2025, 12:29 PM

Ah, of course, thanks! I'll remove the attr.

Samwilson moved this task from Feedback and Review to In Development on the Community-Tech (Fox Squad) board.Mar 31 2025, 12:40 PM
gerritbot added a comment.Apr 1 2025, 5:02 AM

Change #1132805 had a related patch set uploaded (by Samwilson; author: Samwilson):

[mediawiki/extensions/TemplateData@master] Remove aria-role=button from a button element

https://gerrit.wikimedia.org/r/1132805

gerritbot added a project: Patch-For-Review.Apr 1 2025, 5:02 AM
Samwilson moved this task from In Development to Feedback and Review on the Community-Tech (Fox Squad) board.Apr 1 2025, 5:05 AM
gerritbot added a comment.Apr 3 2025, 9:33 PM

Change #1132805 merged by jenkins-bot:

[mediawiki/extensions/TemplateData@master] Remove aria-role=button from a button element

https://gerrit.wikimedia.org/r/1132805

ReleaseTaggerBot edited projects, added MW-1.44-notes (1.44.0-wmf.24; 2025-04-08); removed MW-1.44-notes (1.44.0-wmf.23; 2025-04-01).Apr 3 2025, 10:00 PM
Maintenance_bot removed a project: Patch-For-Review.Apr 3 2025, 10:30 PM
Samwilson closed this task as Resolved.Apr 4 2025, 1:49 AM

In the end, not much to be done here (the main actual addition is the tooltip, which switches based on the state of the button). As QA are engaged elsewhere at the moment, I think we can close this now.

Content licensed under Creative Commons Attribution-ShareAlike (CC BY-SA) 4.0 unless otherwise noted; code licensed under GNU General Public License (GPL) 2.0 or later and other open source licenses. By using this site, you agree to the Terms of Use, Privacy Policy, and Code of Conduct. · Wikimedia Foundation · Privacy Policy · Code of Conduct · Terms of Use · Disclaimer · CC-BY-SA · GPL · Credits