WordPress.org

Make WordPress Core

Opened 3 years ago

Closed 3 years ago

Last modified 5 months ago

#28853 closed defect (bug) (fixed)

Remove title attribute for plugin action links; add screen-reader-text

Reported by: joedolson Owned by: wonderboymusic
Milestone: 4.0 Priority: normal
Severity: normal Version: 4.0
Component: Plugins Keywords: has-patch, commit, title-attribute
Focuses: accessibility, administration Cc:

Description

Information in title attributes may not be available to screen readers; patch moves plug-in name from title attribute into screen reader text directly in link.

Leaves title attribute on Installed notice; not clear how important the notification that the plug-in is up to date is. To me, it seems unimportant, so I'm OK with leaving it uncertain whether a screen reader will be able to get that information. Removing it from the title attribute would make it unavailable to sighted users, if it's hidden as screen reader text.

Attachments (5)

28853.patch (1.8 KB) - added by joedolson 3 years ago.
Removes title attributes from plugin action links.
28853.2.patch (3.4 KB) - added by joedolson 3 years ago.
Instead of screen reader hidden, aria-labelled by
28853.3.patch (1.8 KB) - added by nvwd 3 years ago.
using aria-label instead of aria-labelledby
28853.4.patch (2.0 KB) - added by DrewAPicture 3 years ago.
+ translator comments
28853.5.patch (828 bytes) - added by DrewAPicture 3 years ago.
id for labelled-by

Download all attachments as: .zip

Change History (19)

@joedolson
3 years ago

Removes title attributes from plugin action links.

#1 @ocean90
3 years ago

There should be no HTML in strings for translation.

Related: #26167, can we use aria-label here too?

#2 @joedolson
3 years ago

We could use aria-label; but actually aria-labelledby would probably be better. That would just require adding an ID to the title, and we could avoid the duplication of text. Patch coming.

@joedolson
3 years ago

Instead of screen reader hidden, aria-labelled by

#3 @joedolson
3 years ago

This patch also updates plugin-install.js to add a data-title attribute and pull Thickbox title from the data-title rather than from the now-absent title attribute. Also corrects plugin-install.js so that it references a valid selector (.plugin-card rather than .plugin), so that the title info will actually be inserted.

#4 @SergeyBiryukov
3 years ago

  • Focuses administration added
  • Keywords has-patch added
  • Milestone changed from Awaiting Review to 4.0

#5 @wonderboymusic
3 years ago

  • Owner set to wonderboymusic
  • Resolution set to fixed
  • Status changed from new to closed

In 29201:

In Plugin Install List Table, remove title attribute for plugin action links; add screen-reader-text.

Props joedolson.
Fixes #28853.

#6 @ocean90
3 years ago

  • Keywords needs-patch added; has-patch removed
  • Resolution fixed deleted
  • Status changed from closed to reopened

In [29201] the id="<?php echo $plugin['slug']; ?>" part from 28853.2.patch is missing, see #29018.

#7 @ocean90
3 years ago

#29018 was marked as a duplicate.

@nvwd
3 years ago

using aria-label instead of aria-labelledby

#8 @nvwd
3 years ago

  • Keywords has-patch added; needs-patch removed

My understanding about aria-labelledby is that it expects a value of an element IDs that are the labels for the object. Reference: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute

aria-label seems to be appropriate here.

@DrewAPicture
3 years ago

+ translator comments

@DrewAPicture
3 years ago

id for labelled-by

#9 @DrewAPicture
3 years ago

Looks like there's two options on the table:

  1. 28853.4.patch adds translator comments to the changes from 28853.3.patch, which switches to using aria-label
  1. 28853.5.patch, which adds the id attribute missed in [29201]

#10 @nvwd
3 years ago

I would use the aria-lable instead of aria-labelledby since a meaningful value can't easily be created. The ID provided for aria-labelledby would be able to get the title of the plugin without the word Install or Update for assistive technologies.

#11 @joedolson
3 years ago

aria-label allows you to more easily customize the translations, definitely, because it doesn't require using a pair of IDs sequentially to string texts together.

aria-labelledby would require an ID pointing at the action text (e.g. "Update") and a separate ID pointing to the title of the plug-in, but wouldn't allow easy flexibility in word order for different languages.

I'd recommend going the aria-label route.

#12 @DrewAPicture
3 years ago

  • Keywords commit added

28853.4.patch seems to be ready to go then.

#13 @wonderboymusic
3 years ago

  • Resolution set to fixed
  • Status changed from reopened to closed

In 29424:

After [29201], use aria-label instead of aria-labelledby in WP_Plugin_Install_List_Table::display_rows().

Props nvwd, DrewAPicture.
Fixes #28853.

#14 @afercia
5 months ago

  • Keywords title-attribute added
Note: See TracTickets for help on using tickets.