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

Closed
HitmanInWis opened this issue May 3, 2024 · 0 comments · Fixed by #2832
Closed

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

HitmanInWis opened this issue May 3, 2024 · 0 comments · Fixed by #2832

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);
                }
            });
@vladbailescu vladbailescu added this to the 2.27.0 milestone Aug 5, 2024
vladbailescu added a commit that referenced this issue Aug 5, 2024
* Creating separate elements for each link

Fixes #2744, SITES-23879
vladbailescu added a commit that referenced this issue Aug 6, 2024
#2832)

* Creating separate elements for each link

Fixes #2744, SITES-23879
@LSantha LSantha removed this from the 2.27.0 milestone Sep 10, 2024
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

Successfully merging a pull request may close this issue.

3 participants