I am working on making some cards more accessible. To do so, I need to use JavaScript to take the one link from the Card Title and apply it to all elements inside the card.

It is working relatively well.

The problem, though, is that it is opening the link in a new TAB every time I click. Not just when I hold down CMD (Mac).

I know some users (like me) love this. But it is over riding the default behaviour and I'd like to some how find a way to get window.open(url) to just follow the default behaviours that the user is used to using.

I've tried:

window.open(url, "_blank")
window.open(url, "_self")
window.open(url, "_top")

JavaScript below:

        function cardLinks() {
            let cards = document.querySelectorAll(".card");

            cards.forEach(function (box) {
                let link = box.querySelector("a");
                if (link) {
                    let url = link.getAttribute("href");
                    box.addEventListener("click", function () {
                        window.open(url)

                    });
                }
            });
        }
        document.addEventListener("DOMContentLoaded", function () {
            if ("querySelector" in document) {
                cardLinks();
            }
        });

If you have read this far, the reason this is important (to me at least) is that having seperate link tags on the HTML card element is a nightmare for accessibility users. As they need to tab through multiple links. Having an event handler on all the children of the card means that it works well for accessibility users and visual users.

Hope someone can help.