Issue Summary

Content appears dynamically when a user activates the "Add" button.

Steps to Reproduce

1. Open the "Filter an issue" page.
2. Navigate to the "Details" link and activate it.
3. Navigate to the "Edit permissions" link and activate it.
4.  Navigate to the mentioned button on the page.
5. Using the screen reader, activate the mentioned button.
6. Listen that there is no indication to understand the content getting updated above.

Screen Recording

Screen Recording 2024-02-16 at 4.44.31 PM.mov

Screenshot

Actual Results

On activating the "Add" buttons, the content gets dynamically updated above.

Although the dynamic change in the content is easier to understand for sighted users, it is not intuitive for screen reader users.

Expected Results

When using a screen reader, users should understand through the instructions that on activating the button, the content will be updated above.

Provide a hidden instruction "Activating "Add" button will update the content above." before the button in the source code using CSS to orient screen reader users about dynamically updating content.

Alternatively, use appropriate ARIA live region attribute or role to achieve this. Specify aria-live="polite" or role=“status” to the container consisting of remaining characters.

For more information, refer to this link: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions

Workaround

Currently, there is no known workaround for this behaviour. A workaround will be added here when available

Environment

MacBook Pro (16-inch, 2021)
macOs Sonoma 14.3
Chrome - Version 120.0.6099.109 (Official Build) (arm64)
Firefox- Version 92.0 (64-bit) 
Safari- Version 17.3 (19617.2.4.11.8)
JAWS- Version 2023
NVDA- Version 2021.2 
Voiceover - Version Latest