@aurodesignsystem-dev/auro-hyperlink 0.0.0-pr1.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/CHANGELOG.md +885 -0
- package/LICENSE +201 -0
- package/NOTICE +2 -0
- package/README.md +144 -0
- package/custom-elements.json +1186 -0
- package/demo/a11y.html +58 -0
- package/demo/a11y.md +161 -0
- package/demo/api.html +57 -0
- package/demo/api.js +21 -0
- package/demo/api.md +694 -0
- package/demo/api.min.js +21 -0
- package/demo/auro-hyperlink.min.js +1291 -0
- package/demo/index.html +57 -0
- package/demo/index.js +23 -0
- package/demo/index.md +294 -0
- package/demo/index.min.js +35 -0
- package/dist/auro-hyperlink-ML2We8vn.js +1227 -0
- package/dist/index.d.ts +123 -0
- package/dist/index.js +6 -0
- package/dist/properties.js +64 -0
- package/dist/properties.jsdoc.js +65 -0
- package/dist/registered.js +8 -0
- package/package.json +90 -0
package/demo/a11y.html
ADDED
|
@@ -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('./a11y.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 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/dist/auro-accordion__bundled.js" type="module"></script>
|
|
55
|
+
<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-icon@latest/dist/auro-icon__bundled.js" type="module"></script>
|
|
56
|
+
<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-button@latest/dist/auro-button__bundled.js" type="module"></script>
|
|
57
|
+
</body>
|
|
58
|
+
</html>
|
package/demo/a11y.md
ADDED
|
@@ -0,0 +1,161 @@
|
|
|
1
|
+
<style>
|
|
2
|
+
table tbody tr td + td {
|
|
3
|
+
width: 40%;
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
table tbody tr td + td + td {
|
|
7
|
+
width: unset;
|
|
8
|
+
}
|
|
9
|
+
</style>
|
|
10
|
+
|
|
11
|
+
# Accessibility
|
|
12
|
+
|
|
13
|
+
The auro-hyperlink element has been designed and engineered to meet the WCAG 2.0 specifications. While there are multiple points to a success criterion, this document will cover core elements that ensure a consistent and useable experience.
|
|
14
|
+
|
|
15
|
+
Reference [Accessibility Techniques for Links](https://dequeuniversity.com/checklists/web/links)
|
|
16
|
+
|
|
17
|
+
#### Semantic Markup and Purpose
|
|
18
|
+
|
|
19
|
+
<table>
|
|
20
|
+
<thead>
|
|
21
|
+
<tr>
|
|
22
|
+
<th>Topic</th>
|
|
23
|
+
<th>Description</th>
|
|
24
|
+
<th>Requirement</th>
|
|
25
|
+
<th>Example</th>
|
|
26
|
+
</tr>
|
|
27
|
+
</thead>
|
|
28
|
+
<tbody>
|
|
29
|
+
<tr>
|
|
30
|
+
<td>Links versus buttons</td>
|
|
31
|
+
<td>Links SHOULD be used only for actions that take the user to other locations, and SHOULD NOT be used for button-like functionality.</td>
|
|
32
|
+
<td>best practice</td>
|
|
33
|
+
<td>Find <auro-hyperlink href="https://www.alaskaair.com/en/flights-to-mexico">low-fare flights to Mexico</auro-hyperlink> on Alaska Airlines.</td>
|
|
34
|
+
</tr>
|
|
35
|
+
</tbody>
|
|
36
|
+
</table>
|
|
37
|
+
|
|
38
|
+
#### Link text
|
|
39
|
+
|
|
40
|
+
<table>
|
|
41
|
+
<thead>
|
|
42
|
+
<tr>
|
|
43
|
+
<th>Topic</th>
|
|
44
|
+
<th>Description</th>
|
|
45
|
+
<th>Requirement</th>
|
|
46
|
+
<th>Example</th>
|
|
47
|
+
</tr>
|
|
48
|
+
</thead>
|
|
49
|
+
<tbody>
|
|
50
|
+
<tr>
|
|
51
|
+
<td>Discernible text</td>
|
|
52
|
+
<td>A link MUST have programmatically-discernible text, as determined by the accessible name calculation algorithm.</td>
|
|
53
|
+
<td>WCAG 4.1.2</td>
|
|
54
|
+
<td>Find <auro-hyperlink href="https://www.alaskaair.com/en/flights-to-mexico">low-fare flights to Mexico</auro-hyperlink> on Alaska Airlines.</td>
|
|
55
|
+
</tr>
|
|
56
|
+
<tr>
|
|
57
|
+
<td>Links to external sites</td>
|
|
58
|
+
<td>A link to an external site MAY indicate that it leads to an external site.</td>
|
|
59
|
+
<td>Best practice</td>
|
|
60
|
+
<td><auro-hyperlink href="https://webaim.org/techniques/hypertext/link_text" target="_blank" type="nav">Web AIM Links and Hypertext</auro-hyperlink></td>
|
|
61
|
+
</tr>
|
|
62
|
+
<tr>
|
|
63
|
+
<td>Links opening in new tab or window</td>
|
|
64
|
+
<td>A link that opens in a new window or tab SHOULD indicate that it opens in a new window or tab.</td>
|
|
65
|
+
<td>Best practice</td>
|
|
66
|
+
<td><auro-hyperlink href="https://auro.alaskaair.com/components/auro/hyperlink" target="_blank" type="nav">Auro hyperlink spec</auro-hyperlink></td>
|
|
67
|
+
</tr>
|
|
68
|
+
<tr>
|
|
69
|
+
<td>Avoid "link" (or similar) in the link text</td>
|
|
70
|
+
<td>The link text SHOULD NOT state its semantic role (e.g. don't say "link to..."), because screen readers already state the role before reading the link text.</td>
|
|
71
|
+
<td>Best practice</td>
|
|
72
|
+
<td></td>
|
|
73
|
+
</tr>
|
|
74
|
+
</tbody>
|
|
75
|
+
</table>
|
|
76
|
+
|
|
77
|
+
#### Keyboard Accessibility
|
|
78
|
+
|
|
79
|
+
<table>
|
|
80
|
+
<thead>
|
|
81
|
+
<tr>
|
|
82
|
+
<th>Topic</th>
|
|
83
|
+
<th>Description</th>
|
|
84
|
+
<th>Requirement</th>
|
|
85
|
+
<th>Example</th>
|
|
86
|
+
</tr>
|
|
87
|
+
</thead>
|
|
88
|
+
<tbody>
|
|
89
|
+
<tr>
|
|
90
|
+
<td>Keyboard-focusable</td>
|
|
91
|
+
<td>Links MUST be keyboard-focusable. (Use the <code>tab</code> key to place focus on any hyperlink element)</td>
|
|
92
|
+
<td>WCAG 2.1.1</td>
|
|
93
|
+
<td><auro-hyperlink href="https://www.alaskaair.com/en/flights-to-mexico">low-fare flights to Mexico</auro-hyperlink> on Alaska Airlines.</td>
|
|
94
|
+
</tr>
|
|
95
|
+
<tr>
|
|
96
|
+
<td>Keyboard activation</td>
|
|
97
|
+
<td>Links MUST activate with the enter/return key. (Use the <code>tab</code> key to place focus on any hyperlink element)</td>
|
|
98
|
+
<td>WCAG 2.1.1</td>
|
|
99
|
+
<td><auro-hyperlink href="https://www.alaskaair.com/en/flights-to-mexico">low-fare flights to Mexico</auro-hyperlink> on Alaska Airlines.</td>
|
|
100
|
+
</tr>
|
|
101
|
+
</tbody>
|
|
102
|
+
</table>
|
|
103
|
+
|
|
104
|
+
#### Focus Order
|
|
105
|
+
|
|
106
|
+
| Topic | Description | Requirement | Example |
|
|
107
|
+
|---|---|---|---|
|
|
108
|
+
|Focus order|The navigation order of focusable elements (links, form elements, etc.) MUST be logical and intuitive.|WCAG 2.4.3||
|
|
109
|
+
|Tabindex|The tabindex attribute SHOULD NOT be used with positive values to customize the tab order (e.g. don't use `tabindex="1"`).|Best practice||
|
|
110
|
+
|
|
111
|
+
#### Link Colors, Contrast, and Styles
|
|
112
|
+
|
|
113
|
+
<table>
|
|
114
|
+
<thead>
|
|
115
|
+
<tr>
|
|
116
|
+
<th>Topic</th>
|
|
117
|
+
<th>Description</th>
|
|
118
|
+
<th>Requirement</th>
|
|
119
|
+
<th>Example</th>
|
|
120
|
+
</tr>
|
|
121
|
+
</thead>
|
|
122
|
+
<tbody>
|
|
123
|
+
<tr>
|
|
124
|
+
<td>Links visually distinguishable from non-links</td>
|
|
125
|
+
<td>Links MUST be visually distinguishable from surrounding non-link text.</td>
|
|
126
|
+
<td>WCAG 1.4.1</td><td>Find <auro-hyperlink href="https://www.alaskaair.com/en/flights-to-mexico">low-fare flights to Mexico</auro-hyperlink> on Alaska Airlines.</td>
|
|
127
|
+
</tr>
|
|
128
|
+
<tr>
|
|
129
|
+
<td>Color as a way to visually distinguish links</td>
|
|
130
|
+
<td>Color alone MUST NOT be used as the only way to distinguish links from surrounding text <strong>unless the color contrast between the link and the surrounding text is at least 3:1 and an additional differentiation (e.g. underline, outline, etc.) is provided when the link is hovered or receives focus.</strong><br><br>See <auro-hyperlink href="https://webaim.org/resources/contrastchecker/?fcolor=0074CB&bcolor=222222" target="_blank">color contrast test</auro-hyperlink>.</td>
|
|
131
|
+
<td>WCAG 1.4.1</td>
|
|
132
|
+
<td><auro-hyperlink type="nav" href="https://www.alaskaair.com/en/flights-to-mexico">Find low-fare flights to Mexico</auro-hyperlink></td>
|
|
133
|
+
</tr>
|
|
134
|
+
<tr>
|
|
135
|
+
<td>Link contrast</td>
|
|
136
|
+
<td>Links MUST have a contrast ratio of 4.5:1 (for small text) or 3:1 (for large text) against their background. <br><br>See <auro-hyperlink href="https://webaim.org/resources/contrastchecker/?fcolor=0074CB&bcolor=FFFFFF" target="_blank">color contrast test</auro-hyperlink>.</td>
|
|
137
|
+
<td>WCAG 1.4.3</td>
|
|
138
|
+
<td><auro-hyperlink type="nav" href="https://www.alaskaair.com/en/flights-to-mexico">Find low-fare flights to Mexico</auro-hyperlink></td>
|
|
139
|
+
</tr>
|
|
140
|
+
</tbody>
|
|
141
|
+
</table>
|
|
142
|
+
|
|
143
|
+
#### Visual Focus Indicator
|
|
144
|
+
|
|
145
|
+
<table>
|
|
146
|
+
<thead>
|
|
147
|
+
<tr>
|
|
148
|
+
<th>Topic</th>
|
|
149
|
+
<th>Description</th>
|
|
150
|
+
<th>Requirement</th>
|
|
151
|
+
<th>Example</th>
|
|
152
|
+
</tr>
|
|
153
|
+
</thead>
|
|
154
|
+
<tbody>
|
|
155
|
+
<tr>
|
|
156
|
+
<td>Focus indicator</td>
|
|
157
|
+
<td>All links MUST show a visual focus indicator when in focus. (Use the <code>tab</code> key to place focus on any hyperlink element)</td><td>WCAG 2.4.7</td>
|
|
158
|
+
<td><auro-hyperlink type="nav" href="https://www.alaskaair.com/en/flights-to-mexico">Find low-fare flights to Mexico</auro-hyperlink></td>
|
|
159
|
+
</tr>
|
|
160
|
+
</tbody>
|
|
161
|
+
</table>
|
package/demo/api.html
ADDED
|
@@ -0,0 +1,57 @@
|
|
|
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('./api.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="./api.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/dist/auro-accordion__bundled.js" type="module"></script>
|
|
55
|
+
<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-icon@latest/dist/auro-icon__bundled.js" type="module"></script>
|
|
56
|
+
</body>
|
|
57
|
+
</html>
|
package/demo/api.js
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { AuroHyperlink } from "../src/index";
|
|
2
|
+
|
|
3
|
+
AuroHyperlink.register();
|
|
4
|
+
|
|
5
|
+
function initHyperlinkApiExamples(initCount) {
|
|
6
|
+
// biome-ignore lint: no-unused-vars
|
|
7
|
+
initCount = initCount || 0;
|
|
8
|
+
|
|
9
|
+
try {
|
|
10
|
+
initHyperlinkApiExamples();
|
|
11
|
+
} catch {
|
|
12
|
+
if (initCount <= 20) {
|
|
13
|
+
// setTimeout handles issue where content is sometimes loaded after the functions get called
|
|
14
|
+
setTimeout(() => {
|
|
15
|
+
initHyperlinkApiExamples(initCount + 1);
|
|
16
|
+
}, 100);
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
initHyperlinkApiExamples();
|