Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
HitmanInWis opened this issue May 3, 2024 · 0 comments
Open

Comments

@HitmanInWis
Copy link

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);
                }
            });
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant