Add the sample about role attribute

Jihye Hong · Jihye Hong · commit dee93affff2e · 2018-10-26T09:18:29.000+02:00
diff --git a/demo/sample/heuristic_role_attribute.html b/demo/sample/heuristic_role_attribute.html
@@ -0,0 +1,37 @@
+<!DOCTYPE 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/spatnav-heuristic.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>
