Skip to content

Accessibility text missing for all but last link that opens in new tab #2744

Closed
@HitmanInWis

Description

Bug present as of 2.24.7-SNAPSHOT

Bug File: apps/core/wcm/components/commons/site/clientlibs/link/js/link.js

Issue: JS functionality attempts to add accessibility text to all links with target="_blank" that tells the reader that the link opens in a new tab. However, it only successfully adds the link to the last applicable <a> on the page.

For reference, the JS adds a span like this: <span class="cmp-link__screen-reader-only">opens in a new tab</span>

The bug is that b/c the DOM element is only created once in the code and then inserted into every applicable <a>, inserting it into each subsequent <a> removes it from the previous one it was added to, thus leaving it on only the final one.

To fix the issue, update the code from:

            var linkAccessibilityElement = document.createElement("span");
            linkAccessibilityElement.classList.add(linkAccessibilityClass);
            linkAccessibilityElement.innerText = linkAccessibilityText;
            document.querySelectorAll("a[target='_blank']").forEach(function(link) {
                if (!link.querySelector(selectors.linkAccessibility)) {
                    link.insertAdjacentElement("beforeend", linkAccessibilityElement);
                }
            });

TO:

            document.querySelectorAll("a[target='_blank']").forEach(function(link) {
                if (!link.querySelector(selectors.linkAccessibility)) {
                    var linkAccessibilityElement = document.createElement("span");
                    linkAccessibilityElement.classList.add(linkAccessibilityClass);
                    linkAccessibilityElement.innerText = linkAccessibilityText;
                    link.insertAdjacentElement("beforeend", linkAccessibilityElement);
                }
            });

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions