spatial-navigation-polyfill
Version:
A polyfill for the spatial navigation
38 lines (34 loc) • 2.19 kB
HTML
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="application-name" content="inert attribute">
<meta name="author" content="Jihye Hong">
<link rel="stylesheet" href="spatnav-style.css">
<script src="../../polyfill/spatial-navigation-polyfill.js"></script>
<link rel="stylesheet" href="https://www.w3.org/TR/wai-aria-practices/examples/tabs/css/tabs.css">
</head>
<body>
<div class="container" style="width:600px; height:500px;">
<div class="tabs" style="width: 100%; font-size: 1.5rem;">
<div role="tablist" style="font-size: 1.0rem" aria-label="Entertainment">
<button role="tab" aria-selected="true" aria-controls="nils-tab" id="nils">Nils Frahm</button>
<button role="tab" aria-selected="false" aria-controls="agnes-tab" id="agnes" tabindex="-1">Agnes Obel</button>
<button role="tab" aria-selected="false" aria-controls="complexcomplex" id="complex" tabindex="-1" data-deletable="">Joke</button>
</div>
<div tabindex="0" role="tabpanel" id="nils-tab" aria-labelledby="nils">
<p>Nils Frahm is a German musician, composer and record producer based in Berlin. He is known for combining classical and electronic music and for an unconventional approach to the piano in which he mixes a grand piano, upright piano, Roland Juno-60, Rhodes piano, drum machine, and Moog Taurus.</p>
</div>
<div tabindex="0" role="tabpanel" id="agnes-tab" aria-labelledby="agnes" hidden="hidden">
<p>Agnes Caroline Thaarup Obel is a Danish singer/songwriter. Her first album, Philharmonics, was released by PIAS Recordings on 4 October 2010 in Europe. Philharmonics was certified gold in June 2011 by the Belgian Entertainment Association (BEA) for sales of 10,000 Copies.</p>
</div>
<div tabindex="0" role="tabpanel" id="complexcomplex" aria-labelledby="complex" hidden="hidden">
<p>Fear of complicated buildings:</p>
<p>A complex complex complex.</p>
</div>
</div>
</div>
<script src="https://www.w3.org/TR/wai-aria-practices/examples/tabs/tabs-1/js/tabs.js"></script>
</body>
</html>