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

Insert Redirect Macro Dialog: Incorrect semantic role and label on interactive element

XMLWordPrintable

      Issue Summary

      The "Preview" interactive element is implemented as a link instead of a button and is incorrectly labeled as "Refresh".

      Steps to Reproduce

      1. Open the Confluence DC instance.
      2. Navigate to the header section, activate the "Spaces" control, and open any space.
      3. In the main content area, open any existing page and activate the "Edit" control.
      4. In the Toolbar, select "Insert more content" and then click on "Other macros".
      5. In the Search form field, type "Redirect", then activate the "Redirect" control to open the modal dialog.
      6. Navigate to the mentioned interactive element and inspect the code.
      7. Notice that it is implemented using the <a> instead of a <button> and labeled "Refresh".

      Screen Recording

      Preview Control.mp4

      Actual Results

      When screen reader users navigate through the "Insert Redirect Macro" dialog, the "Preview" interactive element is detected as a link (<a> element) instead of a button (<button> element), and it is incorrectly labeled as "Refresh".

      This issue occurs because the interactive element is implemented using the <a> tag instead of a <button>, and the label is incorrectly set to "Refresh".

      As a result, this causes confusion for screen reader users regarding the element's role and label.

      Expected Results

      Ensure that the appropriate role and label are conveyed to screen reader users.

      In this case, the interactive element should be conveyed as a button and labeled as "Preview".

      Apply the following changes:

      • Replace the <a> element with a <button> element.
      • Add the "aria-labelledby" attribute with a unique value to the <button> element.
      • Add the "id" attribute to the <span> element containing the "Preview" text.
      • Reference the value of the "aria-labelledby" attribute to the "id" attribute.
      • Ensure that the values of both the "aria-labelledby" and "id" attributes match.
      • Modify the scripts to ensure that the button functions correctly.

       

      Code Snippet:

      <button aria-labelledby="testLabel"></button>

      (....)

      <span id="testLabel">Preview</span>

      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 Sequoia 15.4.1
      Operations - Windows11
      Chrome - Version 135.0.7049.42 (Official Build) (64-bit)
      Safari- Version 18.4
      Firefox- Version 135.0 (64-bit)
      JAWS- Version 2023
      NVDA- Version 2024.4.2
      VoiceOver - Version Latest

        1. Preview Control.mp4
          14.84 MB
        2. Screen Reader Announcement.mp4
          14.36 MB

              bb797b5e39e7 Judy Lim
              deddb3877943 Chirag Goyal
              Votes:
              0 Vote for this issue
              Watchers:
              4 Start watching this issue

                Created:
                Updated:
                Resolved: