-
-
Notifications
You must be signed in to change notification settings - Fork 8
/
Copy pathskip-to-list.html
58 lines (52 loc) · 3.08 KB
/
skip-to-list.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Using vue-skip-to</title>
<style>
main:focus, footer:focus {
background-color: yellow;
}
</style>
<script src="https://unpkg.com/vue"></script>
<script src="vue-skip-to.js"></script>
</head>
<body>
<div id="app">
<!-- data-vst used for internal testing, it is NOT required -->
<vue-skip-to
list-label="Skip links"
:to="[
{ anchor: '#main', label: 'Main content' },
{ anchor: '.footer', label: 'Footer' },
]"
data-vst="skip-to-list"
></vue-skip-to>
<header>
<h1>Press tab</h1>
</header>
<main id="main">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ornare elit vitae felis tincidunt commodo. <a href="https://google.com">Google</a> Phasellus volutpat pharetra consectetur. Mauris eu orci fermentum, maximus odio ut, consequat dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec et tortor sagittis, euismod risus vel, pulvinar urna. Suspendisse non facilisis leo. Quisque rhoncus vel mauris sed dapibus. Nunc nibh mauris, fringilla ut nisi at, maximus varius magna. Proin hendrerit a orci quis ullamcorper. Curabitur molestie eros quis eros tempus auctor. Proin luctus nibh quis sem dictum tempus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed eleifend, tortor tristique efficitur egestas, nulla libero tincidunt quam, vel pulvinar velit nulla id libero. Maecenas nisl quam, dictum in tempus in, ultrices a felis.
</p>
<p>
Aliquam mattis convallis est et cursus. <a href="https://google.com">Google</a> Phasellus tincidunt efficitur dui, non fringilla ipsum dignissim nec. Nam consectetur ante vitae malesuada rutrum. Praesent nec varius magna. Sed sem nisi, tempor eu venenatis vitae, consectetur eu sapien. Suspendisse sit amet massa lacinia purus ultrices lacinia. Aliquam non cursus quam, ac elementum enim. Morbi dignissim lacus nulla, sit amet interdum diam eleifend in. In hac habitasse platea dictumst. Suspendisse eget erat eu eros placerat pharetra vel eget metus. Morbi porta ex sed erat vestibulum, ac varius ex euismod. Nunc iaculis ornare lacus a egestas. Cras cursus facilisis mi, nec vulputate leo. Fusce varius varius arcu sit amet mollis.
</p>
</main>
<footer class="footer">
<p>
Sed elit nunc, volutpat in urna vel, hendrerit vulputate justo.
<a href="https://google.com">Google</a>
Etiam pulvinar id ligula in ultrices. Suspendisse nulla risus, accumsan quis sagittis ac, faucibus eget dolor. Curabitur ullamcorper magna eget consequat facilisis. Cras massa leo, tristique nec tempus ac, auctor in arcu. Quisque a faucibus ex, congue eleifend ante. Praesent ultrices arcu neque, eget lacinia erat ultrices eget.
</p>
</footer>
</div>
<script>
var App = new Vue({
el: '#app'
})
</script>
</body>
</html>