Uploaded image for project: 'Moodle'
  1. Moodle
  2. MDL-81240

Missing and invalid aria roles in the autocomplete form field

XMLWordPrintable

    • 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

      1. Go to the Moodle 4.3 sandbox and login as an admin
      2. Go to a course, select participants and click on 'enrol users'
      3. Leave the 'Select users' filed without a selection
      4. Run the AXE DevTools on the page with the 'Enrol users' popup open
      5. Bring up the suggestion list
      6. Run the AXE DevTools
      7. Make a selection
      8. 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.

            Unassigned Unassigned
            Zanatta Susanna
            Votes:
            0 Vote for this issue
            Watchers:
            4 Start watching this issue

              Created:
              Updated:

                Error rendering 'clockify-timesheets-time-tracking-reports:timer-sidebar'. Please contact your Jira administrators.