Rebasing Cannot be undone Modal :Modal dialog inaccessible for keyboard-only and screen reader users

XMLWordPrintable

      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

      1. Launch the URL
      2. Navigate to the More actions button in the main content area beside Merge button.
      3. Activate Rebase option from the list of more options.
      4. 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

              Assignee:
              Oleksandr Mazepa (Inactive)
              Reporter:
              Matthew Brennan
              Votes:
              0 Vote for this issue
              Watchers:
              3 Start watching this issue

                Created:
                Updated:
                Resolved: