-
Bug
-
Resolution: Fixed
-
Low
-
5.11.0
-
Severity 3 - Minor
-
Issue Summary
The expand/collapsed state is not defined for "More" button on the page.
Steps to Reproduce
- Open the "View issue in queue view & comments" page.
- Navigate to the "SLAs" section.
- Using screen reader, navigate to the mentioned button and activate it.
- Listen that the expand/collapse state is not announced for the buttons.
Screenshot
Actual Results
On activating "More" button, the content dynamically gets expanded and collapsed below. The dynamically updating button's state is not defined programmatically.
As a result, screen reader users are not able to understand the button's functionality.
Expected Results
Set 'aria-expanded' attribute to 'false' for the button by default as the button is in the collapsed state. Ensure that the value of 'aria-expanded' attribute changes to 'true' in expanded state on user interaction via scripting. Code Snippet
Code Snippet
<button type="button" aria-expanded="false" aria-label="more" class="css-c3s9do"> <span role="img" class="css-snhnyn" style="--icon-primary-color: currentColor; --icon-secondary-color: var(--ds-surface, #FFFFFF);"></span> </button>
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 Monterey Version 12.3.1
Chrome - Version 101.0.4606.81 (Official Build) (64-bit)
Firefox- Version 93.0 (32-bit)
Safari- Version 15.3 (17612.4.9.1.5)
JAWS- Version 2022
NVDA- Version 2020.3
Voiceover - Version Latest
- mentioned in
-
Page Failed to load
[JSDSERVER-14284] View issue in queue view & comments: Expand/collapse state of the button not defined
| Resolution | New: Fixed [ 1 ] | |
| Status | Original: Waiting for Release [ 12075 ] | New: Closed [ 6 ] |
| Fix Version/s | New: 5.12.1 [ 106162 ] |
| Status | Original: In Progress [ 3 ] | New: Waiting for Release [ 12075 ] |
| Status | Original: Gathering Impact [ 12072 ] | New: In Progress [ 3 ] |
| Status | Original: Needs Triage [ 10030 ] | New: Gathering Impact [ 12072 ] |
| Description |
Original:
h3. Issue Summary
The expand/collapsed state is not defined for "More" button on the page. h3. Steps to Reproduce # Open the "View issue in queue view & comments" page. # Navigate to the "SLAs" section. # Using screen reader, navigate to the mentioned button and activate it. # Listen that the expand/collapse state is not announced for the buttons. h3. Screen Recording h3. Actual Results On activating "More" button, the content dynamically gets expanded and collapsed below. The dynamically updating button's state is not defined programmatically. As a result, screen reader users are not able to understand the button's functionality. h3. Expected Results {noformat} Set 'aria-expanded' attribute to 'false' for the button by default as the button is in the collapsed state. Ensure that the value of 'aria-expanded' attribute changes to 'true' in expanded state on user interaction via scripting. Code Snippet <button type="button" aria-expanded="false" aria-label="more" class="css-c3s9do"> <span role="img" class="css-snhnyn" style="--icon-primary-color: currentColor; --icon-secondary-color: var(--ds-surface, #FFFFFF);"></span> </button>{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 Monterey Version 12.3.1 Chrome - Version 101.0.4606.81 (Official Build) (64-bit) Firefox- Version 93.0 (32-bit) Safari- Version 15.3 (17612.4.9.1.5) JAWS- Version 2022 NVDA- Version 2020.3 Voiceover - Version Latest |
New:
h3. Issue Summary
The expand/collapsed state is not defined for "More" button on the page. h3. Steps to Reproduce # Open the "View issue in queue view & comments" page. # Navigate to the "SLAs" section. # Using screen reader, navigate to the mentioned button and activate it. # Listen that the expand/collapse state is not announced for the buttons. h3. Screenshot !Screenshot 2023-09-29 at 9.03.49 AM.png|width=335,height=163! h3. Actual Results On activating "More" button, the content dynamically gets expanded and collapsed below. The dynamically updating button's state is not defined programmatically. As a result, screen reader users are not able to understand the button's functionality. h3. Expected Results Set 'aria-expanded' attribute to 'false' for the button by default as the button is in the collapsed state. Ensure that the value of 'aria-expanded' attribute changes to 'true' in expanded state on user interaction via scripting. Code Snippet *Code Snippet* {noformat} <button type="button" aria-expanded="false" aria-label="more" class="css-c3s9do"> <span role="img" class="css-snhnyn" style="--icon-primary-color: currentColor; --icon-secondary-color: var(--ds-surface, #FFFFFF);"></span> </button>{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 Monterey Version 12.3.1 Chrome - Version 101.0.4606.81 (Official Build) (64-bit) Firefox- Version 93.0 (32-bit) Safari- Version 15.3 (17612.4.9.1.5) JAWS- Version 2022 NVDA- Version 2020.3 Voiceover - Version Latest |
| Attachment | New: Screenshot 2023-09-29 at 9.03.49 AM.png [ 445118 ] |
| Description |
Original:
h3. Issue Summary
The expand/collapsed state is not defined for "More" button on the page. h3. Steps to Reproduce # Open the "View issue in queue view & comments" page. # Navigate to the "SLAs" section. # Using screen reader, navigate to the mentioned button and activate it. # Listen that the expand/collapse state is not announced for the buttons. h3. Screen Recording h3. Actual Results On activating "More" button, the content dynamically gets expanded and collapsed below. The dynamically updating button's state is not defined programmatically. As a result, screen reader users are not able to understand the button's functionality. h3. Expected Results {noformat} Set 'aria-expanded' attribute to 'false' for the button by default as the button is in the collapsed state. Ensure that the value of 'aria-expanded' attribute changes to 'true' in expanded state on user interaction via scripting. Code Snippet <button type="button" aria-expanded="false" aria-label="more" class="css-c3s9do"> <span role="img" class="css-snhnyn" style="--icon-primary-color: currentColor; --icon-secondary-color: var(--ds-surface, #FFFFFF);"></span> </button>{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 Monterey Version 12.3.1 Chrome - Version 101.0.4606.81 (Official Build) (64-bit) Firefox- Version 93.0 (32-bit) Safari- Version 15.3 (17612.4.9.1.5) JAWS- Version 2022 NVDA- Version 2020.3 Voiceover - Version Latest |
New:
h3. Issue Summary
The expand/collapsed state is not defined for "More" button on the page. h3. Steps to Reproduce # Open the "View issue in queue view & comments" page. # Navigate to the "SLAs" section. # Using screen reader, navigate to the mentioned button and activate it. # Listen that the expand/collapse state is not announced for the buttons. h3. Screen Recording h3. Actual Results On activating "More" button, the content dynamically gets expanded and collapsed below. The dynamically updating button's state is not defined programmatically. As a result, screen reader users are not able to understand the button's functionality. h3. Expected Results {noformat} Set 'aria-expanded' attribute to 'false' for the button by default as the button is in the collapsed state. Ensure that the value of 'aria-expanded' attribute changes to 'true' in expanded state on user interaction via scripting. Code Snippet <button type="button" aria-expanded="false" aria-label="more" class="css-c3s9do"> <span role="img" class="css-snhnyn" style="--icon-primary-color: currentColor; --icon-secondary-color: var(--ds-surface, #FFFFFF);"></span> </button>{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 Monterey Version 12.3.1 Chrome - Version 101.0.4606.81 (Official Build) (64-bit) Firefox- Version 93.0 (32-bit) Safari- Version 15.3 (17612.4.9.1.5) JAWS- Version 2022 NVDA- Version 2020.3 Voiceover - Version Latest |
| Assignee | New: Amisha - [ ad6a80463119 ] |
| Labels | Original: 4.1.2 Level-A WCAG21 ax-at-user ax-bug ax-critical-priority ax-jsm-dc-vpat ax-jsm-dc-vpat-Viewissueinqueueview&comments ax-jsm-dc-vpat-pg10 ax-qa | New: 4.1.2 Level-A WCAG21 ax-at-user ax-bug ax-critical-priority ax-jsm-dc-vpat ax-jsm-dc-vpat-Viewissueinqueueview&comments ax-jsm-dc-vpat-pg10 ax-qa himalaya |