-
Bug
-
Resolution: Unresolved
-
Major
-
None
-
4.1.9, 4.2.7, 4.3
-
MOODLE_401_STABLE, MOODLE_402_STABLE, MOODLE_403_STABLE
Running the AXE DevTools against the Autocomplete form field brings up a few issues with the aria attributes.
Steps to reproduce
- Go to the Moodle 4.3 sandbox and login as an admin
- Go to a course, select participants and click on 'enrol users'
- Leave the 'Select users' filed without a selection
- Run the AXE DevTools on the page with the 'Enrol users' popup open
- Bring up the suggestion list
- Run the AXE DevTools
- Make a selection
- Run the AXE DevTools
Errors reported
Unique errors for steps 3 and 5 (some errors will be repeated in more than one step).
Field left blank with no selection made (step 3)
Certain ARIA roles must contain particular children
The 'No selection' text is a span child of a listbox item (.form-autocomplete-selection). The span should have either have a role="option" attribute or hidden from assistive technology.
Suggested solution:
The span containing the text 'No selection' should take an aria-hidden="true" attribute to hide it from assistive technology.
For screen readers, the 'No selection' text should be appended to the screen reader only label to read 'Selected items: no selection'.
IMPORTANT!
At the moment, the 'No selection' text is not automatically read by screenreaders. Having the text as part of the label as per the suggested solution should fix the issue.
ARIA attributes must conform to valid values
The container for the selected items (div.form-autocomplete-selection) has an invalid aria-activedescendant value (aria-activedescendant="form_autocomplete_selection-1710418427609-NaN"). It looks like the problem is that the value is a non existent id.
Also the 'Nan' at the end of the value suggests a JavaScript error is happening when constructing the value.
NOTE: this particular error may have been resolved already as I am only able to consistently reproduce it on an older Moodle 4.1 installation.
Field with list of suggestions, no selection made (step 5)
Assuming the previous two errors are resolved, when we bring up the list of options we have one new error.
Required ARIA attributes must be provided
The input element for the autocomplete has a 'combobox' role but is missing the aria-controls attribute. In this case, this should be the id for ul.form-autocomplete-suggestions as it is the listbox popup element.