Required ARIA children role not present: listbox textbox

[pauljadam]

Checks all elements that contain a WAI-ARIA role to ensure that all required children roles are present
(More Info)

wcag2a wcag411 

Target: #container > div > div > input
HTML:

Summary:
Fix any of the following:

Required ARIA children role not present: listbox textbox

[CMTegner]

Hi @pauljadam! Thanks for letting us know. I'm sure there are loads of ARIA resources/tools we should be using. Do you have any tips for us so that we don't regress wrt. a11y in the future?

[pauljadam]

The ARIA 1.1 Authoring Practices give you instructions for how to provide ARIA roles, parent child relationships, and keyboard behavior. http://www.w3.org/TR/wai-aria-practices-1.1/#combobox

Also that issue was discovered with aXe the automated accessibility engine.

WAI-ARIA Roles, States, and Properties:
A combobox can be implemented using either of two design patterns:

As a combination of text field, which may be editable, a displayable list of items, and a drop button to toggle the display of that list; all wrapped in the form of a single widget with role of combobox.
As a combobox, which behaves like a textfield and may be editable, with a displayable list of items, and a drop button to toggle the display of that list;
Like text fields a combobox should be labeled to convey the purpose of the widget. Keyboard focus within the widget must be managed by the widget. Comboboxes are used extensively in graphical user interfaces and the design pattern for the widget should be semantically correct.

For the first combobox design pattern:

The container element that wraps the combobox has a role of combobox.
The first element within the combobox is an input text field and is responsible for managing the keyboard focus between the text field and the list as well as displaying the list. The text field is in the tab order. If you create a text field without using a standard HTML text field form control then ensure that it is in the tab order.
If the text field is not editable it must have have aria-readonly = true.
The combobox must have aria-expanded = true if the list is displayed or aria-expanded = false when it is not.
The next element is an html , or another element with a role of button. This element is used to toggle the display of the combobox's drop down list.
The next element has a listbox role and represents the drop down list. It manages keyboard navigation among list items and navigating back to the text field if necessary.
Each item in the listbox is an option. Options are not in the tab order.
Provide a label for the combobox by referencing the text field in the combobox. You can use an aria-label to associate this label with the combobox or you may use the HTML element and its for attribute to reference the text field.
For the second combobox design pattern:

The first element for the combobox has a role of combobox and behaves like an input text field and is responsible for managing the keyboard focus between the combobox and the list as well as displaying the list. The text field is in the tab order. If you create a text field without using a standard HTML text field form control then ensure that it is in the tab order.
If the combobox is not editable it must have have aria-readonly = true.
The combobox must have aria-expanded = true if the list is displayed or aria-expanded = false when it is not.
The next element is an html

, or another element with a role of button. This element is used to toggle the display of the combobox's drop down list.
The next element has a listbox role and represents the drop down list. It manages keyboard navigation among list items and navigating back to the text field if necessary.
Each item in the listbox is an option. Options are not in the tab order.
Provide a label for the combobox by referencing the text field in the combobox. You can use an aria-label to associate this label with the combobox or you may use the HTML element and its for attribute to reference the text field.
For each combobox pattern the button need not be in the tab order if there is an appropriate keystroke associated with the input element such that when focus is on the input, the keystroke triggers display of the associated drop down list. In this case, a Tab to focus the button is unnecessary. This is the same behavior as the select element.

[teameh]

• Move `role="combobox" to wrapper
• Add textbox role to input
• Add listbox role to menu
• Implement required listbox elements (option)
• ...

[ekim-novus]

Hi @CMTegner ! I'm currently working on a project that uses this package and needs to be WCAG compliant, so I'm planning to make a PR soon that resolves the issues in this ticket and uses the recommendations outlined here:
https://www.w3.org/TR/wai-aria-1.1/#combobox