|
19 | 19 |
|
20 | 20 | <div id="app">
|
21 | 21 | <!-- data-vst is used for internal testing, it is not required -->
|
22 |
| - <vue-skip-to data-vst="skip-to"></vue-skip-to> |
| 22 | + <vue-skip-to |
| 23 | + to="#search" |
| 24 | + text="Skip to search" |
| 25 | + data-vst="skip-to" |
| 26 | + ></vue-skip-to> |
23 | 27 | <header>
|
24 | 28 | <h1>Press tab</h1>
|
25 | 29 |
|
26 |
| - <nav role="navigation"> |
27 |
| - <ul> |
28 |
| - <li><a href="#">Home</a></li> |
29 |
| - <li><a href="#">About</a></li> |
30 |
| - <li><a href="#">Products</a></li> |
31 |
| - <li><a href="#">Support</a></li> |
32 |
| - <li><a href="#">Contact</a></li> |
33 |
| - </ul> |
| 30 | + <nav> |
| 31 | + <h2>Navigation</h2> |
| 32 | + <ul> |
| 33 | + <li><a href="#">Home</a></li> |
| 34 | + <li><a href="#">About</a></li> |
| 35 | + <li><a href="#">Products</a></li> |
| 36 | + <li><a href="#">Support</a></li> |
| 37 | + <li><a href="#">Contact</a></li> |
| 38 | + </ul> |
34 | 39 | </nav>
|
35 | 40 | </header>
|
36 | 41 |
|
| 42 | + <div> |
| 43 | + <input id="search" type="search" name="search" /> |
| 44 | + </div> |
| 45 | + |
37 | 46 | <div id="main" role="main">
|
38 | 47 | <p>
|
39 | 48 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ornare elit vitae felis tincidunt commodo. 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.
|
40 | 49 | </p>
|
41 | 50 | <p>
|
42 |
| - Aliquam mattis convallis est et cursus. 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. |
| 51 | + Aliquam mattis convallis est et cursus. <a href="google.com">Phasellus</a> 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. |
43 | 52 | </p>
|
44 | 53 | <p>
|
45 | 54 | Sed elit nunc, volutpat in urna vel, hendrerit vulputate justo. 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.
|
|
0 commit comments