Admin menu update/comment count notification accessibility

[afercia]

In the admin menu, when there are updates or pending comments, they're notified to users with a small number in a colored circle. Red or blue depending which is the current active menu item.

From an accessibility point of view I can see three issues here:

• color contrast (both #d54e21 and #00b9eb are under the required 4.5:1 ratio)
• the numbers font size is really too small
• the numbers are just... numbers and would need a more descriptive aria-label

About colors and font size, any change here would require design feedback so: designers welcome!

Screenshot for reference:

Tracking label: #a11y-color

[afercia]

The blue one :)

[afercia]

Related: #29022.

[deviodigital]

What descriptive wording would you like to see? Something like "Pending 6" or different words for each one (Updates, Comments, Themes, Plugins).

I'm thinking something like the following could work well, but let me know if I'm far off course here.

UPDATES: Available updates
COMMENTS: Pending comments
THEMES: Available updates
PLUGINS: Available updates

[afercia]

@deviodigital thanks for looking into this :) English is not my main language so I'm not sure. Ideally, this ticket should be coordinated with #29022 and maybe try to use the same strings used in the admin bar (the top toolbar). Less strings to translate, better consistency. Should also handle the plurals.

[afercia]

Related: #31713.

[afercia]

Related (for the admin bar): #26562

[adamsoucie]

First go-around with a patch. Updated the colors using the official WP colors and added some ARIA labels.

[Cheffheid]

I took a bit of a look at this patch, and the colour changes are a good start :thumbsup:

There are a few things that are missing or just not working properly just yet:

• The aria-label replaces the text completely, so just having it announce "Number of Plugins Needing Updates" isn't complete and the actual number will need to be part of it too.

• There is the "global" Updates link (in the Dashboard submenu) that seems untouched by the aria-label changes, but this would also need the same labeling treatment.

• The increase in the font size made the bubbles a bit more oval. They weren't perfect circles before, but due to the increased size this is now a bit more noticeable than before. The extent also varies based on the number it looks like. But maybe I'm just nitpicking. :)

[afercia]

Discussed during today's accessibility bug-scrub, and agreed to try this for 5.2.

[afercia]

Re: color contrast: when the "bubble" is displayed on an active menu item, it's blue instead of red:

The color contrast is really too low. Using a darker blue wouldn't be so appropriate because it will be barely distinguishable from the menu item background. On the other hand, I'm not sure why the bubble color should change in the first place.

Regardless, if keeping the blue background is desired, then it should be lighter to allow to use a black text and have a sufficient color contrast:

[afercia]

33030.diff​ addresses only the Comments and Privacy Policy "bubbles", I'd appreciate some preliminary testing on it. For better clarity, I'll prepare a separate patch for the Updates (Plugins etc.) as they're a bit more complicated and overlap with #29022.

• uses the same string for the "Comments in moderation" (also in the dashboard widget, see screenshot below)
• this simplifies things and allows to dynamically change the strings in an easier way
• introduces an updateInModerationText JS simple function, responsible to update all the Comments strings
• makes the bubble and their text slightly bigger
• improves the active item bubble contrast by using the menu background color, pending design feedback

Testing welcome!

Note: the visually hidden text is always updated based on the data from the Ajax response. Instead, the visible numbers are still updated via the old method, based on calculations made on data fetched from the markup. The old method calculation fails in some edge cases and should probably be reviewed in a separate ticket.

[afercia]

33030-updates.diff​ explores a way to update the strings for the plugins, themes, core, and translations updates. It works when updating plugins from the Plugins page. Can't work when updating from the Updates page, because of the iframe method used there which is also the reason why #29022 is blocked.

Will report on #29022, as seems to me that's the more appropriate ticket. Any help would be appreciated :)

[tinkerbelly]

My vote here would be for option #2 (keeping the badge red), mostly because it maintains consistency with the appearance of this bubble in other states. It's a bit of a stark colour difference against the blue, and an argument could probably be made for making these notification badges a bit less severe overall, but that's a whole other discussion!

For this change, I'd recommend maintaining consistency across states and always having the notification badges in red.

[afercia]

Re: the visual part, the patch also slightly increases the bubble size and the font-size. The current 9 pixels font-size is really too small for today's screens. See screenshot attached below.

[picard102]

I like option 4 visually, but option 2 makes more sense as @tinkerbelly points out.

[afercia]

@tinkerbelly @picard102 thanks for the feedback. Will make them red, then. Worth noting having a different color for the active "bubble" isn't entirely new in WordPress. The alternate color schemes change their color. For example, this is what "Midnight" does:

[afercia]

33030.2.diff​ refreshes the patch and includes the bubble color change:

• uses everywhere the same string %s Comment in moderation', '%s Comments in moderation so it can be updated in bulk
• introduces an updateInModerationText JS simple function, responsible to update all the related strings
• adds a visually hidden text "1 Privacy Policy update" to the Privacy menu items bubble
• adds/improves translators comments

Changes that apply to all the bubbles (Updates, plugins, etc.)

• makes the bubbles and their text slightly bigger
• improves the active menu item bubble contrast by changing the background color to red (option 2 in the screenshot attached in a previous comment)

[afercia]

Note for history: the #d54e21 red color mentioned in the ticket summary was changed in [41362] to #ca4a1f, which has a sufficient color contrast with the white text.

[afercia]

In 44924:

Accessibility: Improve the Comments and Privacy count text.

• standardizes the Comment count string to %s Comment in moderation', '%s Comments in moderation so it can be bulk-updated
• adds the string as visually hidden text in the admin menu
• introduces an updateInModerationText JS simple function, responsible to correctly update all the related text using the data from the AJAX response
• adds a visually hidden text "1 Privacy Policy update" to the Privacy menu items count
• adds/improves translators comments

Changes that apply to all the count bubbles (Updates, plugins, etc.)

• makes the bubbles and their text slightly bigger
• improves the active menu item bubble contrast by changing the background color to red (option 2 in the screenshot attached in a previous comment)

Props adamsoucie, afercia.
Fixes #33030.