-
Bug
-
Resolution: Unresolved
-
Medium (View bug fix roadmap)
-
None
-
8.20.30, 9.12.2, 9.4.17
-
8.2
-
Severity 3 - Minor
-
Issue Summary
The form fields present in the main content area is not associated with the label.
Steps to Reproduce
- Navigate to the "Plans" dropdown.
- Select any plan from the list.
- Navigate the page using screen reader.
- Ensure that label is not associated with the form field.
Screenshot 1
Screenshot 2
Actual Results
The listbox elements such as "Group by", "Color by", and "Sort by" have a visual label which is not associated with the dropdown options programmatically. As a result, screen reader users won't be able to understand if any user changes the values, the label will not be announced.
Additionally state is not defined programmatically.
Expected Results
Apply the following changes:
- Provide <label> element to "Group by", "Color by" and "Sort by".
- Provide role "listbox" to the <div> element containing dropdown options such as "None", "Assignee", "Component', "Label", and so on. Similarly for the "Color by" and "sort by" options
- Add "id" attribute to the <label> element and "aria-labelledby" attribute to the <button> element.
- Remove role "menu" and "menuitem" from the respective elements.
- set aria-expanded attribute to the <button> element, the value should be true in expanded state and false in collapsed state. Ensure on user interaction value should be change.
Alternatively, if the above solution is not feasible we can also use a <select> and <option> elements to make it accessible. For more information refer this link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select
Code Snippet
<label id="groupby">Group by</label> <button class="sc-fAjcbJ leDjeL" spacing="default" type="button" aria-expanded="false">(...)</button> <div aria-label="" role="listbox"> <span class="_3ykRA Item-z6qfkt-2 bfSyCq" aria-disabled="false" tabindex="0"> <span class="ItemParts__Content-sc-14xek3m-5 jRBaLt"><span>None</span></span> <span class="ItemParts__Content-sc-14xek3m-5 jRBaLt"><span>Assignee</span></span> (...) </div>
Workaround
Currently there is no known workaround for this behavior. A workaround will be added here when available
Environment
MacBook Pro (16-inch, 2019)
macOS Ventura Version 13.6.1
Chrome - Version 120.0.6099.234 (Official Build) (x86_64)
Firefox- Version 112.0.1 (64-bit)
Safari- Version 17.3 (18617.2.4.11.9, 18617)
JAWS- Version 2022
NVDA- Version 2020.3
- links to
