-
Bug
-
Resolution: Unresolved
-
Medium (View bug fix roadmap)
-
None
-
9.12.2
-
9.12
-
Severity 3 - Minor
-
Issue Summary
The content associated with the "Order by" expandable link in the main content does not have an appropriate reading order.
Steps to Reproduce
- Open "Issues" page.
- Using screen reader, navigate to the "Order by" link present in main content area and activate it.
- Arrow down onto the expandable content from the link.
- Note that the content associated with it is available at the end of the page.
Screenshot
Actual Results
When the "Order by" link is expanded, the expanded content of this link is available at the end of the page for screen reader users. This is because this content is not coded directly after the link in the DOM. It is instead coded at the end of the page.
This inappropriate reading order might disorient the users of screen readers. That the content is available at the end might confuse or mislead them.
Expected Results
Content must have an appropriate reading order. Assistive technologies navigate content using the order in which elements appear in the DOM. Hence, make sure that the content is programmatically ordered in such a way that it provides an appropriate reading order to the users of assistive technologies. Make sure that the content that gets available on expanding the link is coded directly after the expandable link in the DOM. This will create an appropriate reading order for the users of assistive technologies. For instance, this will enable them to arrow down onto the expanded content when the link is expanded.
Code Snippet
<a href="#" aria-haspopup="true" class="order-options aui-button aui-style-default jira-aui-dropdown2-trigger active" title="Select the field that issues are ordered by." resolved=""> <span>Order by Priority</span></a> <div class="check-list-field-container"> <div class="assistive" aria-live="polite">10 results available. Type to search and press Tab to navigate through options.</div> <input autocomplete="off" placeholder="Search" class="text" id="order-by-options-input" aria-label="Search"> <span class="icon-default aui-icon aui-icon-small aui-iconfont-search noloading"></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, 2021)
macOS: Sonoma 14.3
Chrome - Version 119.0.6045.105 (Official Build) (64-bit)
Firefox- Version 92.0 (64-bit)
Safari- Version 16.6 (18615.3.12.11.2)
JAWS- Version 2023
NVDA- Version 2021.2
Voiceover - Version Latest
[JRASERVER-77208] Issues: Inaccurate reading order
| Labels | Original: 1.3.2 a11y-triaged ax-at-JAWS ax-at-NVDA ax-at-VO ax-at-user ax-bug ax-jiradc-vpat2024 ax-jiradc-vpat2024-issues ax-jiradc-vpat2024-pg05 ax-medium-priority ax-qa level-A wcag21 | New: 1.3.2 a11y-triaged ax-at-JAWS ax-at-NVDA ax-at-VO ax-at-user ax-bug ax-jira-dc-vpat ax-jira-dc-vpat-Findanissue ax-jiradc-vpat2024 ax-jiradc-vpat2024-issues ax-jiradc-vpat2024-pg05 ax-medium-priority ax-qa level-A wcag21 |
| Component/s | New: Navigation - Search [ 43404 ] |
| Labels | Original: 1.3.2 a11y-triaged ax-at-JAWS ax-at-NVDA ax-at-VO ax-at-user ax-bug ax-high-priority ax-jiradc-vpat2024 ax-jiradc-vpat2024-issues ax-jiradc-vpat2024-pg05 ax-qa level-A wcag21 | New: 1.3.2 a11y-triaged ax-at-JAWS ax-at-NVDA ax-at-VO ax-at-user ax-bug ax-jiradc-vpat2024 ax-jiradc-vpat2024-issues ax-jiradc-vpat2024-pg05 ax-medium-priority ax-qa level-A wcag21 |
| Priority | Original: High [ 2 ] | New: Medium [ 3 ] |
| Labels | Original: 1.3.2 ax-at-JAWS ax-at-NVDA ax-at-VO ax-at-user ax-bug ax-high-priority ax-jiradc-vpat2024 ax-jiradc-vpat2024-issues ax-jiradc-vpat2024-pg05 ax-qa level-A wcag21 | New: 1.3.2 a11y-triaged ax-at-JAWS ax-at-NVDA ax-at-VO ax-at-user ax-bug ax-high-priority ax-jiradc-vpat2024 ax-jiradc-vpat2024-issues ax-jiradc-vpat2024-pg05 ax-qa level-A wcag21 |
| Status | Original: Needs Triage [ 10030 ] | New: Ready for Development [ 10049 ] |
| Description |
Original:
h3. Issue Summary
The content associated with the "Order by" expandable link in the main content does not have an appropriate reading order. h3. Steps to Reproduce # Open "Issues" page. # Using screen reader, navigate to the "Order by" link present in main content area and activate it. # Arrow down onto the expandable content from the link. # Note that the content associated with it is available at the end of the page. h3. Screenshot !Screenshot 2024-02-12 at 4.17.19 PM.png|width=388,height=222! h3. Actual Results When the "Order by" link is expanded, the expanded content of this link is available at the end of the page for screen reader users. This is because this content is not coded directly after the link in the DOM. It is instead coded at the end of the page. This inappropriate reading order might disorient the users of screen readers. That the content is available at the end might confuse or mislead them. h3. Expected Results Content must have an appropriate reading order. Assistive technologies navigate content using the order in which elements appear in the DOM. Hence, make sure that the content is programmatically ordered in such a way that it provides an appropriate reading order to the users of assistive technologies. Make sure that the content that gets available on expanding the link is coded directly after the expandable link in the DOM. This will create an appropriate reading order for the users of assistive technologies. For instance, this will enable them to arrow down onto the expanded content when the link is expanded. *Code Snippet* {code:java} <a href="#" aria-haspopup="true" class="order-options aui-button aui-style-default jira-aui-dropdown2-trigger active" title="Select the field that issues are ordered by." resolved=""><span>Order by Priority</span></a> <div class="check-list-field-container"><div class="assistive" aria-live="polite">10 results available. Type to search and press Tab to navigate through options.</div><input autocomplete="off" placeholder="Search" class="text" id="order-by-options-input" aria-label="Search"><span class="icon-default aui-icon aui-icon-small aui-iconfont-search noloading"></span></div>{code} h3. Workaround Currently there is no known workaround for this behavior. A workaround will be added here when available h3. Environment MacBook Pro (16-inch, 2021) macOS: Sonoma 14.3 Chrome - Version 119.0.6045.105 (Official Build) (64-bit) Firefox- Version 92.0 (64-bit) Safari- Version 16.6 (18615.3.12.11.2) JAWS- Version 2023 NVDA- Version 2021.2 Voiceover - Version Latest |
New:
h3. Issue Summary
The content associated with the "Order by" expandable link in the main content does not have an appropriate reading order. h3. Steps to Reproduce # Open "Issues" page. # Using screen reader, navigate to the "Order by" link present in main content area and activate it. # Arrow down onto the expandable content from the link. # Note that the content associated with it is available at the end of the page. h3. Screenshot !Screenshot 2024-02-12 at 4.17.19 PM.png|width=388,height=222! h3. Actual Results When the "Order by" link is expanded, the expanded content of this link is available at the end of the page for screen reader users. This is because this content is not coded directly after the link in the DOM. It is instead coded at the end of the page. This inappropriate reading order might disorient the users of screen readers. That the content is available at the end might confuse or mislead them. h3. Expected Results Content must have an appropriate reading order. Assistive technologies navigate content using the order in which elements appear in the DOM. Hence, make sure that the content is programmatically ordered in such a way that it provides an appropriate reading order to the users of assistive technologies. Make sure that the content that gets available on expanding the link is coded directly after the expandable link in the DOM. This will create an appropriate reading order for the users of assistive technologies. For instance, this will enable them to arrow down onto the expanded content when the link is expanded. *Code Snippet* {code:java} <a href="#" aria-haspopup="true" class="order-options aui-button aui-style-default jira-aui-dropdown2-trigger active" title="Select the field that issues are ordered by." resolved=""> <span>Order by Priority</span></a> <div class="check-list-field-container"> <div class="assistive" aria-live="polite">10 results available. Type to search and press Tab to navigate through options.</div> <input autocomplete="off" placeholder="Search" class="text" id="order-by-options-input" aria-label="Search"> <span class="icon-default aui-icon aui-icon-small aui-iconfont-search noloading"></span> </div>{code} h3. Workaround Currently there is no known workaround for this behavior. A workaround will be added here when available h3. Environment MacBook Pro (16-inch, 2021) macOS: Sonoma 14.3 Chrome - Version 119.0.6045.105 (Official Build) (64-bit) Firefox- Version 92.0 (64-bit) Safari- Version 16.6 (18615.3.12.11.2) JAWS- Version 2023 NVDA- Version 2021.2 Voiceover - Version Latest |
| Description |
Original:
h3. Issue Summary
The content associated with the "Order by" expandable link in the main content does not have an appropriate reading order. h3. Steps to Reproduce # Open "Issues" page. # Using screen reader, navigate to the "Order by" link present in main content area and activate it. # Arrow down onto the expandable content from the link. # Note that the content associated with it is available at the end of the page. h3. Screen recording h3. Actual Results When the "Order by" link is expanded, the expanded content of this link is available at the end of the page for screen reader users. This is because this content is not coded directly after the link in the DOM. It is instead coded at the end of the page. This inappropriate reading order might disorient the users of screen readers. That the content is available at the end might confuse or mislead them. h3. Expected Results {noformat} Content must have an appropriate reading order. Assistive technologies navigate content using the order in which elements appear in the DOM. Hence, make sure that the content is programmatically ordered in such a way that it provides an appropriate reading order to the users of assistive technologies. Make sure that the content that gets available on expanding the link is coded directly after the expandable link in the DOM. This will create an appropriate reading order for the users of assistive technologies. For instance, this will enable them to arrow down onto the expanded content when the link is expanded.{noformat} h3. Workaround Currently there is no known workaround for this behavior. A workaround will be added here when available h3. Environment MacBook Pro (16-inch, 2021) macOS: Sonoma 14.3 Chrome - Version 119.0.6045.105 (Official Build) (64-bit) Firefox- Version 92.0 (64-bit) Safari- Version 16.6 (18615.3.12.11.2) JAWS- Version 2023 NVDA- Version 2021.2 Voiceover - Version Latest |
New:
h3. Issue Summary
The content associated with the "Order by" expandable link in the main content does not have an appropriate reading order. h3. Steps to Reproduce # Open "Issues" page. # Using screen reader, navigate to the "Order by" link present in main content area and activate it. # Arrow down onto the expandable content from the link. # Note that the content associated with it is available at the end of the page. h3. Screenshot !Screenshot 2024-02-12 at 4.17.19 PM.png|width=388,height=222! h3. Actual Results When the "Order by" link is expanded, the expanded content of this link is available at the end of the page for screen reader users. This is because this content is not coded directly after the link in the DOM. It is instead coded at the end of the page. This inappropriate reading order might disorient the users of screen readers. That the content is available at the end might confuse or mislead them. h3. Expected Results Content must have an appropriate reading order. Assistive technologies navigate content using the order in which elements appear in the DOM. Hence, make sure that the content is programmatically ordered in such a way that it provides an appropriate reading order to the users of assistive technologies. Make sure that the content that gets available on expanding the link is coded directly after the expandable link in the DOM. This will create an appropriate reading order for the users of assistive technologies. For instance, this will enable them to arrow down onto the expanded content when the link is expanded. *Code Snippet* {code:java} <a href="#" aria-haspopup="true" class="order-options aui-button aui-style-default jira-aui-dropdown2-trigger active" title="Select the field that issues are ordered by." resolved=""><span>Order by Priority</span></a> <div class="check-list-field-container"><div class="assistive" aria-live="polite">10 results available. Type to search and press Tab to navigate through options.</div><input autocomplete="off" placeholder="Search" class="text" id="order-by-options-input" aria-label="Search"><span class="icon-default aui-icon aui-icon-small aui-iconfont-search noloading"></span></div>{code} h3. Workaround Currently there is no known workaround for this behavior. A workaround will be added here when available h3. Environment MacBook Pro (16-inch, 2021) macOS: Sonoma 14.3 Chrome - Version 119.0.6045.105 (Official Build) (64-bit) Firefox- Version 92.0 (64-bit) Safari- Version 16.6 (18615.3.12.11.2) JAWS- Version 2023 NVDA- Version 2021.2 Voiceover - Version Latest |
| Attachment | New: Screenshot 2024-02-12 at 4.17.19 PM.png [ 452021 ] |
| Introduced in Version | New: 9.12 |