Description

Screen readers are trying to interpret the dropdown component as a form element even when used as a navigational component.

• browser: all

Steps to reproduce

1. Go to the demo code on Infragistics web page here: https://www.infragistics.com/products/ignite-ui-angular/angular/components/drop-down#multi-level-drop-down-menu (Note: the top examples on the page are correct, the bottom examples are using the same component code for navigation, which is not correct)
2. Analyze the code using dev tools

Result

The code is using the role attributes of "listbox" and "option"

Expected result

The code should be using the role attributes of: 'menu', 'menubar', 'menitems', (for navigational dropdown components)

Details

For custom dropdown components being used as a form element (emulating a <select> tag), the listbox and option roles are appropriate. Which is how the Infragistics code currently renders.
However, when building a custom dropdown to be used as a navigational device (emulating a <button> and a revealed list of hyperlinks) the menubar, menu and menuitem roles are more appropriate.
The Infragistics code only uses the listbox and option pattern, which causes NVDA to not function properly if the component is used for navigational purposes.
If hyperlinks or buttons are used inside of the “listbox” dropdown menu, whenever a link is selected using the ENTER key, NVDA shifts to focus to the topmost item in the list. This is the correct behavior for a <select> element, which is what the “listbox” role is meant to emulate. This means that when using NVDA, only the topmost hyperlink can be selected.

Attachments

In both of the examples (shown below), the Infragistics component is coded as if it were a form element, but the component is used as a navigational device. The role=“listbox” should be a “menu”, and the role=“option” should be set to “menuitem”