-
Type:
Bug
-
Resolution: Unresolved
-
Priority:
Medium
-
None
-
Affects Version/s: 9.12.16, 10.6.1
-
Component/s: Accessibility, Dashboard & Gadgets
-
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
- Open the Jira DC instance.
- Navigate to the header section, expand the "Dashboards" control, and activate the "Manage Dashboards" control.
- In the main content area, activate the "Create new dashboard" control.
- Leave the "Name" field empty.
- Using a screen reader, navigate to the "Add" control and activate it.
- Observe that an error message is displayed below the "Name" field, but it is not announced by the screen reader.
Screen Recording
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
- mentioned in
-
Page Loading...