Library: Improve the screenreader announcements for category navigation

[talldan]

Description

When tabbing through the category navigation on the Library screen, the way categories are announced could be improved:

Currently these will be announced as "Headers 2, button", "Footers 1, button", ... "Custom Patterns 4, current item, button".

It's good that the selected item is announced, but a couple of things could be improved:

• There are icons that relay that a category is for a template part or a pattern visually (though it's very subtle), but this information isn't relayed textually.
• The counts of items in the category is useful, but might be confusing because of the way it's read out.

It might be a good idea to look at adding some VisuallyHidden text to improve the announcements to be something like:

"Headers (template part), 2 items, button", ... "Custom patterns (pattern), 4 items, current item, button"

Step-by-step reproduction instructions

1. Open the site editor
2. Tab to the Library option
3. Tab through the categories to hear the announcements.

Screenshots, screen recording, code snippet

No response

Environment info

No response

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[afercia]

From an accessibility perspective, this is being worked on https://github.com/WordPress/gutenberg/pull/52017

However, I'm not sure the current design is ideal in the first place. Screenshot:

As a user, it's not clear to me what the difference is between the two groups. The two groups may contain items with the same name: It's not clear to me what Footers in the first group and Footers in the second group is and what the difference is. As a used, i do see different icons but those icons mean little (or nothing) to me.

I'd think that if we do want to have two separate groups of items, we should clearly distinguish them visually and provide visible text to indicate what these groups are about. In HTML, headings are made to serve this purpose. Adding the design-feedback label.

There are icons that relay that a category is for a template part or a pattern visually (though it's very subtle)

I'd totally second this. Those icons don' t mean anything to me, as a used. I do know there's still some uncertainty about what terminology to use (template parts, patterns, and the like). But if we do want to use different categories, these should be clearly communicated visually.

[joedolson]

I'd definitely find this easier to make sense of visually if the sections were grouped using headings. The icons mean virtually nothing visually, so while it's good for screen reader users to have them included in the accessible naming, it doesn't do anything to help sighted users.

As it is, all those icons tell me is "in some mysterious way, these are different".

I'll second adding visible headings to group these.

[bph]

Checked on PR: https://github.com/WordPress/gutenberg/pull/52017#issuecomment-1629510869