[Combo] readonly attribute can create confusion for screen reader users

[jamesuhl]

Description

When navigating to the combobox, the screen reader announces "readonly", implying the combobox itself is read-only, possibly causing confusion

Solutions

The combobox is using an element with a readonly attribute to display the current selection(s) of the combobox. The source of confusion comes when the screen reader announces the comboxbox as readonly -- but is editable.
Two possible solutions here may be to
A. use a <div role="combobox"> element instead of an <input>. Or
B. give the <input> a dynamic aria-label of either “no options selected” (when empty) or “selected options” when populated with values.
Then
The component code needs to use a <button> element to actually reveal the drop-down. Currently, the code is using an <input> to open and close the dropdown, which is fine for people with functioning eyes, but for the blind, using an <input> to open/close a dropdown is not intuitive.

Additional context

Make these elements actual <button>s