Update style link by WebAIM recommendation

vue-a11y · May 20, 2018 · c3e08c0 · c3e08c0
1 parent 5139de1
commit c3e08c0
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 5 deletions.
diff --git a/demo/index.html b/demo/index.html
@@ -18,6 +18,7 @@
 <body>
 
   <div id="app">
+    <!-- data-vst is used for internal testing, it is not required -->
     <vue-skip-to data-vst="skip-to"></vue-skip-to>
     <header>
       <h1>Press tab</h1>
@@ -44,7 +45,6 @@ <h1>Press tab</h1>
         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.        
       </p>
     </div>
-
   </div>
   <script>
     var App = new Vue({

diff --git a/src/skip-to.vue b/src/skip-to.vue
@@ -55,17 +55,18 @@ export default {
 <style>
 .vue-skip-to {
   position: absolute;
-  left: 0;
-  top: -100%;
+  left: -10000px;
+  top: 0;
   z-index: 1000;
-  width: max-content;
+  min-width: 1px;
+  min-height: 1px;
+  overflow: hidden;
   padding: 8px 10px;
   color: #fff
 }
 
 .vue-skip-to:focus {
   background-color: #800000;
-  top: 0;
   left: 0;
 }
 </style>