Uploaded image for project: 'Jira Cloud'
  1. Jira Cloud
  2. JRACLOUD-65486

Select widget labels not accessible to screen readers in JIRA Cloud

    XMLWordPrintable

Details

    Description

      Summary

      Using JAWS or NVDA, input elements with role="combobox" are described only as:
      'combo box collapsed and autocomplete editable blank' for one with nothing pre-selected
      or
      'combo box collapsed and autocomplete editable selected <Whatever is selected>'

      Input elements with role="combobox" have a different id than the previous label for element.

      A concrete example is <label for="project"></label>
      The actual active element is <input id="project-field"></input> whereas the element labeled as "project" is a hidden input element.

      This means that combobox selection elements, such as Project, Issue Type, Priority, Components/s, Reporter, Assignee, Labels, Epic Link, Sprint, and many more are indistinguishable from each other when read aloud:

      Steps to Reproduce

      1. Access any combobox selection elements, such as Project, Issue Type, Priority, Components/s, Reporter, Assignee, Labels, Epic Link and Sprint using JAWS or NVDA

      Expected Results

      These should be distinguishable from each other when read aloud.

      Actual Results

      They're indistinguishable.

      Notes (suggested solutions)

      • change the label for id so it matches the id for the actual input element that has role="combobox"
      • swap the labels for the the style="display: none;" hidden input element with the element that has role="combobox", so the combobox one gets id "project" and the hidden input element gets the "project-field" id instead.
      • Explicitly assign an aria-label attribute for each of the combobox elements, so for the project label, combobox would have aria-label="project".

       

      The JIRA combobox (single/multi select) components for things like project/issue type/priority fields don't have a correctly associated label. The fields start off with id="project" but after JS runs they end up with id="project-field". This was historically because it needed to avoid duplicate IDs with the original <select> field used to instantiate the component. This element no longer exists (was removed from the dom in a recent release) but the ID is still wrong.

      Can solve this by using JS to change the label's for attribute to be "project-field".

      Attachments

        Issue Links

          Activity

            People

              Unassigned Unassigned
              scurtis Sean Curtis (Inactive)
              Votes:
              1 Vote for this issue
              Watchers:
              3 Start watching this issue

              Dates

                Created:
                Updated:
                Resolved: