Create Dashboard: Error message not conveyed to screen reader users

XMLWordPrintable

    • 9.12
    • Severity 3 - Minor
    • Accessibility

      Issue Summary

      The error message "You must specify a name to save the dashboard as." is not conveyed to screen reader users.

      Note:

      Since there is only one required field, the impact of this bug is relatively low.

      As a result, we are marking the priority as "Medium" instead of "High", based on our WCAG Level A compliance requirement.

      Steps to Reproduce

      1. Open the Jira DC instance.
      2. Navigate to the header section, expand the "Dashboards" control, and activate the "Manage Dashboards" control.
      3. In the main content area, activate the "Create new dashboard" control.
      4. Leave the "Name" field empty.
      5. Using a screen reader, navigate to the "Add" control and activate it.
      6. Observe that an error message is displayed below the "Name" field, but it is not announced by the screen reader.

      Screen Recording

      Error Bug.mp4

      Actual Results

      When screen reader users activate the "Add" button without filling in the required "Name" field, an error message such as "You must specify a name to save the dashboard as." is displayed below the "Name" field. However, this error message is not announced by the screen reader.

      As a result, screen reader users are unaware that an error has occurred.

      Expected Results

      Ensure that the error message is conveyed to screen reader users.

      Apply the following changes:

      • Add the aria-describedby attribute to the form field.
      • Reference the id of the container used to display the error message in the aria-describedby attribute.
      • Add aria-live="assertive" to the <div> element that contains the error message to ensure it is announced immediately.

       

      Note: While implementing the aria-live attribute, please verify the screen reader announcement behavior.

      If the error message is being announced repeatedly or continuously, set the value of aria-live to "polite" on the <div> element containing the error message.

      Code Snippet:

      <label for="edit-entity-dashboard-name">
        Name
        <span class="aui-icon icon-required"> required</span>
      </label>
      <input id="edit-entity-dashboard-name" type="text" aria-describedby="errorMessage">
      <div id="errorMessage" aria-live="assertive">
        You must specify a name to save the dashboard as.
      </div>

      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 Sequoia 15.5
      Operations - Windows11
      Chrome - Version 137.0.7151.69 (Official Build) (64-bit)
      Safari- Version 18.5
      Firefox- Version 139.0.1 (64-bit)
      JAWS- Version 2023
      NVDA- Version 2024.4.2
      VoiceOver - Version Latest

        1. Error Bug.mp4
          15.99 MB
          Chirag Goyal

            Assignee:
            Unassigned
            Reporter:
            Chirag Goyal
            Votes:
            0 Vote for this issue
            Watchers:
            1 Start watching this issue

              Created:
              Updated: