Repository navigation
Expand file tree
/
Copy pathindex.html
More file actions
131 lines (113 loc) · 7.51 KB
/
Copy pathindex.html
File metadata and controls
131 lines (113 loc) · 7.51 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="../../src/favicon.png" type="image/png">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Accessible Link</title>
</head>
<body>
<main class="wrapper">
<aside class="sidebar">
<p><a href="../../index.html">Be a11y</a></p>
<nav>
<ul>
<li><a href="../accessible-accordion/">Accordion</a></li>
<li><a href="../accessible-dialog/">Dialog</a></li>
<li><a href="../accessible-dropdown/">Dropdown</a></li>
<li class="current">Link</li>
<li><a href="../accessible-modal/index.html">Modal</a></li>
<li><a href="../accessible-slider/index.html">Slider</a></li>
<li><a href="../accessible-tabs/index.html">Tabs</a></li>
<li><a href="../accessible-toggle/index.html">Toggle</a></li>
<li>
<a class="github-button" href="https://github.com/BeAPI/be-a11y" target="_blank"
rel="noopener noreferrer">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="20" height="20"
fill="currentColor" aria-hidden="true" focusable="false">
<path
d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8z" />
</svg>
GitHub
</a>
</li>
</ul>
</nav>
</aside>
<div class="content">
<h1>Accessible new tab link</h1>
<p>The Link component is designed to enhance the accessibility of links that open in new tabs. It allows
you to add specific text and icons to indicate to users that the link will open in a new tab. This
is particularly useful for screen reader users, as it provides them with additional information
about the link's behavior.</p>
<a class="github-button"
href="https://github.com/BeAPI/be-a11y/blob/main/examples/accessible-link/README.md" target="_blank"
rel="noopener noreferrer">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="20" height="20"
fill="currentColor" aria-hidden="true" focusable="false">
<path
d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8z" />
</svg>
Documentation
</a>
<div id="tab" class="tabs">
<div class="tabs__tablist" role="tablist" aria-label="Tabs component">
<button class="tabs__tab core-tab" role="tab" aria-selected="true"
aria-controls="core-tab-panel-1" id="core-tab-1">Default</button>
<button class="tabs__tab core-tab" role="tab" aria-controls="core-tab-panel-2"
id="core-tab-2">With an icon</button>
<button class="tabs__tab core-tab" role="tab" aria-controls="core-tab-panel-3"
id="core-tab-3">With a custom icon</button>
</div>
<div class="tabs__panel" tabindex="0" role="tabpanel" id="core-tab-panel-1"
aria-labelledby="core-tab-1">
<h2>Default</h2>
<p>Link with text for screen readers indicating that the link opens in a new browser tab.</p>
<div id="link-1">
<a href="https://beapi.fr" target="_blank">Go to beapi.fr</a>
</div>
</div>
<div class="tabs__panel" tabindex="0" role="tabpanel" id="core-tab-panel-2"
aria-labelledby="core-tab-2" hidden>
<h2>With an icon</h2>
<p>Link with text for screen readers indicating that the link opens in a new browser tab and a
visual icon.</p>
<div id="link-2">
<a href="https://beapi.fr" target="_blank">Go to beapi.fr</a>
</div>
</div>
<div class="tabs__panel" tabindex="0" role="tabpanel" id="core-tab-panel-3"
aria-labelledby="core-tab-3" hidden>
<h2>With a custom icon</h2>
<p>Link with text for screen readers indicating that the link opens in a new browser tab and a
custom visual icon.</p>
<div id="link-3">
<a href="https://beapi.fr" target="_blank">Go to beapi.fr</a>
</div>
</div>
</div>
</div>
<script type="module">
import { Link, Tabs } from '../../be-a11y.ts'
import '../../src/css/index.css'
import './style.css'
Tabs.init('#tab', {
tabListSelector: '.core-tab'
})
Link.init('a.github-button')
Link.preset = {
'#link-1': {},
'#link-2': {
hasIcon: true,
iconSize: 16,
},
'#link-3': {
hasIcon: true,
replaceIcon: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke-width="1.5" color="#000"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M14 11.998C14 9.506 11.683 7 8.857 7H7.143C4.303 7 2 9.238 2 11.998c0 2.378 1.71 4.368 4 4.873a5.3 5.3 0 0 0 1.143.124"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M10 11.998c0 2.491 2.317 4.997 5.143 4.997h1.714c2.84 0 5.143-2.237 5.143-4.997 0-2.379-1.71-4.37-4-4.874A5.304 5.304 0 0 0 16.857 7"/></svg>'
},
}
Link.initFromPreset()
</script>
</body>
</html>