Skip to content

Commit 97bac08

Browse files
khiga8khiga8
committed
Ensure that panel has associated label
1 parent d574326 commit 97bac08

2 files changed

Lines changed: 12 additions & 12 deletions

File tree

‎README.md‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -17,17 +17,17 @@ import '@github/tab-container-element'
1717
```html
1818
<tab-container>
1919
<div role="tablist">
20-
<button type="button" role="tab" aria-selected="true">Tab one</button>
21-
<button type="button" role="tab" tabindex="-1">Tab two</button>
22-
<button type="button" role="tab" tabindex="-1">Tab three</button>
20+
<button type="button" id="tab-one" role="tab" aria-selected="true">Tab one</button>
21+
<button type="button" id="tab-two" role="tab" tabindex="-1">Tab two</button>
22+
<button type="button" id="tab-three"role="tab" tabindex="-1">Tab three</button>
2323
</div>
24-
<div role="tabpanel">
24+
<div role="tabpanel" aria-labelledby="tab-one">
2525
Panel 1
2626
</div>
27-
<div role="tabpanel" hidden>
27+
<div role="tabpanel" aria-labelledby="tab-two" hidden>
2828
Panel 2
2929
</div>
30-
<div role="tabpanel" hidden>
30+
<div role="tabpanel" aria-labelledby="tab-three" hidden>
3131
Panel 3
3232
</div>
3333
</tab-container>

‎examples/index.html‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -8,17 +8,17 @@
88
<body>
99
<tab-container>
1010
<div role="tablist">
11-
<button type="button" role="tab" tabindex="0" aria-selected="true">Tab one</button>
12-
<button type="button" role="tab" tabindex="-1">Tab two</button>
13-
<button type="button" role="tab" tabindex="-1">Tab three</button>
11+
<button type="button" id="tab-one" role="tab" tabindex="0" aria-selected="true">Tab one</button>
12+
<button type="button" id="tab-two" role="tab" tabindex="-1">Tab two</button>
13+
<button type="button" id="tab-three" role="tab" tabindex="-1">Tab three</button>
1414
</div>
15-
<div role="tabpanel">
15+
<div role="tabpanel" aria-labelledby="tab-one">
1616
Panel 1
1717
</div>
18-
<div role="tabpanel" hidden>
18+
<div role="tabpanel" aria-labelledby="tab-two" hidden>
1919
Panel 2
2020
</div>
21-
<div role="tabpanel" hidden>
21+
<div role="tabpanel" aria-labelledby="tab-three" hidden>
2222
Panel 3
2323
</div>
2424
</tab-container>

0 commit comments

Comments
 (0)