Add screen reader text for Admin Bar Comments link

[slushman]

The Comments link on the Admin Bar only contains the number of approved and/or waiting-for-moderation comments, but no additional context telling a screen reader the meaning of that number. @afercia mentions this in #31324 when fixing other parts of the admin bar.

The following patch uses the same concept used in the list table for comments in #32152, where a screen-reader-text span is added containing the information used for the link title attribute.

[slushman]

Patch for adding screen reader text to Comments link on Admin Bar.

[rachelbaker]

Concat the $title string to include the screen reader span

[rachelbaker]

@afercia Can you review 34895.patch​? I believe this matches the prior art in the admin toolbar.

[afercia]

A quick screenshot with the last patch applied, tested in Firefox+NVDA:

As you can see there's a bit of redundancy. NVDA reads out:

• the comments pending count (as part of the accessible name)
• the new screen reader text (as part of the accessible name)
• then it announces the element type (link)
• finally reads out the title attribute (the accessible description)

Ideally, the first pending count number should be hidden from assistive technologies using an aria-hidden attribute, one example of this is the comments "bubble" in the Posts list table.

Additionally, the title attribute should be removed :) it would make perfectly sense to remove the title attribute in the same way it was done for the comments bubble in #32152 with the help of design and UI people.

[slushman]

Better patch using @afercia's and @rachelbaker's feedback. The visible comment bubble includes the aria-hidden, the $title variable is concatenated and includes the screen reader text.

[SergeyBiryukov]

In 36093:

Toolbar: In Comments link, replace title attribute containing the number of pending comments with a screen reader text.

Props slushman, rachelbaker.
Fixes #34895.