Issue Summary

On the “Accessibility assessment | Roadmaps” page, the "Choose field" Combobox (that appears on expanding the "Field" button) use menu roles inappropriately.

Steps to Reproduce

1. Navigate onto the above mentioned page.
2. Navigate onto the "Field" button and activate it.
3. Navigate onto the mentioned instance and inspect its code.
4. Observe that the input field uses menu semantics inappropriately.

Screenshot

Actual Results

The parent <div> element containing the "Choose field" input field inappropriately use role="menu". However, this element does not have application menu semantics. This is a native input field. As a result, the native input field role was overridden.

Expected Result

Menu semantics must not be used on native <input> elements. They should instead be used on application menus. This is because these roles suppress the behaviour of the native input fields. Hence, we would recommend you to remove the role="menu" attribute from the parent <div> element.

Code snippet

<label for="a1">Choose field</label>
<input type="text" id="a1" ...>

Workaround

Currently, there is no known workaround for this behavior. A workaround will be added here when available

Environment

MacBook Pro (16-inch, 2021)
macOs Ventura 13.3.1
Chrome - Version 113.0.5672.63 (Official Build) (x86_64)
Firefox- Version 92.0 (64-bit)
Safari- Version 16.4 (18615.1.26.110.1)
JAWS- Version 2023
NVDA- Version 2023.3
Voiceover - Version Latest