User names autocomplete: markup improvements

[afercia]

Follow up to #2896

The user name suggestions list is currently implemented with an unordered list, where each list item contains a button. However, the role="listbox" expects their children to have the role="option". In other words, assistive technologies expect a listbox to be composed by a "Listbox" container and "option" children (just 2 nesting levels).

Also, the markup should be consistent with the one used for example for the links suggestions. Worth noting that, since we're using ARIA roles, the native semantics of UL and LI elements gets overridden. Basically we could use any element, because they will have the semantics of "listbox" and "option" anyways. The button is convenient to use, because it's an element that already has native keyboard interaction, but it won't be announced as "button".

I'd recommend to use the same markup used for the links suggestions. There's no need for an unordered list. Just a div (with role listbox) and buttons (with role option) are perfectly OK.

Rererence:
https://www.w3.org/TR/wai-aria/roles#listbox

List boxes contain children whose role is option.

[afercia]

It's important to note that also small differences in the markup have an impact on how assistive technologies may announce an ARIA listbox (or other ARIA widgets). In the screenshots below, with the current markup VoiceOver announces each option as "text":

instead, with the "flat" markup structure "listbox > option", it announces "clickable". Other screen readers may behave differently.

[afercia]

For a comparison, see also the expected behavior as it works on the Twitter mentions:

[afercia]

Seems to me this can be closed now: as far as I can tell, all the "autocompleters" use the same component now.