Uploaded image for project: 'Jira Service Management Data Center'
  1. Jira Service Management Data Center
  2. JSDSERVER-14183

Asset Search: Missing form label or 'Title' attribute

XMLWordPrintable

      Issue Summary

      The label is not specified for "QR code size" form field in the modal dialog (that becomes available on activating "Print QR code" button) on the page.

      Steps to Reproduce

      1. Open the "Asset Search" page.
      2. Navigate to the main content.
      3. Navigate to the "More action for Apache Tomcat" and "More actions for Emacs" buttons and activate any of these.
      4. Navigate to the "Print QR code" button and activate it from the updated content.
      5. A modal dialog appears on the page.
      6. Navigate to the mentioned form field.
      7. Inspect the code and observe that the label or "title" attribute is not provided for the form field.

      Screenshot

      Actual Results

      The "QR code size" form field in "Print QR Code" does not have the label associated with this and "title" attribute is not included in it's source code either.
      As a result, screen reader users will not understand the purpose of the form fields.

      Expected Results

      Apply the following changes:

      • Provide unique and descriptive label for mentioned form fields using <label> element.
      • Associate the label explicitly with the form field by providing identical value which is unique from other IDs to "for" and "id" attributes of the label and form field respectively.

      Alternatively, use either hidden labels or "aria-label" attribute to convey the purpose of the form fields to screen reader users as well as maintain the presentation.

      Code Snippet

      <label for="qr-size"><div class="imaResults_headercontent_qr-size">QR code size</div></label>
      <input id="react-select-15-input" tabindex="0" inputmode="none" id="qr-size" aria-autocomplete="list" aria-expanded="false" aria-haspopup="true" role="combobox" aria-readonly="true" class="css-1hac4vs-dummyInput" value="">

      Workaround

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

      Environment

      MacBook Pro (16-inch, 2021)
      macOs Monterey Version 12.3.1
      Chrome - Version 101.0.4606.81 (Official Build) (64-bit)
      Firefox- Version 93.0 (32-bit)
      Safari- Version 15.3 (17612.4.9.1.5)
      JAWS- Version 2022
      NVDA- Version 2020.3
      Voiceover - Version Latest

              Unassigned Unassigned
              4cbd728b4726 Rinku Kumar
              Votes:
              0 Vote for this issue
              Watchers:
              1 Start watching this issue

                Created:
                Updated: