Customizer Menus: Accessibility: make the aria-label for the "+ Add Items" button more descriptive

[designsimply]

Moving this over from ​https://github.com/voldemortensen/menu-customizer/issues/84

Talking about how you either need to open the item to find the delete link inside or you can click the +Add Items button to access the quick-delete icons, @afercia says:

Ideally the + Add Items button text should describe the set of actions made available when you press it. I understand that visually this is a minor issue since sighted users can actually see the red X. Also, I understand the troubles screen reader users will face: if they look for something to delete menu items, it's very unlikely they will activate a button that says "Add Items". We should try to find a good balance between visual and semantics, where the latter is not just "abstract semantics" but real information as used by software and consequently by people using that software. It's always about people :)

If you're OK with "Add Items" for the visual part, I'd be happy to use a more descriptive aria-label attribute on the button: aria-label="Add or remove menu items".

[afercia]

Proposed patch simply adds an aria-label attribute. See in the screenshot below how aria-label completely overrides the default text (which doesn't get read out). Used this way, an aria-label attribute can be a very useful means to provide more descriptive UI controls to Assistive Technologies.

[celloexpressions]

Still waiting for commit or other feedback here. Looks good to me, but may require a refresh due to recent changes around here.

[SergeyBiryukov]

In 32981:

Customizer: Add an aria-label attribute to the Add Items button to improve accessibility.

props afercia.
fixes #32713.