Replace title of the updates link in the admin bar by an aria-label attribute

[Chaton666]

In the admin bar, the details of available updates are indicated in a title attribute, on the link with an icon.
To improve accessibility, it would be better to replace this title attribute by an aria-label attribute.

Also, the total number of updates available is indicated in the link, it would be preferable to follow this number with an explicative sentence, visually masked, which interpreted by a screen reader would give: "12 updates in total", instead of only "12".

[audrasjb]

Hi @Chaton666 and thanks for opening this ticket.
Moving this to milestone 5.5.

[Shital Patel]

can you give me screenshot please? so i can check.

[Chaton666]

Patch proposal for ticket #50355

[Chaton666]

Finally, it is not possible to add an aria-label attribute to the menu item as I suggested (the add_node function does not allow this).
However, it is possible and better to keep the text for screen readers already present, remove the title attribute from the link, and add the explicative sentence to the total.

Here is a .diff file attached, of a patch proposal. There is no visible difference in the dashboard, the change is in the HTML output.
Before :

<li id="wp-admin-bar-updates">
	<a class="ab-item" href="http://example.com/wp-admin/update-core.php" title="1 Plugin Update, Translation Updates">
		<span class="ab-icon"></span>
		<span class="ab-label">2</span>
		<span class="screen-reader-text">1 Plugin Update, Translation Updates</span>
	</a>
</li>

After:

<li id="wp-admin-bar-updates">
	<a class="ab-item" href="http://example.com/wp-admin/update-core.php">
		<span class="ab-icon"></span>
		<span class="ab-label">2 <span class="screen-reader-text"> updates: 1 Plugin Update, Translation Updates </span></span>
	</a>
</li>

[audrasjb]

Thanks for your patch @Chaton666. Looks good at a glance.
I'd only remove (do not translate) from translators comment as placeholder are not translatable :)

[sabernhardt]

Related: #26562 and #29022

[SergeyBiryukov]

I believe some users might want to keep the visual indication of update details currently provided by the title attribute, as seen in 50355.png​. Could add we add the aria-label or the screen reader text without removing title?

Is the current screen reader text added in [21425] / #21333 not sufficient?

[afercia]

@Chaton666 thanks for your report!

As @sabernhardt already mentioned, this issue is already tracked in #26562 and #29022. I'd lean towards closing this ticket as duplicate of #26562.

Worth also noting it isn't that easy, and that's the reason why this is a long-standing issue. The updates count is updated via JavaScript. When updates happen on the update.php page, there would be the need to make JavaScript communicate from the page within the iframe to the main page, which is technically still to solve. See https://core.trac.wordpress.org/ticket/29022#comment:7 and following conversation.

I'm going to remove the milestone, pending decision during today's accessibility bug-scrub which will be held at 14:00 UTC in the Slack #accessibility channel.

[afercia]

This ticket was discussed during today's accessibility bug-scrub: the team agreed to close this ticket as duplicate of #26562. Please do feel free to join the conversation there and read the (bit nasty) technical details behind this issue.