-
Notifications
You must be signed in to change notification settings - Fork 4
/
index.html
112 lines (103 loc) · 4.06 KB
/
index.html
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
<!doctype html>
<html lang="en-us" class="no-js">
<head>
<meta charset="utf-8">
<title>ARIA Tabs</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script>document.documentElement.className = document.documentElement.className.replace('no-js', 'js');</script>
<link rel="stylesheet" href="assets/css/tabs.css">
<link rel="stylesheet" href="assets/css/--demo--.css">
</head>
<body>
<div class="page">
<header>
<h1>
Tab Widget tests
</h1>
<p>
Examples of different configurations to generate Tab Widgets.
</p>
<p>
Review
<a href="https://github.com/scottaohara/a11y_tab_widget">
the code on GitHub</a>.
</p>
</header>
<main>
<section>
<h2>Tab Widget Example</h2>
<div data-atabs>
<section id="a" data-atabs-panel>
<h3 data-atabs-heading>
Apples
</h3>
<p>
No explicit default was set, so per standard functionality
this first <code>tabpanel</code> will be shown by default.
</p>
<p>
Here's a <a href="#">link just to test</a> keyboard tabbing.
(it's odd talking about <code>tab</code>s, and <kbd>tab</kbd>s.)
</p>
</section>
<section id="b" data-atabs-panel>
<h3 data-atabs-heading="keep">
Bananas
</h3>
<p data-atabs-heading>
This is an example of a heading being used to populate the
<code>tab</code>'s label, while also not removing heading
from the <code>tabpanel</code>. This is done by adding
the value "keep" to <code>data-atabs-heading</code>.
</p>
</section>
<section id="c" data-atabs-panel data-atabs-tab-label="Oranges">
<h3>
There are two headings here
</h3>
<p>
The <code>tab</code> is getting its label from the
<code>data-atabs-tab-label</code>. The heading is
kept in the <code>tabpanel</code> because it does
<b>not</b> have the <code>data-atabs-heading</code>
attribute.
</p>
<h4>It wouldn't make much sense</h4>
<p>
If the contents of a <code>tabpanel</code> contain
additional sub headings, it wouldn't make sense to remove
the initial heading from the <code>tabpanel</code>.
Doing so would create a gap in the heading structure.
</p>
</section>
</div>
</section>
<section>
<h2>More demos</h2>
<ul>
<li><a href="tests/nested.html">Nested Tab Widgets</a></li>
<li><a href="tests/manual.html">Manually activated Tab Panels</a></li>
<li><a href="tests/inject-tabs-into-widget.html">Injected Tab Panels</a></li>
<li><a href="tests/vertical-orientation.html">Vertical Tab Widget</a></li>
<li><a href="tests/has-toc.html">No JS Table of Contents Sections</a></li>
<li><a href="tests/tab-panel-wrapper.html">Wrapping Element For Tab Panels</a></li>
<li><a href="tests/multiple-instances.html">Multiple Tab Widget Instances</a></li>
<li><a href="tests/windows-7-tabs.html">Windows 7 Tabs</a></li>
<li><a href="tests/disabled-tab.html">Widget with disabled Tab</a></li>
</ul>
</section>
</main>
</div> <!-- /.page (demo layout) -->
<script src="index.js"></script>
<script>
var tabInstance = '[data-atabs]';
var els = document.querySelectorAll(tabInstance);
var allTabs = [];
// Generate all tab instances
for ( var i = 0; i < els.length; i++ ) {
var nTabs = new ARIAtabs( els[i] );
allTabs.push(nTabs);
}
</script>
</body>
</html>