Uploaded image for project: 'Bitbucket Data Center'
  1. Bitbucket Data Center
  2. BSERV-13216

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

    XMLWordPrintable

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

    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

    Attachments

      1. Screen Recording 2022-04-28 at 3.01.00 PM.mov
        11.32 MB
        Akhilesh Paradhi
      2. Screen Recording 2023-04-18 at 3.32.56 PM.mov
        42.27 MB
        Rahil Shaikh
      3. Screenshot 2022-04-28 at 2.54.18 PM.png
        1.24 MB
        Akhilesh Paradhi
      4. Screenshot 2023-01-30 at 6.15.49 PM.png
        696 kB
        Rahil Shaikh

      Issue Links

        Activity

          People

            34549e788464 Oleksandr Mazepa
            12b69dcabe29 Matthew Brennan
            Votes:
            0 Vote for this issue
            Watchers:
            3 Start watching this issue

            Dates

              Created:
              Updated:
              Resolved: