Remove title attributes: class-wp-admin-bar.php

[joedolson]

Related: #24766

// class-wp-admin-bar.php
_render_item()

[joedolson]

This function does not provide a title attribute by default, only if provided in arguments. That means there's a risk of people using it in a way which provides meaningless information, but also means that it provides added info, and should possibly be left as a dev decision when adding new menu items. Also, since this is an admin-side function, we can readily add JS to expose this information on keyboard focus, so it's my opinion that this should be dealt with by adding screen reader and keyboard support for the information via JS. 2nd Opinions welcome.

[joedolson]

Since this isn't used by core, I think we should close this and mark wontfix. In looking at usage of the attribute, it appears to be very low usage in plug-ins, as well.

What may be a good idea, instead of addressing the usage of the title attribute would be deprecating or removing support for title attributes in the admin bar.

[morganestes]

After looking through core, I found that the title attribute is used by Comments and Updates for noting counts, but didn't find any other uses. Since there's not another clear way to indicate the number within the context of what it's counting (number of updates available, types of comments, etc.), I think our options are to leave it in, or find another way to include the information.

I'd prefer that we use aria-label instead of title, but understand we'd just be trading one potential abusive entry point for another. Even still, I vote for deprecating the title attribute and moving towards ARIA, especially since it's only two places in core to start with.

[afercia]

Related: #29022

[afercia]

Replying to morganestes:

I vote for deprecating the title attribute and moving towards ARIA, especially since it's only two places in core to start with.

I'd totally second this. Would recommend to consider to deprecate $args['meta']['title'] and encourage the use of ARIA. Worth remembering the HTML5 spec discourages the use of the title attribute: ​http://www.w3.org/TR/html/dom.html#the-title-attribute

About the "Updates" and "Comments" notifications, we should definitely avoid to provide the same information twice, see screenshot below:

where (part of) the link text and the title attribute say the same thing. This would be read out this way:

three one Plugin Update, one Theme Update, Translation Updates visited link one Plugin Update, one Theme Update, Translation Updates

About the visual part, we should find a new way to provide the expanded information, especially for touch-only users.

[afercia]

Replying to joedolson:

since this is an admin-side function, we can readily add JS to expose this information on keyboard focus

Seen on GitHub, pure CSS solution using content: attr(aria-label). That's not to suggest to use tooltips! :) Just to say it is possible to display content on hover, focus, and active states and at the same time providing that content in an accessible way. Any thoughts more than welcome.

[afercia]

Some design/UI feedback here would be greatly appreciated. This would be a nice opportunity for designers to chime in with new ideas :) To recap:

• we'd like to discourage the use of title attributes and remove them wherever possible
• at the same time we need to display the info about updates and comments count

[Mte90]

replaced title with aria-label

[afercia]

@Mte90 thanks for the patch, it's a start :) We should also find a way to display the Updates information. Wondering if splitting the current icon in 3 different icons could be a solution. Need some design feedback.

[joedolson]

Related: #35566 for a proposed example of tooltip.

[afercia]

This would need some UI feedback and decisions first, setting to future release for now.

[afercia]

Discussed a bit this ticket at today's accessibility weekly meeting. There's probably the need of a new idea and new approach here. Maybe, instead of trying to make the current content fit in a place where it is not available to all the different devices and assistive technologies, it would be better to simplify and say just e.g. "3 updates" without specifying their type. Users can always click on the icon and get the details. This would allow to remove the title attribute and use just the icon + number and an aria-label attribute. It would be easier to update the updates count via JavaScript too, if I remember correctly @pento worked on this a while ago and I'd greatly appreciate his thoughts on this.

Alternatively, a more advanced idea would be introducing a sort of notification area: users click the icon and a panel expands with all the relevant details in plain text and links/buttons for further actions.

Personally, I'd rather keep it simple and go with the first option, without excluding the second option for the future :)

[afercia]

Related: #33030

[boemedia]

@afercia does this ticket still need design input? Or can we merge it with #33030 for the notification alternative? Would this be something to brainstorm on at upcoming Contributor Day in Belgrade? If so, I can note this down for a group of people to work on some mockups.

[afercia]

@boemedia yes I think in a way this ticket is similar to #33030 but still different, as the icon in the top bar groups all types of updates while the icons in the left admin bar work differently (also: themes don't' show an updates icon in the admin bar). Some brainstorming during WCEU contributor day would be very welcome!

[afercia]

Related: #29022: updating the counts is buggy and there are some technical issues hard to solve. There's some consensus to simplify as much as possible, see https://core.trac.wordpress.org/ticket/29022#comment:29

The update types are displayed in a title attribute:

One option mentioned in #29022 is to just remove the total updates number, remove the title attribute, and use some text:

Re: concerns about the limited space in the toolbar, especially when plugins add their own stuff, worth reminding this link is not visible when there are no updates.

[afercia]

#50355 was marked as a duplicate.

[Mte90]

I was checking my oldest patch still opened and there is still this one.
Just as reference the file is still the same, but the line is changed ​https://github.com/WordPress/wordpress-develop/blob/master/src/wp-includes/class-wp-admin-bar.php#L541

[sabernhardt]

refresh: still using former title attribute as aria-label

[sabernhardt]

replaces counts by type with total count; adds aria-hidden to ab-icon elements

[sabernhardt]

I simply refreshed the previous patch for 26562.refresh.patch​, though I think it could be better.

Instead of giving a list of counts by type, 26562.2.patch​ only gives the total of all updates.

• The visible number matches the beginning of the screen reader text (except when the translation moves the number later).
• The code closely follows the example of the Comments in moderation link.
• I also added aria-hidden to existing ab-icon elements. If the Site name, Customize and Search icons should have the same treatment, that can go in a separate ticket.

[paaljoachim]

Hey @sabernhardt

Can you post a new screenshoot please?
It is helpful to see what the newest version looks like. It makes it much easier to give feedback.
Thanks!

[sabernhardt]

in WordPress 5.7, hovering mouse over link (on most screens) shows title attribute tooltip

[sabernhardt]

tooltip with four types of updates

[sabernhardt]

currently in 5.7, the Updates screen (also Themes and Plugins) removes the title attribute tooltip

[sabernhardt]

26562.2.patch removes tooltip from toolbar's updates link on any screen

[sabernhardt]

The only visual differences are when the mouse hovers over the link. I'm more confident about simply removing the title attribute after noticing that the updates script already removes it from the Updates, Plugins and Themes screens.

Other notes:

1. For anyone who appreciates seeing the plugin and theme counts, I opened #53031 to add those to the Updates screen.
2. Because the patch's code uses screen-reader-text like the Comments in moderation link, the updates script still would need to edit that text (see #29022).

[audrasjb]

I just tested 26562.2.patch and it looks like it works fine:

• it removes the unwanted title attribute
• it adds aria-hidden attributes to the number information (which is redondant for screen reader users)
• it moves the details of the updates inside the screen reader text container

Good job! :) Marking for commit

[joedolson]

Thanks for testing @audrasjb!

[joedolson]

In 50801:

Toolbar: Remove title attribute on pending updates link.

Remove the title attribute from the link, wrap the link icon and numeric indicator with the aria-hidden attribute, and add a .screen-reader-text span so screen readers hear a link that has relevant context without requiring translators to deal with appended strings. Removes the individual counts of theme and plugin updates from the attribute, as those were already buggy and didn't include translation counts.

Props afercia, Mte90, sabernhardt, audrasjb
Fixes #26562. See #53031.