<div class="dqu-example">
<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 (<code>&lt;span role="link"&gt;</code>), 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 (<code>&lt;img role="link"&gt;</code>), opening in the same window/tab</span><br/>
        <img role="link"  class="logo"  alt="Link to Deque University" 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><code>data-link</code></td>
        <td>This attribute/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><code>data-target</code></td>
        <td>This attribute/option on an element specifies target window where link is to be opened (similar to the target property for <code>&lt;a&gt;</code>).
            If this attribute is absent, the link will be opened in the same window/tab.
        </td>
    </tr>
</table>
</div>

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]);
}

});

/*
  Link — Restyled
  Deque University ARIA Component
*/

:root {
  --dqu-interactive: #2e5f7a;
  --dqu-interactive-light: rgba(46, 95, 122, 0.08);
  --dqu-bg-secondary: #f6f3ed;
  --dqu-border-secondary: #8c827d;
  --dqu-text-primary: #21201e;
  --dqu-font-family: "Noto Sans", sans-serif;
}

.dqu-example a, [role="link"] {
  color: var(--dqu-interactive);
  text-decoration: underline;
  font-family: var(--dqu-font-family);
  cursor: pointer;
}

/* Text link hover — tinted background. Excludes image links so the
   logo stays visible. */
.dqu-example a:hover,
[role="link"]:not(img):hover {
  background-color: var(--dqu-interactive-light);
}

[role="link"]:not(img) {
  border: 2px solid transparent;
  border-radius: 4px;
  padding: 2px 4px;
}

[role="link"]:not(img):hover {
  border-color: var(--dqu-interactive);
}

[role="link"]:focus-visible,
.dqu-example a:focus-visible {
  outline: 3px solid var(--dqu-interactive) !important;
  outline-offset: 2px;
}

[role="link"]:focus:not(:focus-visible),
.dqu-example a:focus:not(:focus-visible) {
  outline: none !important;
}

/* Image link — keep the dark logo plate, use an outline for hover
   so the image remains fully visible. */
img[role="link"].logo {
  width: 32px;
  height: 32px;
  background-color: #21201e;
  vertical-align: middle;
  border-radius: 4px;
  padding: 4px;
}

img[role="link"].logo:hover {
  outline: 3px solid var(--dqu-interactive) !important;
  outline-offset: 2px;
}

/* Data table */
table.data {
  border-collapse: collapse;
  font-family: var(--dqu-font-family);
  font-size: 0.9375rem;
  margin-top: 16px;
}

table.data th,
table.data td {
  border: 1px solid var(--dqu-border-secondary);
  padding: 10px 12px;
  text-align: left;
  color: var(--dqu-text-primary);
}

table.data th {
  background: var(--dqu-bg-secondary);
  font-weight: 600;
}

.text-link {
  /* No additional styles needed */
}

.dqu-example p {
  font-family: var(--dqu-font-family);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--dqu-text-primary);
  margin-bottom: 28px;
}

/* Add breathing room between the example label line and the link itself
   so the link's focus/hover outline does not overlap the text above. */
.dqu-example p a,
.dqu-example p [role="link"] {
  display: inline-block;
  margin-top: 10px;
}