Skip to content

Commit

Permalink
get example page axe clean
Browse files Browse the repository at this point in the history
  • Loading branch information
@keithamus
keithamus committed Feb 16, 2024
1 parent 5260f36 commit 23137bf
Showing 1 changed file with 60 additions and 56 deletions.
116 changes: 60 additions & 56 deletions examples/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,70 +6,74 @@
<link rel="stylesheet" href="tabs.css" />
</head>
<body>
<h1>Tab Container Examples</h1>

<h2>Horizontal</h2>
<main>

<tab-container>
<div role="tablist" aria-label="Horizontal Tabs Example">
<button type="button" id="tab-one" role="tab">Tab one</button>
<button type="button" id="tab-two" role="tab">Tab two</button>
<button type="button" id="tab-three" role="tab">Tab three</button>
</div>
<div role="tabpanel" aria-labelledby="tab-one">
Panel 1
</div>
<div role="tabpanel" aria-labelledby="tab-two" hidden>
Panel 2
</div>
<div role="tabpanel" aria-labelledby="tab-three" hidden>
Panel 3
</div>
</tab-container>
<h1>Tab Container Examples</h1>

<h2>Horizontal</h2>

<h2>Vertical</h2>

<tab-container>
<div role="tablist" aria-label="Vertical Tabs Example" aria-orientation="vertical">
<button type="button" id="tab-one" role="tab">Tab one</button>
<button type="button" id="tab-two" role="tab">Tab two</button>
<button type="button" id="tab-three" role="tab">Tab three</button>
</div>
<div role="tabpanel" aria-labelledby="tab-one">
Panel 1
</div>
<div role="tabpanel" aria-labelledby="tab-two" hidden>
Panel 2
</div>
<div role="tabpanel" aria-labelledby="tab-three" hidden>
Panel 3
</div>
</tab-container>
<tab-container>
<div role="tablist" aria-label="Horizontal Tabs Example">
<button type="button" id="tab-one" role="tab">Tab one</button>
<button type="button" id="tab-two" role="tab">Tab two</button>
<button type="button" id="tab-three" role="tab">Tab three</button>
</div>
<div role="tabpanel" aria-labelledby="tab-one">
Panel 1
</div>
<div role="tabpanel" aria-labelledby="tab-two" hidden>
Panel 2
</div>
<div role="tabpanel" aria-labelledby="tab-three" hidden>
Panel 3
</div>
</tab-container>

<h2>Panel with extra buttons</h2>
<h2>Vertical</h2>

<tab-container>
<div style="display: flex">
<button>Left button, not a tab!</button>
<button>2nd Left button, not a tab!</button>
<div role="tablist" aria-label="Tabs Example with extra buttons">
<tab-container>
<div role="tablist" aria-label="Vertical Tabs Example" aria-orientation="vertical">
<button type="button" id="tab-one" role="tab">Tab one</button>
<button type="button" id="tab-two" role="tab">Tab two</button>
<button type="button" id="tab-three" role="tab">Tab three</button>
</div>
<button>Right button, not a tab!</button>
</div>
<div role="tabpanel" aria-labelledby="tab-one">
Panel 1
</div>
<div role="tabpanel" aria-labelledby="tab-two" hidden>
Panel 2
</div>
<div role="tabpanel" aria-labelledby="tab-three" hidden>
Panel 3
</div>
<p>This comes after the panels</p>
</tab-container>
<div role="tabpanel" aria-labelledby="tab-one">
Panel 1
</div>
<div role="tabpanel" aria-labelledby="tab-two" hidden>
Panel 2
</div>
<div role="tabpanel" aria-labelledby="tab-three" hidden>
Panel 3
</div>
</tab-container>

<h2>Panel with extra buttons</h2>

<tab-container>
<div style="display: flex">
<button>Left button, not a tab!</button>
<button>2nd Left button, not a tab!</button>
<div role="tablist" aria-label="Tabs Example with extra buttons">
<button type="button" id="tab-one" role="tab">Tab one</button>
<button type="button" id="tab-two" role="tab">Tab two</button>
<button type="button" id="tab-three" role="tab">Tab three</button>
</div>
<button>Right button, not a tab!</button>
</div>
<div role="tabpanel" aria-labelledby="tab-one">
Panel 1
</div>
<div role="tabpanel" aria-labelledby="tab-two" hidden>
Panel 2
</div>
<div role="tabpanel" aria-labelledby="tab-three" hidden>
Panel 3
</div>
<p>This comes after the panels</p>
</tab-container>

</main>

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

0 comments on commit 23137bf

Please sign in to comment.