spatial-navigation-polyfill
Version:
A polyfill for the spatial navigation
44 lines (38 loc) • 2.24 kB
HTML
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="application-name" content="Nested Elements">
<meta name="author" content="Jeonghee Ahn">
<meta name="description" content="You can check the spatial navigation <b>behavior in the case where two elements are overlapped</b> using up/down arrow keys.</a>">
<link rel="stylesheet" href="spatnav-style.css">
<script src="spatnav-utils.js"></script>
<script src="../../polyfill/spatial-navigation-polyfill.js"></script>
</head>
<body>
<button style="width: 150px; height: 50px;" >Button</button><br><br>
Completely embedded elements can not be reached with the arrow keys.
<div style="position: relative; text-align: center;">
<div tabindex="0" style="width: 200px; height: 200px; padding: 20px; background: white">Near element</div>
<div tabindex="0" style="position: absolute; top: 50px; left: 30px; width: 100px; height: 100px; background: darkgray">Unreachable element</div>
</div><br>
Among the candidates of the same distance, the smallest height is the first.
<div style="position: relative; text-align: center;">
<div tabindex="0" style="width: 200px; height: 100px; padding-top:100px; background: white">Second order by 'down key'<br> First order by 'up key'</div>
<div tabindex="0" style="position: absolute; top: 0px; width: 100px; height: 100px; background: darkgray">First order by 'down key'<br> Unreachable by 'up key'</div>
</div>
<br><br>
<div style="position: relative; text-align: center;">
<div tabindex="0" style="width: 100px; height: 200px; background: white"></div>
<div tabindex="0" style="position: absolute; top: 0px; width: 200px; height: 100px; background: darkgray"></div>
</div>
<br><br>
<div style="position: relative; text-align: center;">
<div tabindex="0" style="width: 200px; height: 100px; background: white"></div>
<div tabindex="0" style="position: absolute; top: 0px; width: 100px; height: 200px; background: darkgray"></div>
</div>
<br><br><br><br><br><br>
<button style="width: 150px; height: 50px;" >Button</button><br><br>
</body>
</html>