Issue Summary

The hidden <button> element is read by screen reader.

Steps to Reproduce

1. Open the "Project" page.
2. Navigate to the "Sidebar".
3. Navigate to the "Add shortcut" button and activate it.
4. A non-modal dialog appears on the page.
5. Add any shortcut.
6. Navigate to the "Filter" button and activate it.
7. Navigate to the "Edit" interactive element and activate it.
8. A modal dialog appears on the page.
9. Using screen reader, navigate to the mentioned hidden <button> element.
10. Observe that the button is announced by screen reader.

Screenshot

Screen Recording

[JDV-1] Kanban cards represent work items __ Click the JDV-1 link at the top of this card to show the Detail view - there's more on Kanban in the 'Description' section - InstEnv Jira - Google Chrome 2025-01-17 16-52-21.mp4

Actual Results

When screen reader users navigate the modal dialog using 'left and right' arrow keys, the hidden <button> element is read by the screen reader.

As a result, this will create a poor experience and cause confusion for screen reader users.

Expected Results

Ensure that the screen reader does not read hidden content for users.Provide aria-hidden="true" to the mentioned hidden <button> element.

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 131.0.6778.265 (Official Build) (64-bit)
Firefox- Version 134.0.1 (32-bit)
Safari- Version 18.1.1 (20619.2.8.11.12)
JAWS- Version 2023
NVDA- Version 2024.4.2
Voiceover - Version Latest