WordPress.org

Make WordPress Core

Opened 5 months ago

Closed 5 months ago

#50355 closed enhancement (duplicate)

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

Reported by: Chaton666 Owned by: audrasjb
Milestone: Priority: normal
Severity: normal Version:
Component: Toolbar Keywords:
Focuses: accessibility Cc:

Description

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".

Attachments (2)

50355.diff (1.2 KB) - added by Chaton666 5 months ago.
Patch proposal for ticket #50355
50355.png (6.5 KB) - added by SergeyBiryukov 5 months ago.

Download all attachments as: .zip

Change History (13)

#1 @swissspidy
5 months ago

  • Component changed from I18N to Toolbar

#2 @audrasjb
5 months ago

  • Keywords needs-patch added
  • Milestone changed from Awaiting Review to 5.5
  • Owner set to audrasjb
  • Status changed from new to reviewing

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

#3 @Shital Patel
5 months ago

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

@Chaton666
5 months ago

Patch proposal for ticket #50355

#4 @Chaton666
5 months ago

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>

#5 @audrasjb
5 months ago

  • Keywords has-patch added; needs-patch removed

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 :)

@SergeyBiryukov
5 months ago

#7 @SergeyBiryukov
5 months ago

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?

#8 @afercia
5 months ago

  • Keywords has-patch removed
  • Milestone 5.5 deleted

@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.

#9 @ocean90
5 months ago

  • Milestone set to Awaiting Review

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


5 months ago

#11 @afercia
5 months ago

  • Milestone Awaiting Review deleted
  • Resolution set to duplicate
  • Status changed from reviewing to closed

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.

Note: See TracTickets for help on using tickets.