feat: Emulate focus-within to support IE11

Author: ktquez

src/VueSkipTo.vue

@@ -1,6 +1,14 @@
 <template>
-  <div class="vue-skip-to">
-    <component :is="comp" v-bind="props" />
+  <div
+    class="vue-skip-to"
+    :class="{ 'focused': focused }"
+  >
+    <component
+      @focused="focusWithin"
+      @focus-within="focusWithin"
+      :is="comp"
+      v-bind="props"
+    />
   </div>
 </template>
 
@@ -26,6 +34,12 @@ export default {
     }
   },
 
+  data () {
+    return {
+      focused: false
+    }
+  },
+
   computed: {
     isList () {
       return Array.isArray(this.to)
@@ -39,6 +53,12 @@ export default {
       if (this.isList) return { listLabel: this.listLabel, to: this.to }
       return { label: this.label, to: this.to }
     }
+  },
+
+  methods: {
+    focusWithin (val) {
+      this.focused = val
+    }
   }
 }
 </script>
@@ -62,7 +82,7 @@ export default {
   border-width: 0;
 }
 
-.vue-skip-to:focus-within, .vue-skip-to:focus, .vue-skip-to:hover {
+.vue-skip-to.focused, .vue-skip-to:hover {
   left: 0;
   top: 0;
   clip: auto;

src/VueSkipToList.vue

@@ -11,6 +11,7 @@
       >
         <VueSkipToSingle
           :to="el.anchor"
+          @focused="$emit('focus-within', $event)"
           :aria-label="el.ariaLabel || el.label"
         >
           {{ el.label }}

src/VueSkipToSingle.vue

@@ -2,6 +2,8 @@
   <a
     :href="to"
     @click.prevent="handleFocusElement"
+    @focus="$emit('focused', true)"
+    @blur="$emit('focused', false)"
     class="vue-skip-to__link"
   >
     <slot>{{ label }}</slot>