@aurodesignsystem-dev/auro-hyperlink 0.0.0-pr343.0 → 0.0.0-pr345.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/demo/html5-only.html +59 -0
- package/demo/html5-only.md +140 -0
- package/demo/why-hyperlink.html +58 -0
- package/demo/why-hyperlink.md +127 -0
- package/package.json +1 -1
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
<!--
|
|
2
|
+
Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
3
|
+
See LICENSE in the project root for license information.
|
|
4
|
+
|
|
5
|
+
HTML in this document is standardized and NOT to be edited.
|
|
6
|
+
All demo code should be added/edited in ./demo/index.md
|
|
7
|
+
|
|
8
|
+
With the exception of adding custom elements if needed for the demo.
|
|
9
|
+
|
|
10
|
+
----------------------- DO NOT EDIT -----------------------------
|
|
11
|
+
|
|
12
|
+
-->
|
|
13
|
+
|
|
14
|
+
<!DOCTYPE html>
|
|
15
|
+
<html lang="en">
|
|
16
|
+
<head>
|
|
17
|
+
<meta charset="UTF-8" />
|
|
18
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
19
|
+
<title>Auro Web Component Demo | auro-hyperlink</title>
|
|
20
|
+
<link rel="stylesheet" type="text/css" href="./elementDemoStyles.css" />
|
|
21
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
|
|
22
|
+
|
|
23
|
+
<!-- Prism.js Stylesheet -->
|
|
24
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"/>
|
|
25
|
+
|
|
26
|
+
<!-- Legacy reference is still needed to support auro-hyperlink's use of legacy token values at this time -->
|
|
27
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/legacy/auro-classic/CSSCustomProperties.css"/>
|
|
28
|
+
|
|
29
|
+
<!-- Design Token Alaska Theme -->
|
|
30
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/themes/alaska/CSSCustomProperties--alaska.min.css"/>
|
|
31
|
+
|
|
32
|
+
<!-- Webcore Stylesheet Alaska Theme -->
|
|
33
|
+
<!-- <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/themes/alaska.global.min.css" /> -->
|
|
34
|
+
<link rel="stylesheet" type="text/css" href="./hawaiian.global.css" />
|
|
35
|
+
|
|
36
|
+
<!-- Demo Specific Styles -->
|
|
37
|
+
</head>
|
|
38
|
+
<body class="auro-markdown">
|
|
39
|
+
<main></main>
|
|
40
|
+
|
|
41
|
+
<script type="module">
|
|
42
|
+
import 'https://cdn.jsdelivr.net/npm/marked@latest/marked.min.js';
|
|
43
|
+
import 'https://cdn.jsdelivr.net/npm/prismjs@latest/prism.js';
|
|
44
|
+
fetch('./html5-only.md')
|
|
45
|
+
.then((response) => response.text())
|
|
46
|
+
.then((text) => {
|
|
47
|
+
const rawHtml = marked.parse(text);
|
|
48
|
+
document.querySelector('main').innerHTML = rawHtml;
|
|
49
|
+
Prism.highlightAll();
|
|
50
|
+
});
|
|
51
|
+
</script>
|
|
52
|
+
<script defer type="module" src="./index.min.js"></script>
|
|
53
|
+
|
|
54
|
+
<!-- If additional elements are needed for the demo, add them here. -->
|
|
55
|
+
<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/+esm" type="module"></script>
|
|
56
|
+
<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-header@latest/+esm" type="module"></script>
|
|
57
|
+
<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-icon@latest/+esm" type="module"></script>
|
|
58
|
+
</body>
|
|
59
|
+
</html>
|
|
@@ -0,0 +1,140 @@
|
|
|
1
|
+
<auro-header level="1">HTML5 only with Web Core Style Sheets</auro-header>
|
|
2
|
+
<p>For situations where the <code><auro-hyperlink></code> web component cannot be used, <auro-hyperlink href="https://alaskaairlines.github.io/WebCoreStyleSheets/" target="_blank">Web Core Style Sheets</auro-hyperlink> (WCSS) provides CSS classes that can be applied to a native HTML <code><a></code> element to achieve a similar visual appearance. This approach gives you design-system-aligned styling without requiring a custom element.</p>
|
|
3
|
+
<auro-header level="2">Available CSS classes</auro-header>
|
|
4
|
+
<p>WCSS includes the <code>.hyperlink</code> class and its modifiers as part of the <code>essentials</code> module. To use them, import the essentials stylesheet:</p>
|
|
5
|
+
<pre><code>@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/essentials";</code></pre>
|
|
6
|
+
<auro-header level="3">Base hyperlink</auro-header>
|
|
7
|
+
<p>Apply the <code>.hyperlink</code> class to any <code><a></code> element:</p>
|
|
8
|
+
<div class="exampleWrapper">
|
|
9
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/wcss-hyperlink.html) -->
|
|
10
|
+
<!-- The below content is automatically added from ./../apiExamples/wcss-hyperlink.html -->
|
|
11
|
+
<a href="https://www.alaskaair.com" class="hyperlink">Alaska Airlines</a>
|
|
12
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
13
|
+
</div>
|
|
14
|
+
<auro-accordion alignRight>
|
|
15
|
+
<span slot="trigger">See code</span>
|
|
16
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/wcss-hyperlink.html) -->
|
|
17
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/wcss-hyperlink.html -->
|
|
18
|
+
|
|
19
|
+
```html
|
|
20
|
+
<a href="https://www.alaskaair.com" class="hyperlink">Alaska Airlines</a>
|
|
21
|
+
```
|
|
22
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
23
|
+
</auro-accordion>
|
|
24
|
+
<auro-header level="3">Dark background (inverse) variant</auro-header>
|
|
25
|
+
<p>Use the <code>.hyperlink--ondark</code> modifier for links on dark backgrounds:</p>
|
|
26
|
+
<div class="exampleWrapper--ondark">
|
|
27
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/wcss-hyperlink-ondark.html) -->
|
|
28
|
+
<!-- The below content is automatically added from ./../apiExamples/wcss-hyperlink-ondark.html -->
|
|
29
|
+
<a href="https://www.alaskaair.com" class="hyperlink hyperlink--ondark">Alaska Airlines</a>
|
|
30
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
31
|
+
</div>
|
|
32
|
+
<auro-accordion alignRight>
|
|
33
|
+
<span slot="trigger">See code</span>
|
|
34
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/wcss-hyperlink-ondark.html) -->
|
|
35
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/wcss-hyperlink-ondark.html -->
|
|
36
|
+
|
|
37
|
+
```html
|
|
38
|
+
<a href="https://www.alaskaair.com" class="hyperlink hyperlink--ondark">Alaska Airlines</a>
|
|
39
|
+
```
|
|
40
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
41
|
+
</auro-accordion>
|
|
42
|
+
<auro-header level="3">Navigation variant</auro-header>
|
|
43
|
+
<p>Use the <code>.hyperlink--nav</code> modifier for navigation-style links:</p>
|
|
44
|
+
<div class="exampleWrapper">
|
|
45
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/wcss-hyperlink-nav.html) -->
|
|
46
|
+
<!-- The below content is automatically added from ./../apiExamples/wcss-hyperlink-nav.html -->
|
|
47
|
+
<a href="https://www.alaskaair.com" class="hyperlink hyperlink--nav">Alaska Airlines</a>
|
|
48
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
49
|
+
</div>
|
|
50
|
+
<auro-accordion alignRight>
|
|
51
|
+
<span slot="trigger">See code</span>
|
|
52
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/wcss-hyperlink-nav.html) -->
|
|
53
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/wcss-hyperlink-nav.html -->
|
|
54
|
+
|
|
55
|
+
```html
|
|
56
|
+
<a href="https://www.alaskaair.com" class="hyperlink hyperlink--nav">Alaska Airlines</a>
|
|
57
|
+
```
|
|
58
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
59
|
+
</auro-accordion>
|
|
60
|
+
<auro-header level="2">What you lose without auro-hyperlink</auro-header>
|
|
61
|
+
<p>While WCSS classes replicate the <strong>visual styling</strong> of <code>auro-hyperlink</code>, they provide <strong>CSS only</strong>. The following functionality built into the <code>auro-hyperlink</code> web component is <strong>not available</strong> when using plain HTML with WCSS classes:</p>
|
|
62
|
+
<auro-header level="3">URL sanitization and HTTPS enforcement</auro-header>
|
|
63
|
+
<p><code>auro-hyperlink</code> automatically blocks dangerous URL protocols (<code>javascript:</code>, <code>data:</code>, <code>vbscript:</code>) and upgrades URLs to <code>https:</code>. A plain <code><a></code> element with WCSS classes will render whatever <code>href</code> value is provided, including potentially dangerous URLs. You must sanitize URLs manually.</p>
|
|
64
|
+
<auro-header level="3">Automatic external link and new window icons</auro-header>
|
|
65
|
+
<p><code>auro-hyperlink</code> detects <code>target="_blank"</code> links and automatically displays the appropriate icon — an external-link icon for cross-domain links or a new-window icon for same-domain links. With WCSS classes, you must add these icons manually.</p>
|
|
66
|
+
<auro-header level="3">Automatic rel security attributes</auro-header>
|
|
67
|
+
<p><code>auro-hyperlink</code> automatically adds <code>rel="noOpener noReferrer"</code> to external links opened in new tabs to prevent reverse tabnapping. With a plain <code><a></code> element, you must remember to add these attributes yourself on every external link.</p>
|
|
68
|
+
<auro-header level="3">Referrer policy management</auro-header>
|
|
69
|
+
<p><code>auro-hyperlink</code> provides a <code>referrerpolicy</code> attribute that sets <code>strict-origin-when-cross-origin</code> and adjusts the <code>rel</code> attribute accordingly. With WCSS, you must manage the <code>referrerpolicy</code> and <code>rel</code> attributes manually and keep them in sync.</p>
|
|
70
|
+
<auro-header level="3">ARIA attribute transportation</auro-header>
|
|
71
|
+
<p>When <code>auro-hyperlink</code> is used inside other web components, it automatically transports ARIA attributes from the host element to the inner <code><a></code> element across the shadow DOM boundary. With a plain <code><a></code> element, this is not a concern outside of shadow DOM, but it also means you cannot use WCSS-styled anchors as drop-in replacements inside Auro component compositions that expect this behavior.</p>
|
|
72
|
+
<p>For example, when an <code>auro-hyperlink</code> is placed in an <code>auro-popover</code> trigger slot, the popover component sets <code>aria-description</code> on the trigger to announce the popover content to screen readers. <code>auro-hyperlink</code> automatically transports that <code>aria-description</code> down to the inner <code><a></code> element in its shadow DOM, so screen readers announce it correctly. A plain <code><a class="hyperlink"></code> element would work as a popover trigger outside of shadow DOM, but it cannot participate in this cross-shadow-DOM ARIA contract — and as the <code>auro-popover</code> documentation notes, using a hyperlink as a trigger is discouraged because the tap event on mobile will fire both the popover and the navigation. The recommended pattern is to use <code>auro-hyperlink</code> with <code>role="button"</code> instead.</p>
|
|
73
|
+
<auro-header level="3">Call-to-action (CTA) variant</auro-header>
|
|
74
|
+
<p><code>auro-hyperlink</code> provides a <code>type="cta"</code> mode that renders a fully styled button-link powered by <code>auro-button</code>, with support for <code>primary</code>, <code>secondary</code>, <code>tertiary</code>, <code>ghost</code>, and <code>flat</code> variants, fluid width, and inverse appearance. The <code>.auro_roleButton</code> WCSS class provides only basic button styling and does not support these variants.</p>
|
|
75
|
+
<auro-header level="3">Focus delegation</auro-header>
|
|
76
|
+
<p><code>auro-hyperlink</code> uses <code>delegatesFocus</code> to ensure proper focus forwarding within its shadow DOM. This is a web component concern and does not apply to plain <code><a></code> elements, but it means WCSS-styled anchors cannot replicate the focus behavior of <code>auro-hyperlink</code> when used inside shadow DOM contexts.</p>
|
|
77
|
+
<auro-header level="2">Summary</auro-header>
|
|
78
|
+
<table>
|
|
79
|
+
<thead>
|
|
80
|
+
<tr>
|
|
81
|
+
<th>Feature</th>
|
|
82
|
+
<th>WCSS <code>.hyperlink</code></th>
|
|
83
|
+
<th><code>auro-hyperlink</code></th>
|
|
84
|
+
</tr>
|
|
85
|
+
</thead>
|
|
86
|
+
<tbody>
|
|
87
|
+
<tr>
|
|
88
|
+
<td>Design-system-aligned styling</td>
|
|
89
|
+
<td>Yes</td>
|
|
90
|
+
<td>Yes</td>
|
|
91
|
+
</tr>
|
|
92
|
+
<tr>
|
|
93
|
+
<td>Dark background support</td>
|
|
94
|
+
<td>Yes (<code>.hyperlink--ondark</code>)</td>
|
|
95
|
+
<td>Yes (<code>appearance="inverse"</code>)</td>
|
|
96
|
+
</tr>
|
|
97
|
+
<tr>
|
|
98
|
+
<td>Navigation variant</td>
|
|
99
|
+
<td>Yes (<code>.hyperlink--nav</code>)</td>
|
|
100
|
+
<td>Yes (<code>type="nav"</code>)</td>
|
|
101
|
+
</tr>
|
|
102
|
+
<tr>
|
|
103
|
+
<td>URL sanitization</td>
|
|
104
|
+
<td>No</td>
|
|
105
|
+
<td>Automatic</td>
|
|
106
|
+
</tr>
|
|
107
|
+
<tr>
|
|
108
|
+
<td>HTTPS enforcement</td>
|
|
109
|
+
<td>No</td>
|
|
110
|
+
<td>Automatic</td>
|
|
111
|
+
</tr>
|
|
112
|
+
<tr>
|
|
113
|
+
<td>External / new window icons</td>
|
|
114
|
+
<td>No</td>
|
|
115
|
+
<td>Automatic</td>
|
|
116
|
+
</tr>
|
|
117
|
+
<tr>
|
|
118
|
+
<td>Automatic <code>rel</code> attributes</td>
|
|
119
|
+
<td>No</td>
|
|
120
|
+
<td>Automatic</td>
|
|
121
|
+
</tr>
|
|
122
|
+
<tr>
|
|
123
|
+
<td>CTA button variants</td>
|
|
124
|
+
<td>No</td>
|
|
125
|
+
<td>Full variant support</td>
|
|
126
|
+
</tr>
|
|
127
|
+
<tr>
|
|
128
|
+
<td>ARIA attribute transportation</td>
|
|
129
|
+
<td>No</td>
|
|
130
|
+
<td>Automatic</td>
|
|
131
|
+
</tr>
|
|
132
|
+
<tr>
|
|
133
|
+
<td>Multi-brand theming</td>
|
|
134
|
+
<td>Partial (CSS only)</td>
|
|
135
|
+
<td>Full (design tokens + component logic)</td>
|
|
136
|
+
</tr>
|
|
137
|
+
</tbody>
|
|
138
|
+
</table>
|
|
139
|
+
<auro-header level="2">Recommendation</auro-header>
|
|
140
|
+
<p>Use <code>auro-hyperlink</code> whenever possible. Fall back to WCSS <code>.hyperlink</code> classes only in environments where custom elements are not supported or when integrating with third-party systems that require plain HTML.</p>
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
<!--
|
|
2
|
+
Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
3
|
+
See LICENSE in the project root for license information.
|
|
4
|
+
|
|
5
|
+
HTML in this document is standardized and NOT to be edited.
|
|
6
|
+
All demo code should be added/edited in ./demo/index.md
|
|
7
|
+
|
|
8
|
+
With the exception of adding custom elements if needed for the demo.
|
|
9
|
+
|
|
10
|
+
----------------------- DO NOT EDIT -----------------------------
|
|
11
|
+
|
|
12
|
+
-->
|
|
13
|
+
|
|
14
|
+
<!DOCTYPE html>
|
|
15
|
+
<html lang="en">
|
|
16
|
+
<head>
|
|
17
|
+
<meta charset="UTF-8" />
|
|
18
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
19
|
+
<title>Auro Web Component Demo | auro-hyperlink</title>
|
|
20
|
+
|
|
21
|
+
<!-- Prism.js Stylesheet -->
|
|
22
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"/>
|
|
23
|
+
|
|
24
|
+
<!-- Legacy reference is still needed to support auro-hyperlink's use of legacy token values at this time -->
|
|
25
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/legacy/auro-classic/CSSCustomProperties.css"/>
|
|
26
|
+
|
|
27
|
+
<!-- Design Token Alaska Theme -->
|
|
28
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/themes/alaska/CSSCustomProperties--alaska.min.css"/>
|
|
29
|
+
|
|
30
|
+
<!-- Webcore Stylesheet Alaska Theme -->
|
|
31
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/themes/alaska.global.min.css" />
|
|
32
|
+
|
|
33
|
+
<!-- Demo Specific Styles -->
|
|
34
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
|
|
35
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
|
|
36
|
+
</head>
|
|
37
|
+
<body class="auro-markdown">
|
|
38
|
+
<main></main>
|
|
39
|
+
|
|
40
|
+
<script type="module">
|
|
41
|
+
import 'https://cdn.jsdelivr.net/npm/marked@latest/marked.min.js';
|
|
42
|
+
import 'https://cdn.jsdelivr.net/npm/prismjs@latest/prism.js';
|
|
43
|
+
fetch('./why-hyperlink.md')
|
|
44
|
+
.then((response) => response.text())
|
|
45
|
+
.then((text) => {
|
|
46
|
+
const rawHtml = marked.parse(text);
|
|
47
|
+
document.querySelector('main').innerHTML = rawHtml;
|
|
48
|
+
Prism.highlightAll();
|
|
49
|
+
});
|
|
50
|
+
</script>
|
|
51
|
+
<script defer type="module" src="./index.min.js"></script>
|
|
52
|
+
|
|
53
|
+
<!-- If additional elements are needed for the demo, add them here. -->
|
|
54
|
+
<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/+esm" type="module"></script>
|
|
55
|
+
<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-header@latest/+esm" type="module"></script>
|
|
56
|
+
<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-icon@latest/+esm" type="module"></script>
|
|
57
|
+
</body>
|
|
58
|
+
</html>
|
|
@@ -0,0 +1,127 @@
|
|
|
1
|
+
<auro-header level="1">Why auro-hyperlink?</auro-header>
|
|
2
|
+
<p>The native HTML <code><a></code> anchor element provides basic linking, but it falls short for the needs of a secure, accessible, and branded application. <code>auro-hyperlink</code> bridges those gaps with a purpose-built component designed for real-world use.</p>
|
|
3
|
+
<auro-header level="2">Security</auro-header>
|
|
4
|
+
<p>Native anchor elements accept any value in the <code>href</code> attribute, including potentially dangerous protocols like <code>javascript:</code>, <code>data:</code>, and <code>vbscript:</code>. Developers must remember to sanitize URLs manually every time.</p>
|
|
5
|
+
<p><code>auro-hyperlink</code> provides:</p>
|
|
6
|
+
<ul>
|
|
7
|
+
<li><strong>URL sanitization</strong> — Dangerous protocols (<code>javascript:</code>, <code>data:</code>, <code>vbscript:</code>) are blocked automatically. Only safe protocols (<code>https:</code>, <code>tel:</code>, <code>sms:</code>, <code>mailto:</code>) are rendered</li>
|
|
8
|
+
<li><strong>HTTPS enforcement</strong> — Non-localhost URLs are automatically upgraded to <code>https:</code> to prevent accidental insecure links</li>
|
|
9
|
+
<li><strong>Referrer policy control</strong> — The <code>referrerpolicy</code> attribute sets <code>strict-origin-when-cross-origin</code> to limit referrer information sent with requests</li>
|
|
10
|
+
<li><strong>Automatic <code>rel</code> attributes</strong> — External links opened in a new tab (<code>target="_blank"</code>) automatically receive <code>rel="noOpener noReferrer"</code> to prevent reverse tabnapping attacks</li>
|
|
11
|
+
</ul>
|
|
12
|
+
<auro-header level="2">Accessibility</auro-header>
|
|
13
|
+
<p>Native anchor elements require manual ARIA attribute management, and focus behavior is inconsistent across browsers and contexts.</p>
|
|
14
|
+
<p><code>auro-hyperlink</code> provides:</p>
|
|
15
|
+
<ul>
|
|
16
|
+
<li><strong>ARIA attribute transportation</strong> — Accessibility attributes set on the host element are automatically transported to the inner <code><a></code> element inside the shadow DOM, ensuring screen readers receive the correct semantics</li>
|
|
17
|
+
<li><strong>Delegated focus</strong> — <code>delegatesFocus</code> is enabled on the shadow root, so focus is properly forwarded to the interactive element inside the component</li>
|
|
18
|
+
<li><strong>Focus-visible styling</strong> — Clear, high-contrast focus indicators are applied only on keyboard navigation, following the <code>:focus-visible</code> pattern</li>
|
|
19
|
+
<li><strong>Role support</strong> — The <code>role="button"</code> attribute allows the hyperlink to function as a button for screen readers when used for actions rather than navigation</li>
|
|
20
|
+
<li><strong>Reduced motion support</strong> — Animations and transitions respect <code>prefers-reduced-motion</code></li>
|
|
21
|
+
</ul>
|
|
22
|
+
<p>By contrast, a plain <code><a></code> element inside a shadow DOM would require manual focus management and custom ARIA handling that is easy to get wrong.</p>
|
|
23
|
+
<auro-header level="2">External link indicators</auro-header>
|
|
24
|
+
<p>Native anchors provide no visual indication of whether a link navigates to an external site or opens a new window. Users are left without context about what will happen when they click.</p>
|
|
25
|
+
<p><code>auro-hyperlink</code> handles this automatically:</p>
|
|
26
|
+
<ul>
|
|
27
|
+
<li><strong>External link icon</strong> — When <code>target="_blank"</code> points to a domain different from the current site, an external-link icon is displayed</li>
|
|
28
|
+
<li><strong>New window icon</strong> — When <code>target="_blank"</code> points to the same domain, a new-window icon is displayed instead</li>
|
|
29
|
+
<li><strong>Contextual <code>rel</code> attributes</strong> — The <code>rel</code> attribute is set appropriately based on whether the link is internal or external, with or without a referrer policy</li>
|
|
30
|
+
</ul>
|
|
31
|
+
<auro-header level="2">Call-to-action variant</auro-header>
|
|
32
|
+
<p>HTML has no native concept of a link styled as a prominent call-to-action button. Building one from an <code><a></code> element requires custom CSS and careful attention to accessibility.</p>
|
|
33
|
+
<p><code>auro-hyperlink</code> supports this with the <code>type="cta"</code> attribute, providing:</p>
|
|
34
|
+
<ul>
|
|
35
|
+
<li><strong>Button-styled links</strong> — Full button UI powered by <code>auro-button</code> while retaining anchor element semantics and navigation behavior</li>
|
|
36
|
+
<li><strong>Multiple variants</strong> — <code>primary</code>, <code>secondary</code>, <code>tertiary</code>, <code>ghost</code>, and <code>flat</code> variants match the design system's button styles</li>
|
|
37
|
+
<li><strong>Fluid width</strong> — The <code>fluid</code> attribute makes the CTA span the full width of its container</li>
|
|
38
|
+
<li><strong>Appearance support</strong> — Light and dark theme support via <code>appearance="inverse"</code></li>
|
|
39
|
+
</ul>
|
|
40
|
+
<auro-header level="2">Navigation variant</auro-header>
|
|
41
|
+
<p>Native anchors have no built-in concept of navigation-specific link styling (e.g., for menus or nav bars).</p>
|
|
42
|
+
<p><code>auro-hyperlink</code> supports this with the <code>type="nav"</code> attribute, providing:</p>
|
|
43
|
+
<ul>
|
|
44
|
+
<li>Navigation-specific styling with underline-on-focus behavior</li>
|
|
45
|
+
<li>Active tab state management</li>
|
|
46
|
+
<li>Consistent appearance within navigation contexts</li>
|
|
47
|
+
</ul>
|
|
48
|
+
<auro-header level="2">URL protocol support</auro-header>
|
|
49
|
+
<p>Native anchors support <code>tel:</code>, <code>mailto:</code>, and <code>sms:</code> links, but offer no safeguards against misuse of other protocols.</p>
|
|
50
|
+
<p><code>auro-hyperlink</code> handles protocol-specific behavior:</p>
|
|
51
|
+
<ul>
|
|
52
|
+
<li><strong>Safe protocols</strong> — <code>tel:</code>, <code>sms:</code>, and <code>mailto:</code> links are rendered as-is</li>
|
|
53
|
+
<li><strong>Dangerous protocols</strong> — <code>javascript:</code>, <code>data:</code>, and <code>vbscript:</code> links are blocked entirely, rendering no interactive element</li>
|
|
54
|
+
<li><strong>Relative URLs</strong> — Relative paths are resolved against the current page and upgraded to <code>https:</code></li>
|
|
55
|
+
</ul>
|
|
56
|
+
<auro-header level="2">Design system integration</auro-header>
|
|
57
|
+
<p>A native <code><a></code> element cannot be styled to match a design system across brands without significant custom CSS. Shadow DOM encapsulation makes this even harder.</p>
|
|
58
|
+
<p><code>auro-hyperlink</code> is built with the Alaska Airlines Auro Design System:</p>
|
|
59
|
+
<ul>
|
|
60
|
+
<li>Consistent visual language with other Auro components</li>
|
|
61
|
+
<li>Light and dark theme support (<code>appearance="default"</code> or <code>appearance="inverse"</code>)</li>
|
|
62
|
+
<li>CSS custom properties for color, focus, and hover states</li>
|
|
63
|
+
<li><code>::part(link)</code> and <code>::part(targetIcon)</code> selectors for targeted styling</li>
|
|
64
|
+
<li>Multi-brand theme support through design tokens</li>
|
|
65
|
+
</ul>
|
|
66
|
+
<auro-header level="2">Summary</auro-header>
|
|
67
|
+
<table>
|
|
68
|
+
<thead>
|
|
69
|
+
<tr>
|
|
70
|
+
<th>Feature</th>
|
|
71
|
+
<th>Native <code><a></code></th>
|
|
72
|
+
<th><code>auro-hyperlink</code></th>
|
|
73
|
+
</tr>
|
|
74
|
+
</thead>
|
|
75
|
+
<tbody>
|
|
76
|
+
<tr>
|
|
77
|
+
<td>URL sanitization</td>
|
|
78
|
+
<td>None</td>
|
|
79
|
+
<td>Blocks dangerous protocols automatically</td>
|
|
80
|
+
</tr>
|
|
81
|
+
<tr>
|
|
82
|
+
<td>HTTPS enforcement</td>
|
|
83
|
+
<td>Not supported</td>
|
|
84
|
+
<td>Automatic upgrade to <code>https:</code></td>
|
|
85
|
+
</tr>
|
|
86
|
+
<tr>
|
|
87
|
+
<td>External link icons</td>
|
|
88
|
+
<td>Not supported</td>
|
|
89
|
+
<td>Automatic icons based on target domain</td>
|
|
90
|
+
</tr>
|
|
91
|
+
<tr>
|
|
92
|
+
<td><code>rel</code> security attributes</td>
|
|
93
|
+
<td>Manual</td>
|
|
94
|
+
<td>Automatic for external <code>_blank</code> links</td>
|
|
95
|
+
</tr>
|
|
96
|
+
<tr>
|
|
97
|
+
<td>ARIA in shadow DOM</td>
|
|
98
|
+
<td>Manual, error-prone</td>
|
|
99
|
+
<td>Automatic attribute transportation</td>
|
|
100
|
+
</tr>
|
|
101
|
+
<tr>
|
|
102
|
+
<td>Focus delegation</td>
|
|
103
|
+
<td>Not applicable</td>
|
|
104
|
+
<td><code>delegatesFocus</code> enabled</td>
|
|
105
|
+
</tr>
|
|
106
|
+
<tr>
|
|
107
|
+
<td>CTA / button styling</td>
|
|
108
|
+
<td>Custom CSS required</td>
|
|
109
|
+
<td>Built-in <code>type="cta"</code> with variants</td>
|
|
110
|
+
</tr>
|
|
111
|
+
<tr>
|
|
112
|
+
<td>Navigation styling</td>
|
|
113
|
+
<td>Custom CSS required</td>
|
|
114
|
+
<td>Built-in <code>type="nav"</code></td>
|
|
115
|
+
</tr>
|
|
116
|
+
<tr>
|
|
117
|
+
<td>Reduced motion</td>
|
|
118
|
+
<td>Manual</td>
|
|
119
|
+
<td>Built-in support</td>
|
|
120
|
+
</tr>
|
|
121
|
+
<tr>
|
|
122
|
+
<td>Theming</td>
|
|
123
|
+
<td>Minimal</td>
|
|
124
|
+
<td>Full design system integration</td>
|
|
125
|
+
</tr>
|
|
126
|
+
</tbody>
|
|
127
|
+
</table>
|
package/package.json
CHANGED
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
"================================================================================"
|
|
8
8
|
],
|
|
9
9
|
"name": "@aurodesignsystem-dev/auro-hyperlink",
|
|
10
|
-
"version": "0.0.0-
|
|
10
|
+
"version": "0.0.0-pr345.0",
|
|
11
11
|
"description": "auro-hyperlink HTML custom element",
|
|
12
12
|
"repository": {
|
|
13
13
|
"type": "git",
|