Details
-
Bug
-
Resolution: Fixed
-
High
-
7.21.0
-
Severity 2 - Major
-
0
-
Description
Issue Summary
The Rebase Modal dialog is inaccessible for keyboard-only and screen reader users since aria-hidden="true" is used on informative content making it inaccessible to assistive technology.
Steps to Reproduce
- Launch the URL
- Navigate to the More actions button in the main content area beside Merge button.
- Activate Rebase option from the list of more options.
- With the screen reader on try to navigate to the active modal which become available on activating Rebase option.
Actual Results
Activating the "Rebase" option from the More actions triggers a modal dialog. The following issues were found for the modal dialog:
- The modal does not receive keyboard or screen reader focus when the modal is active. aria-hidden =”true” and tabindex="-1" are given in the modal which do not allow the focus to be set in the modal.
- Keyboard focus does not remain within the boundaries of the modal dialog. So, focus moves on the background content when users press the "Shift" + "Tab" keys from the first interactive element or "Tab" key from the last interactive element of the modal dialog.
- Screen reader users found it difficult to distinguish between background and the modal dialog content.
Expected Results
Apply the following changes:
- Set the keyboard focus to first interactive element such as image button of the modal dialog using the javascript .focus().
- Add role="dialog" and "aria-labelledby" attribute to the <div> element containing the modal dialog content.
- Specify "id" attribute with unique value to the <div> element containing the "Rebasing cannot be undone" heading and reference it via "aria-labelledby" attribute.
- Ensure that the background content is not available and only the content displayed in the modal dialog is available for keyboard-only and screen reader users:
- Use aria-hidden =”true” and tabindex="-1" to hide the background content from screen readers. Ensure that "aria-hidden" attribute is 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.
- Modify the scripts to ensure that the functionality is accessible with a keyboard as well as a mouse.
Screenshot
Screen Recording
Screen Recording 2022-04-28 at 3.01.00 PM.mov
Workaround
Currently, there is no known workaround for this behaviour. A workaround will be added here when available.
Bug Ref: 738542