Add watchers: Visible label/form field are not associated

XMLWordPrintable

    • 9.08
    • 1
    • Severity 2 - Major

      Issue Summary

      The "aria-label" attribute is defined inappropriately.

      Element name:

      • Add Watchers

      Location of the element: Editable Combobox, in the "Add Watchers" popup, in the "People" heading section, in the main content.

      Steps to Reproduce

      1. Open an issue
      2. Click on the Watchers counter – the Add Watchers popup dialog appears
      3. Inspect the code for mentioned instance and observe that the aria attribute is defined inappropriately.

      Expected Results

      The "aria-label" attribute is defined inappropriately for the "Add Watchers" input field. The visible label is associated with the input field using "for" and "id" explicitly. The "aria-label" attribute overrides the visible text which confuses the screen reader user.
      Note: the users list in aria-label is also important, see the linked ticket & Slack discussion for more context 

      Actual Results

      Remove the "aria-label" attribute from the input field's source code. The visible label should be announced with the input field.

      <label class="js-add-watchers-label" for="watchers-textarea">Add Watchers</label>
      (...)
      <textarea autocomplete="off" role="combobox" aria-autocomplete="list" aria-expanded="false" id="watchers-textarea" class="text long-field" wrap="off" aria-multiline="false"></textarea>
      

      Workaround

      Currently there is no known workaround for this behavior. A workaround will be added here when available

              Assignee:
              Yurii Yatskiv (Inactive)
              Reporter:
              Denys Serhiienko (Inactive)
              Votes:
              0 Vote for this issue
              Watchers:
              3 Start watching this issue

                Created:
                Updated: