Customizer Menus: Accessibility: improve markup for the menu items search results list

[designsimply]

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

Searching for menu items will present a list of search results (or no results). Ideally, since this is a list, should be marked up as a list. Currently, each item is a definition list dl without a dd required element that's invalid markup.

About the "add" control, happy to see it's now a button.

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>

[afercia]

@designsimply thanks for the excellent description :) See also related #32715

[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]

This is a duplicate of #32724 - search results and other available items are rendered from the same html template, which I'm patching now.