-
Type:
Bug
-
Resolution: Fixed
-
Priority:
High
-
None
-
Affects Version/s: CCMA - 3.10.3
-
Component/s: Confluence - Migration Assistant
-
Severity 3 - Minor
-
Accessibility
Issue Summary
The keyboard focus is not restricted in the modal dialog.
Steps to Reproduce
- Open the Confluence instance.
- Navigate to the site navigation and activate the "Administration" control.
- Navigate to "General configuration" and activate it.
- Navigate to "Migration Assistant" and activate it to open the migration assistant.
- Using a screen reader or keyboard, activate the "Begin Assessing/View app assessment" and "Begin Preparing" buttons to open a modal.
- Navigate through the dialog content by pressing Tab or Shift + Tab, and observe that the background content receives focus.
- While navigating with the virtual cursor (up/down arrow keys), listen for the background content being announced.
Screen Recording 1:
Screen Recording 2:
https://jira.atlassian.com/secure/attachment/471317/Screen%20Recording2.mkv
Actual Results
Keyboard focus is not restricted in the "Assess your apps" and "Connect to cloud" modal dialogs. As a result, focus moves to the background content when users press Shift + Tab from the first interactive element or Tab from the last interactive element of the modal dialog. The same behavior occurs when users navigate using the virtual cursor (up and down arrow keys) of a screen reader, as the background content is also read out. This creates a confusing experience for screen reader and keyboard-only users.
Expected Results
Focus should be restricted in the modal dialog while navigating with a screen reader or keyboard.
Apply the following changes:
- Use aria-modal="true", aria-hidden=”true” and tabindex="-1" to hide the background content from screen readers and keyboard-only users.
- Ensure that "aria-hidden" and tabindex="-1" attributes are removed from the page source when user closes the modal dialog.
- Modify the scripts to ensure that the Tab and Shift + Tab keystrokes wrap the keyboard focus inside the modal dialog in all browsers.
For information on creating accessible modal dialogs, refer to:
https://www.w3.org/WAI/ARIA/apg/example-index/dialog-modal/dialog.html
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.7
Operations - Windows11
Chrome - Version 131.0.6778.70 (Official Build) (64-bit)
Safari- Version 18.0
Firefox- Version 131.0.3 (64-bit)
JAWS- Version 2023
NVDA- Version 2024.4
VoiceOver - Version Latest