View Pull Request: Combobox is missing appropriate roles and attributes

XMLWordPrintable

    • Severity 3 - Minor

      Issue Summary

      On the "Diff" tab,  the “Commits” combobox functionality is inaccessible for screen reader users.

      Note: A similar issue is observed on the "Build" tab.

      Steps to Reproduce

      1. Navigate to the "View Pull Request" page.
      2. Navigate to the "Diff" tab and activate it.
      3. Navigate to the mentioned combobox.
      4. Try to access the custom mentioned combobox. Observe it is not accessible.
      5. Try to navigate to native comboboxes in read mode and observe that it is missing an accessible name.

      Screenshot:

      Actual Results

      The role is not provided for the “Commit” custom combobox. In addition, a label is not provided for the mentioned combobox.

      Following problems found with custom combobox →

      1. The custom combobox is missing the role of combobox.
      2. role=”option” is missing for combobox options.

      Due to this, screen reader users may not be able to use the functionality effectively.

      Expected Results

      Making custom combobox accessible →

      1. role="combobox" and aria-haspopup="listbox" to the <input> element to announce the correct role for this field.
      2. aria-expanded property to the <input> element and toggle its value programmatically to true/ false depending on the expanded/ collapsed state of combobox.
      3. <div> element with role=”listbox” and a unique id.
      4. “aria-owns” attribute to <input> element having value of id property of <div> element.
      5. role=”option” and unique id to the <div> elements present for options present for combobx.
      6. aria-activedescendant property to the <input> element having value as id property of <li> element
      7. A visible label such as “Select commits” should be provided for Combobox using <label> element. Additionally “for“ and “id” attribute should be used to associate the label with its corresponding input field.

      For details on implementation, please see this example → https://www.w3.org/WAI/ARIA/apg/example-index/combobox/combobox-select-only.html

      Workaround

      Currently, there is no known workaround for this behaviour. 

      Environment 

      MacBook Pro (16-inch, 2019)
      macOS 13.4.1 (c) (22F770820d)
      Chrome - Version 115.0.5790.170 (Official Build) (x86_64)
      Firefox- Version 114.0 (64-bit)
      Safari- Version 16.5.2 (18615.2.9.11.10)
      JAWS- Version 2023.2306.28
      NVDA- Version 2022.2.2
      Voiceover - Version Latest

            Assignee:
            Navpreet Ahuja
            Reporter:
            Rahil Shaikh
            Votes:
            0 Vote for this issue
            Watchers:
            3 Start watching this issue

              Created:
              Updated:
              Resolved: