fix: select combobox role

[jacobdevera]

Description

The W3C recently created an example for select-only comboboxes, which is used for inspiration

• Use role combobox to support aria-readonly
• aria-haspopup should be listbox

Deviations

• Not using aria-activedescendant; instead our markup is meant to support a roving tabindex for focus management which is functionally equivalent
• Not using aria-labelledby; our documentation features the Select in isolation. This attribute would be used in tandem with a form label

Testing

• JAWS + Chrome / IE

Known Issue

• VoiceOver ❌ VO currently does not currently handle combobox very well. See Select-only combobox w3c/aria-practices#1396 (comment) . This is also reproducible in OpenUI5 Select

Please check whether the PR fulfills the following requirements

• all items on the PR Review Checklist are addressed :
  https://github.com/SAP/fundamental-styles/wiki/PR-Review-Checklist

[netlify]

Deploy preview for fundamental-styles ready!

Built with commit 4182325

https://deploy-preview-1219--fundamental-styles.netlify.app

[InnaAtanasova]

Code looks good but you can no longer open the menu when clicked on the button (except the first example which works)

[prsdthkr]

Should we move the popover ids from <div> to <ul>? The WAI-ARIA v1.2 specification for combobox role says:

Authors MUST ensure the popup element associated with a combobox has a role of listbox, tree, grid, or dialog. Authors MUST set aria-controls on a combobox element to a value that refers to the combobox popup element.

[jacobdevera]

Should we move the popover ids from <div> to <ul>?

I added an id to the listbox and set aria-controls accordingly, but the id for the popover is still needed for triggering the open/close