fix: fast-select has combobox role accessibility violation

[m-akinc]

🐛 Bug Report

Foundation select has Lighthouse violations due to combobox role.

💻 Repro or Code Sample

1. Go to https://explore.fast.design/components/fast-select in Chrome or Edge
2. Open the dev tools and go to the Lighthouse tab
3. Generate report
4. Go to the Accessibility section of the report. The first error is Elements with an ARIA [role] that require children to contain a specific [role] are missing some or all of those required children.

🤔 Expected Behavior

There should not be an Elements with an ARIA [role] that require children to contain a specific [role] are missing some or all of those required children. error.

😯 Current Behavior

The error is reported on the fast-select element, which has role="combobox".

W3C specifies, among other requirements, that "Authors MUST ensure an element with role combobox contains or owns a text input element with role textbox or searchbox". This is definitely not the case for fast-select.

💁 Possible Solution

Even setting the role to listbox (which seems more appropriate for a select-style control) results in the same violation. Presumably, this is because the child items with role="option" are not direct children of the fast-select element, but rather nested under another element.

It may be reasonable to remove the role attribute entirely.

🔦 Context

We are developing a design system on top of FAST, and we have a test app including a select that is not passing the Lighthouse accessibility checks. This is the last issue keeping it from passing at 100%.

🌍 Your Environment

NA

[chrisdholt]

Thanks for the issue @m-akinc - we'll work to investigate.

@radium-v can you investigate and see if this is still an issue? I know we've recently done some work here and it's possible that the explorer may not be fully up to date. If this is still showing as an issue, let's revisit the recent work done to stay aligned with the ARIA specification (1.2).

[radium-v]

I can't reproduce this in these browsers:

• Chrome 100.0.4896.75 (Official Build) (64-bit)
• Edge 100.0.1185.29 (Official build) (64-bit)

The Combobox and Select components follow the ARIA 1.2 documentation:

A combobox input MAY be either a single-line text field that supports editing and typing or an element that only displays the current value of the combobox.