<div>
    <p>
        <span><strong>Example 1: </strong>Regular HTML link (no JavaScript or ARIA)</span><br/>
        <a href="https://www.dequeuniversity.com">DequeUniversity.com</a>
    </p>
    <p>
        <span><strong>Example 2: </strong>ARIA link (&lt;span role="link"&gt;), opening in a new window/tab</span><br/>
        <span role="link"  class="text-link" data-link="https://www.dequeuniversity.com" data-target="_blank" >&lt;span&gt; Link</span>
    </p>
    <p>
        <span><strong>Example 3: </strong>ARIA Image link (&lt;img role="link"&gt;), opening in the same window/tab</span><br/>
        <img role="link"  class="logo"  alt="Logo link" src="/assets/images/logos/Deque_DequeU_Logo_White.png" data-link="https://www.dequeuniversity.com" ></img>
    </p>
</div>

<table class="data">
    <tr>
        <th width="150px" >Attribute/Option</th>
        <th>Description</th>
    </tr>
    <tr>
        <td>data-link</td>
        <td>This atrribute/option on an element specifies the URL link to be navigated when an action is performed.
            If this attribute is absent, no action will be performed. 
        </td>
        </tr>
    <tr>
        <td>data-target</td>
        <td>This atrribute/option on an element specifies target window where link is to be opened (similar to the target property for &lt;a&gt;). 
            If this attribute is absent, the link will be opened in the same window/tab. 
        </td>
    </tr>
</table>

class Link {
    constructor(domNode) {
        this.domNode = domNode;
        this.domNode.tabIndex = 0;
        this.domNode.style.cursor = "pointer";
        this.domNode.style.textDecoration = "underline";
        this.domNode.style.textUnderlineOffset = "5px";

        this.domNode.addEventListener('keydown', this.onKeydown.bind(this));
        this.domNode.addEventListener('keyup', this.onKeyup.bind(this));
        this.domNode.addEventListener('click', this.onClick.bind(this));
    }

    gotoLink() {
        if(this.domNode.getAttribute("data-link") != null )
        {
            var url = this.domNode.getAttribute("data-link");
            var target = this.domNode.getAttribute("data-target");
            if(target == null)
                window.location.href = url;
            else
                window.open(url, target).focus();       
        }
    }

    /* EVENT HANDLERS */

    // Make sure to prevent page scrolling on space down
    onKeydown(event) {
        if (event.key === ' ') {
        event.preventDefault();
        }
    }

    onKeyup(event) {
        var flag = false;

        switch (event.key) {
        case ' ':
            this.gotoLink();
            flag = true;
            break;

        case 'Enter':
            this.gotoLink();
            flag = true;
            break;

        
        default:
            break;
        }
        if (flag) {
            event.stopPropagation();
        }
    }

    onClick() {
        this.gotoLink();
    }
}

// Initialize links on the page
window.addEventListener('load', function () {
let links = document.querySelectorAll('[role="link"]');
for (let i = 0; i < links.length; i++) {
new Link(links[i]);
}

});

.logo
{
     width: 32px; height: 32px;
     background-color: black;
     vertical-align: middle;
}

.text-link{
 /*
     margin: 15px;
     padding: 8px; */
}

[role="link"] {
     border: 3px solid transparent;
}
[role="link"]:hover, :focus {
     border: 3px solid blue;
}