Create Page: ARIA role defined inappropriately

XMLWordPrintable

    • Minor
    • Accessibility

      Issue Summary

      The role="button" is defined incorrectly for the "Google" inline link.

      Steps to Reproduce

      1. Open the homepage of Confluence.
      2. Navigate to the header, activate "Spaces", and open any space.
      3. Navigate to the main content area and open any page.
      4. Navigate to the "Edit this page" link and activate it.
      5. Navigate to the editor and insert a link using the "CTRL+K" keyboard shortcut.
      6. Navigate to the "Search or paste link" field and type the URL "https://www.google.com".
      7. Navigate to the "Display Text" field and type "Google" and activate "Insert" button.
      8. Press the "ALT+F10" keyboard shortcut to move to the floating toolbar, then activate the "Inline" button.
      9. Navigate to "Update" and activate it.
      10. Navigate to the inserted link and inspect the code.
      11. Observe that the role="button" is added incorrectly.
      12. Using a screen reader, navigate to the inserted link and observe that it is announced as a button instead of a link.

      Screen Recording

      Screen Recording Inline Link.mkv

      Actual Results

      When screen reader users navigate to the inline link on the page using the "Tab" or "Down Arrow" key, or pull up the elements list using the "Insert+F7" keyboard shortcut in the NVDA screen reader, the "Google" inline link is not rendered as a link by the screen reader. Instead, it is incorrectly rendered as a button. However, when activating this link, the user is redirected to a new page.

      This occurs because the role="button" is incorrectly specified for the <a> element of the link.

      As a result, screen reader users are communicated with incorrect role information.

      Expected Results

      Ensure that the screen reader conveys the appropriate role information to the users.

      In this scenario, remove the role="button" from the <a> element.

      Code Snippet:

      <a href="https://www.google.com" class="css-118vsk3 e26bri0">  <span class="css-1cwva94 e1a3lu072">
          <img class="smart-link-icon" src="https://www.google.com/favicon.ico" alt="">    <span class="smart-link-title-wrapper">Google</span>
        </span>
      </a>
       

      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

            Assignee:
            Unassigned
            Reporter:
            Chirag Goyal
            Votes:
            0 Vote for this issue
            Watchers:
            2 Start watching this issue

              Created:
              Updated: