Customizer Menus: Accessibility: improve markup for menu item lists

[designsimply]

/hat tip @afercia for the original report at ​https://github.com/voldemortensen/menu-customizer/issues/91

Posts, Pages, Categories, etc. present a list of available items and ideally should be marked up as lists. Currently, each item is a dl missing a required dd element.

The same considerations about the text "Add Menu Item" and the suggested technique from #32721 apply here.

About the text, I'm not sure "Add Menu Item" is appropriate. We should try to consider what will be read out by screen readers together with the other text, for example:

1. When tabbing, only the button will be focused and the text read out will be just "Add Menu Item" without any reference to the link
   
   
2. When arrowing, the text read out will be something like:
   Post Hello World button Add Menu Item
   
   Probably, I would consider to completely hide from assistive technologies the item title and repeat the title in the button itself, something like:
   Post <span aria-hidden="true">Hello World</span> button Add Hello World to the Menu

This technique is used in several places in core, for example in the Post publish box:

<a href="#edit_timestamp" ... >
<span aria-hidden="true">Edit</span>
<span class="screen-reader-text">Edit date and time</span>
</a>

[designsimply]

Also noting some comments from @ocean90 from the previous issue:

The dl/dl markup seems to come from wp-admin/nav-menus.php. We should fix it there too.

Introduced in https://core.trac.wordpress.org/changeset/14248/trunk/wp-admin/includes/nav-menu.php, 5 years ago.

[ocean90]

Related: #31817

[ocean90]

In 32889:

Customizer: Use valid markup for menu items.

Replace <d(l|t)> with <div> for .menu-item-bar and .menu-item-handle.

see #32724, #32721, #31817.

[celloexpressions]

#32721 was marked as a duplicate.

[celloexpressions]

In 32724.diff​:

• Use lists for available menu items
• Remove unused template for available item types
• Hide the type label and title from screen readers and instead include them in the add button (this probably needs context and/or a comment for translators, but not sure how best to handle that @ocean90)

This should be everything else we need for this ticket. Note that regular menu items already use lists because Customizer control containers are lists by default.

[celloexpressions]

Patch missed div -> ul for taxonomy containers, but that should be a quick fix on commit.

[ocean90]

Replying to celloexpressions:

• Hide the type label and title from screen readers and instead include them in the add button (this probably needs context and/or a comment for translators, but not sure how best to handle that @ocean90)

Take a look at ​https://developer.wordpress.org/plugins/internationalization/how-to-internationalize-your-plugin/#disambiguation-by-context and ​https://developer.wordpress.org/plugins/internationalization/how-to-internationalize-your-plugin/#descriptions for this. The current string wouldn't be easy to translate. Something like Add %2$s (%1$s) to menu would be better.

Patch missed div -> ul for taxonomy containers, but that should be a quick fix on commit.

Please provide patches which doesn't require changes by a committer.

[afercia]

Changing from "enhancement" to "bug" as agreed with @obenland.

[afercia]

What about: Add to menu: %2$s (%1$s)
Would be something like "Add to menu: Hello World (post)".

[jorbin]

We should get the HTML finalized soon so plugins can be updated if they need to.

This patch still needs to be refreshed to include the div -> ul for taxonomy containers outlined above.

[ocean90]

In 33151:

Customizer: Improve markup for available menu items.

• Use lists for available menu items.
• Remove unused template for available item types.
• Hide the type label and title from screen readers and instead include them in the add button.

props celloexpressions, afercia.
fixes #32724.