Add accessible text to disclosure menu on Categories/Entries screens

[gcamacho079]

Description

• Adds accessible text to disclosure menus that specify new entry/category type (Resolves DEV-443)
• Adds ariaLabel and role to Craft.ui.createButton config
• Enables keyboard operation of New Entry/New Category menus (Resolves DEV-684)

Related issues

[linear]

DEV-443 New Category and New Entry disclosure menu triggers do not have associated text

The expandable menus next to New Category and New Entry buttons do not have programmatically-determinable text

Add aria-label attributes on the buttons, or visually-hidden text

Screen Shot 2022-04-07 at 5.47.13 PM.png

Resolves CMS-113

[brandonkelly]

“Specify new entry type” could be confusing because Craft already has a concept called “entry types”.

Can we change the wording to “Choose a category group” and “Choose a section”?

[gcamacho079]

@brandonkelly I've updated the translations to match your suggestions! I did realize while making that update that having different button text for the disclosure button depending on whether the user is in a group/section or on the index page is a failure under 3.2.4 Consistent Identification.

So I streamlined the button text on the index page so that it's consistent with the split button's accessible text:

[brandonkelly]

The button should definitely still be labelled “New entry”/“New category”. Without that, it’s not clear why you’d be “choosing a section” or “choosing a category group” in the first place.

Can the original button labels be retained (and spoken), and have “Choose a section”/“Choose a category group” be spoken out in addition to that, when the button is activated?

[gcamacho079]

@brandonkelly that makes complete sense. Let me think through this a little more and I'll see what I can come up with. 🤔

[linear]

DEV-684 Users can't operate primary action menu on entry/category index pages with keyboard only

Page Area:

Entry and category index pages

Issue Description:

When a user activates the split action button to add a new element and choose its type, they can't make a selection via the keyboard only

Action:

Use a button role and add Enter/Spacebar handlers for selecting a new element type

Screenshot/Code Snippet:

Screenshot showing the disclosure menu in question, immediately following the search/filter toolbar:

Screen Shot 2022-06-02 at 11.49.55 AM.png

Resolves CMS-229