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

Help Center: Supplemental information provided for Rich text area fields & insight object fields is not announced by screen reader

XMLWordPrintable

      Issue Summary

      Supplemental information provided for Rich text area & insight object fields is not announced by screen reader

      Steps to Reproduce

      1. Navigate to the Help center.
      2. Open "Fix an account problem" request form.
      3. With screen reader & tab key navigate to "Description (optional)" field (rich text area) 
      4. Observe that the supplemental text "Provide your description" preset below the field is not announced by screen reader.

      Actual Results

      With tab/shift+tab keys, when screen reader user navigate to "Description (optional)" field, the screen reader doesn’t announce the supplemental information present below the field. The information is not associated with input field programatically.

      This makes screen reader users difficult to understand the presence of such supplemental information. 

      This issue is also applicable for the insight object fields.

      Note: This issue is applicable for all Rich text & insight object fields present in all request forms. Hence it should be fixed at all places.

      Screenshot

      Rich text field

      Insight object fields

      Expected Results

      The Supplemental information provided for Rich text area & insight objects fields should be announced by screen reader. 

      Associate the information with input field via aria-labelledby attribute & provide the unique ID's of label & supplemental information elements.

      For Example: 

      <label class="field-label" for="description" id="description-label">Description <span class="vp-optional">(optional)</span></label>

      <div class="ua-chrome ProseMirror" role="textbox" id="ak-editor-textarea" contenteditable="true" translate="no" data-gramm="false" aria-labelledby="description-label" style="display: block;" aria-labelledby="description-label description-helper"><p><br class="ProseMirror-trailingBreak"></p></div>

      <div class="description" id="description-helper"><p>Provide your description</p></div>

      Also if there are multiple Rich text fields are present in that case ensure that the ID values are unique.

      Workaround

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

        1. image-2023-10-09-11-19-14-335.png
          image-2023-10-09-11-19-14-335.png
          128 kB
        2. Screenshot 2023-09-11 at 4.57.14 PM.png
          Screenshot 2023-09-11 at 4.57.14 PM.png
          255 kB
        3. Screenshot 2023-09-11 at 6.01.49 PM.png
          Screenshot 2023-09-11 at 6.01.49 PM.png
          227 kB

          Form Name

            [JSDSERVER-14255] Help Center: Supplemental information provided for Rich text area fields & insight object fields is not announced by screen reader

            There are no comments yet on this issue.

              Unassigned Unassigned
              4b5b126a48d0 ssuryavanshi (Inactive)
              Affected customers:
              0 This affects my team
              Watchers:
              2 Start watching this issue

                Created:
                Updated:
                Resolved: