Uploaded image for project: 'Confluence Data Center'
  1. Confluence Data Center
  2. CONFSERVER-90777

Create new page : Off-screen interactive elements receive keyboard focus

XMLWordPrintable

      Issue Summary

      On the “Create page” page, the off-screen "Edit", "Choose file:" buttons, and the link after "Keyboard shortcut help" receive keyboard focus.

      Note: A similar issue is observed on the "Comments" page.

      Steps to Reproduce

      1. Navigate to the above mentioned page.
      2. Use keyboard to tab through the interactive elements on the page.
      3. Observe that invisible interactive elements receive keyboard focus.

      Screen Recording 1

      Screen Recording 2023-08-17 at 4.25.12 PM.mov

      Screen Recording 2

      Screen Recording 2023-09-15 at 4.36.48 PM.mov

      Actual Results

      When the page is navigated with a keyboard, the "Edit", "Choose file:", and the link after "Keyboard shortcut help" receive keyboard focus even when these interactive elements are not visually available on the screen. This might confuse or mislead keyboard and screen reader users.

      Expected Results

      The invisible interactive elements should not receive keyboard focus on the page. In this case, make sure that off-screen elements do not receive keyboard focus. If they are not meant to be interactive at any point, remove the elements from the DOM, comment them out, or remove them from the focus order. To remove these off-screen interactive elements from the focus order, use HTML “hidden” or CSS “display:none”. If this is not possible, use aria-hidden=”true” and tabindex=”-1” on the same interactive elements. Both the methods will remove the elements from the focus order. As well, when these elements are visually available on the page, make sure that these attributes are removed from these interactive elements.

      Code Snippet

       

      <button hidden>...</button> <button class="visuallyOffScreen" tabindex="-1" aria-hidden="true">...</button>

      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.4
      Chrome - Version 103.0.5060.134 (Official Build) (arm64)
      Firefox- Version 93.0 (32-bit)
      Safari- Version 15.5 (17613.2.7.1.8)
      JAWS- Version 2023
      NVDA- Version 2023.3
      Voiceover - Version Latest

        1. Screen Recording 2023-08-17 at 4.25.12 PM.mov
          5.17 MB
        2. Screen Recording 2023-09-15 at 4.36.48 PM.mov
          16.15 MB
        3. image-2024-02-20-14-24-24-460.png
          image-2024-02-20-14-24-24-460.png
          14 kB
        4. Screen Recording 2024-02-23 at 10.00.45 AM.mov
          12.52 MB

            [CONFSERVER-90777] Create new page : Off-screen interactive elements receive keyboard focus

            Kshitij Rastogi added a comment -

            A fix for this issue is available in Confluence Server and Data Center 8.9.0.
            Upgrade now or check out the Release Notes to see what other issues are resolved.

            Kshitij Rastogi added a comment - A fix for this issue is available in Confluence Server and Data Center 8.9.0. Upgrade now or check out the Release Notes to see what other issues are resolved.

              zxu2@atlassian.com Zac Xu
              773dd3a38dd5 Cynthia Singh
              Affected customers:
              0 This affects my team
              Watchers:
              3 Start watching this issue

                Created:
                Updated:
                Resolved: