Align with wcag spec

[oliverfoster]

Recommendation https://www.w3.org/TR/wai-aria-practices-1.2/examples/combobox/combobox-select-only.html

[joe-replin]

Bug Description:

In the Matching component, each drop-down is labeled only using its selected value. There is no indication when the field is focused, what the corresponding question for the field is.

Steps to Reproduce:

Using a screen reader, open the course prototype.
Open the standard experience, then locate the Matching section
Focus on one of the drop-down menus and note the control's label. 

Actual Behavior:

Currently, the selected value is the only means of identifying the dorp-down menus.

Expected Behavior:

We recommend the Select only combobox structure rather than a button menu to better match the expected behavior of the Matching form fields :​https://www.w3.org/TR/wai-aria-practices-1.2/examples/combobox/combobox-select-only.html

This component will allow users to associate the question with the combobox as label.

[chris-steele]

@joe-replin that link seems to be broken, is this equivalent? https://w3c.github.io/aria-practices/examples/combobox/combobox-select-only.html

[joe-replin]

Hey @chris-steele, the link in my post seems to be linking correctly for me now.

[joe-replin]

@chris-steele, @oliverfoster, raising this issue for awareness to see if we were still planning on refactoring this component to make use of the combobox. Understand it used to have one and it was dropped in favor for better visual styling.

[joe-replin]

Select dropdowns in the Matching component do not clearly communicate the following:

1. A meaningful label. Currently the selected value serves as the field label.
2. A combobox role

Missing or inaccurate name and role information impact a screen reader users' understanding of the purpose and expected behavior of a control.

We recommend referring to the updated "Select Only Combobox" component from the W3C: https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/