chore: Using skip-to as wrap to single and list anchors

Author: ktquez

demo/search.html

@@ -4,7 +4,7 @@
   <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>
+  <title>Using search vue-skip-to</title>
 
   <style>
     a:focus, div:focus {
@@ -19,7 +19,7 @@
 
   <div id="app">
     <!-- data-vst is used for internal testing, it is not required -->
-    <vue-skip-to to="#search" text="Skip to search" data-vst="skip-to"></vue-skip-to>
+    <vue-skip-to to="#search" label="Skip to search" data-vst="skip-to"></vue-skip-to>
     <header>
       <h1>Press tab</h1>
 

demo/skip-to-list.html

@@ -19,32 +19,35 @@
 
   <div id="app">
     <!-- data-vst used for internal testing, it is NOT required -->
-    <vue-skip-to-list
+    <vue-skip-to
+      title-list="Skip to"
       :to="[
-        {anchor: '#main', label: 'Main'},
-        {anchor: '#footer', label: 'Footer', ariaLabel: 'Skip to about'},
+        { anchor: '#main', label: 'Main content' },
+        { anchor: '#footer', label: 'Footer' },
       ]"
       data-vst="skip-to-list"
     >
       Skip links
-    </vue-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. 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.
+        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. 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.
+        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 id="footer">
       <p>
-        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.
+        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>

src/VueSkipTo.vue

@@ -1,49 +1,55 @@
 <template>
-  <a
-    class="vue-skip-to"
-    :href="to"
-    @click.prevent="handleFocusElement"
-    @focus="$emit('focus')"
-    @blur="$emit('blur')"
-  >
-    <slot>{{ text }}</slot>
-  </a>
+  <div class="vue-skip-to">
+    <component :is="comp" v-bind="props" />
+  </div>
 </template>
 
 <script>
+import VueSkipToSingle from './VueSkipToSingle.vue'
+import VueSkipToList from './VueSkipToList.vue'
+
 export default {
   name: 'VueSkipTo',
 
   props: {
-    text: {
+    titleList: {
+      type: String,
+      default: 'Skip to'
+    },
+    label: {
       type: String,
       default: 'Skip to main content'
     },
     to: {
-      type: String,
+      type: [String, Array],
       default: '#main'
     }
   },
 
-  methods: {
-    handleFocusElement ({ target }) {
-      this.focusElement(target.getAttribute('href').substring(1))
+  computed: {
+    isList () {
+      return Array.isArray(this.to)
+    },
+
+    comp () {
+      return this.isList ? VueSkipToList : VueSkipToSingle
     },
 
-    focusElement (id) {
-      if (!id) return
-      const element = window.document.getElementById(id)
-      if (!element) return
-      if (!/^(a|select|input|button|textarea)/i.test(element.tagName.toLowerCase())) {
-        element.setAttribute('tabindex', -1)
-      }
-      element.focus()
+    props () {
+      if (this.isList) return { titleList: this.titleList, to: this.to }
+      return { label: this.label, to: this.to }
     }
   }
 }
 </script>
 
 <style>
+.vue-skip-to * {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+}
+
 .vue-skip-to {
   position: fixed;
   width: 1px;
@@ -56,12 +62,40 @@ export default {
   border-width: 0;
 }
 
-.vue-skip-to:focus, .vue-skip-to:hover {
+.vue-skip-to:focus-within, .vue-skip-to:focus, .vue-skip-to:hover {
   left: 0;
   top: 0;
   clip: auto;
   height: auto;
   width: auto;
-  padding: 8px 10px;
+  background-color: white;
+  border: 2px solid #333;
+}
+
+.vue-skip-to__nav-list {
+  list-style-type: none;
+}
+
+.vue-skip-to__nav > span, .vue-skip-to__link {
+  display: block;
+  padding: 8px 16px;
+  color: #333;
+  font-size: 18px;
+}
+
+.vue-skip-to__nav > span {
+  border-bottom: 2px solid #333;
+  font-weight: bold;
 }
+
+.vue-skip-to__link {
+  text-decoration: none;
+}
+
+.vue-skip-to__link:focus {
+  outline: none;
+  background-color: #333;
+  color: #f2f2f2;
+}
+
 </style>

src/VueSkipToList.vue

@@ -1,41 +1,36 @@
 <template>
-  <div :class="containerClassNames">
-    <label>
-
-      <p class="vue-skip-to__label">
-        <slot>Skip to</slot>
-      </p>
-
-      <nav class="vue-skip-to__nav">
-        <ul class="vue-skip-to__nav-list">
-          <li
-            v-for="el in to"
-            :key="el.anchor"
-            class="vue-skip-to__nav-list-item"
-          >
-            <vue-skip-to
-              :to="el.anchor"
-              :aria-label="el.ariaLabel"
-              @focus="labelVisible = true"
-              @blur="labelVisible = false"
-              class="vue-skip-to vue-skip-to--relative"
-            >
-              {{ el.label }}
-            </vue-skip-to>
-          </li>
-        </ul>
-      </nav>
-
-    </label>
-  </div>
+  <nav class="vue-skip-to__nav">
+    <span id="list-title">{{ titleList }}</span>
+    <ul class="vue-skip-to__nav-list">
+      <li
+        v-for="el in to"
+        :key="el.anchor"
+        class="vue-skip-to__nav-list-item"
+        @keydown.prevent.up="handleKeydown"
+        @keydown.prevent.down="handleKeydown"
+      >
+        <VueSkipToSingle
+          :to="el.anchor"
+          :aria-label="el.ariaLabel || `${titleList} ${el.label}`"
+        >
+          {{ el.label }}
+        </VueSkipToSingle>
+      </li>
+    </ul>
+  </nav>
 </template>
 
 <script>
+import VueSkipToSingle from './VueSkipToSingle.vue'
+
 export default {
   name: 'VueSkipToList',
 
   props: {
-    // TODO: allow modifying `<skip-to>` props
+    titleList: {
+      type: String,
+      default: 'Skip to'
+    },
     to: {
       validator: function (val) {
         return Array.isArray(val) &&
@@ -48,68 +43,20 @@ export default {
     }
   },
 
-  data () {
-    return {
-      labelVisible: false
-    }
+  components: {
+    VueSkipToSingle
   },
 
-  computed: {
-    containerClassNames: function () {
-      return {
-        'vue-skip-to__list-container': true,
-        'vue-skip-to__list-container--focus': this.labelVisible
-      }
+  methods: {
+    handleKeydown ({ key, target }) {
+      const parent = target.parentElement
+      const itemList = key === 'ArrowUp' ? parent.previousElementSibling : parent.nextElementSibling
+
+      if (!itemList) return
+
+      const link = itemList.getElementsByTagName('a')
+      if (link.length) link[0].focus()
     }
   }
-
 }
 </script>
-
-<style scoped>
-.vue-skip-to__list-container {
-  position: absolute;
-  left: -10000px;
-  top: 0;
-  border: 1px solid #000;
-}
-
-.vue-skip-to__list-container--focus {
-  background-color: #fff;
-  left: 0;
-}
-
-.vue-skip-to__label {
-  font-weight: 800;
-  margin: 8px 0 0 0;
-  padding: 8px 24px 8px 10px;
-  border-bottom: 1px solid #000;
-}
-
-.vue-skip-to__nav-list {
-  display: flex;
-  flex-direction: column;
-  padding: 0;
-  margin: 0 0 10px 0;
-  list-style-type: none;
-}
-
-.vue-skip-to__nav-list-item {
-  position: relative;
-}
-
-/* override `<vue-skip-to>` styles */
-.vue-skip-to.vue-skip-to--relative {
-  position: relative;
-  left: unset;
-  top: unset;
-  display: block;
-  padding: 8px 24px 8px 10px;
-  color: #000;
-  text-decoration: none;
-}
-
-.vue-skip-to.vue-skip-to--relative:focus {
-  color: #fff;
-}
-</style>

src/VueSkipToSingle.vue

@@ -0,0 +1,42 @@
+<template>
+  <a
+    :href="to"
+    @click.prevent="handleFocusElement"
+    class="vue-skip-to__link"
+  >
+    <slot>{{ label }}</slot>
+  </a>
+</template>
+
+<script>
+export default {
+  name: 'VueSkipToSingle',
+
+  props: {
+    label: {
+      type: String,
+      default: 'Skip to main content'
+    },
+    to: {
+      type: String,
+      default: '#main'
+    }
+  },
+
+  methods: {
+    handleFocusElement ({ target }) {
+      this.focusElement(target.getAttribute('href').substring(1))
+    },
+
+    focusElement (id) {
+      if (!id) return
+      const element = window.document.getElementById(id)
+      if (!element) return
+      if (!/^(a|select|input|button|textarea)/i.test(element.tagName.toLowerCase())) {
+        element.setAttribute('tabindex', -1)
+      }
+      element.focus()
+    }
+  }
+}
+</script>

src/index.js

@@ -1,11 +1,9 @@
 import VueSkipTo from './VueSkipTo.vue'
-import VueSkipToList from './VueSkipToList.vue'
 
 export default function install (Vue) {
   if (install.installed) return
   install.installed = true
   Vue.component('VueSkipTo', VueSkipTo)
-  Vue.component('VueSkipToList', VueSkipToList)
 }
 
 // auto install