Skip to content

Commit 23137bf

Browse files
keithamuskeithamus
committed
get example page axe clean
1 parent 5260f36 commit 23137bf

1 file changed

Lines changed: 60 additions & 56 deletions

File tree

‎examples/index.html‎

Lines changed: 60 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -6,70 +6,74 @@
66
<link rel="stylesheet" href="tabs.css" />
77
</head>
88
<body>
9-
<h1>Tab Container Examples</h1>
10-
11-
<h2>Horizontal</h2>
9+
<main>
1210

13-
<tab-container>
14-
<div role="tablist" aria-label="Horizontal Tabs Example">
15-
<button type="button" id="tab-one" role="tab">Tab one</button>
16-
<button type="button" id="tab-two" role="tab">Tab two</button>
17-
<button type="button" id="tab-three" role="tab">Tab three</button>
18-
</div>
19-
<div role="tabpanel" aria-labelledby="tab-one">
20-
Panel 1
21-
</div>
22-
<div role="tabpanel" aria-labelledby="tab-two" hidden>
23-
Panel 2
24-
</div>
25-
<div role="tabpanel" aria-labelledby="tab-three" hidden>
26-
Panel 3
27-
</div>
28-
</tab-container>
11+
<h1>Tab Container Examples</h1>
12+
13+
<h2>Horizontal</h2>
2914

30-
<h2>Vertical</h2>
31-
32-
<tab-container>
33-
<div role="tablist" aria-label="Vertical Tabs Example" aria-orientation="vertical">
34-
<button type="button" id="tab-one" role="tab">Tab one</button>
35-
<button type="button" id="tab-two" role="tab">Tab two</button>
36-
<button type="button" id="tab-three" role="tab">Tab three</button>
37-
</div>
38-
<div role="tabpanel" aria-labelledby="tab-one">
39-
Panel 1
40-
</div>
41-
<div role="tabpanel" aria-labelledby="tab-two" hidden>
42-
Panel 2
43-
</div>
44-
<div role="tabpanel" aria-labelledby="tab-three" hidden>
45-
Panel 3
46-
</div>
47-
</tab-container>
15+
<tab-container>
16+
<div role="tablist" aria-label="Horizontal Tabs Example">
17+
<button type="button" id="tab-one" role="tab">Tab one</button>
18+
<button type="button" id="tab-two" role="tab">Tab two</button>
19+
<button type="button" id="tab-three" role="tab">Tab three</button>
20+
</div>
21+
<div role="tabpanel" aria-labelledby="tab-one">
22+
Panel 1
23+
</div>
24+
<div role="tabpanel" aria-labelledby="tab-two" hidden>
25+
Panel 2
26+
</div>
27+
<div role="tabpanel" aria-labelledby="tab-three" hidden>
28+
Panel 3
29+
</div>
30+
</tab-container>
4831

49-
<h2>Panel with extra buttons</h2>
32+
<h2>Vertical</h2>
5033

51-
<tab-container>
52-
<div style="display: flex">
53-
<button>Left button, not a tab!</button>
54-
<button>2nd Left button, not a tab!</button>
55-
<div role="tablist" aria-label="Tabs Example with extra buttons">
34+
<tab-container>
35+
<div role="tablist" aria-label="Vertical Tabs Example" aria-orientation="vertical">
5636
<button type="button" id="tab-one" role="tab">Tab one</button>
5737
<button type="button" id="tab-two" role="tab">Tab two</button>
5838
<button type="button" id="tab-three" role="tab">Tab three</button>
5939
</div>
60-
<button>Right button, not a tab!</button>
61-
</div>
62-
<div role="tabpanel" aria-labelledby="tab-one">
63-
Panel 1
64-
</div>
65-
<div role="tabpanel" aria-labelledby="tab-two" hidden>
66-
Panel 2
67-
</div>
68-
<div role="tabpanel" aria-labelledby="tab-three" hidden>
69-
Panel 3
70-
</div>
71-
<p>This comes after the panels</p>
72-
</tab-container>
40+
<div role="tabpanel" aria-labelledby="tab-one">
41+
Panel 1
42+
</div>
43+
<div role="tabpanel" aria-labelledby="tab-two" hidden>
44+
Panel 2
45+
</div>
46+
<div role="tabpanel" aria-labelledby="tab-three" hidden>
47+
Panel 3
48+
</div>
49+
</tab-container>
50+
51+
<h2>Panel with extra buttons</h2>
52+
53+
<tab-container>
54+
<div style="display: flex">
55+
<button>Left button, not a tab!</button>
56+
<button>2nd Left button, not a tab!</button>
57+
<div role="tablist" aria-label="Tabs Example with extra buttons">
58+
<button type="button" id="tab-one" role="tab">Tab one</button>
59+
<button type="button" id="tab-two" role="tab">Tab two</button>
60+
<button type="button" id="tab-three" role="tab">Tab three</button>
61+
</div>
62+
<button>Right button, not a tab!</button>
63+
</div>
64+
<div role="tabpanel" aria-labelledby="tab-one">
65+
Panel 1
66+
</div>
67+
<div role="tabpanel" aria-labelledby="tab-two" hidden>
68+
Panel 2
69+
</div>
70+
<div role="tabpanel" aria-labelledby="tab-three" hidden>
71+
Panel 3
72+
</div>
73+
<p>This comes after the panels</p>
74+
</tab-container>
75+
76+
</main>
7377

7478
<!-- <script src="../dist/index.js" type="module"></script> -->
7579
<script src="https://unpkg.com/@github/tab-container-element@latest/dist/index.js" type="module"></script>

0 commit comments

Comments
 (0)