From a095eb46434e837c818d61c4a7bd80dbce35bc6e Mon Sep 17 00:00:00 2001
From: William L <w-lindvall@outlook.com>
Date: Fri, 19 Jun 2020 14:32:54 -0700
Subject: [PATCH 1/3] handle focus with non-id selector

---
 src/VueSkipToSingle.vue | 51 +++++++++++++++++++++++++++++++++--------
 1 file changed, 42 insertions(+), 9 deletions(-)

diff --git a/src/VueSkipToSingle.vue b/src/VueSkipToSingle.vue
index a034844..c4eae9a 100644
--- a/src/VueSkipToSingle.vue
+++ b/src/VueSkipToSingle.vue
@@ -1,11 +1,12 @@
 <template>
-  <a
-    :href="to"
+  <component
+    :is="comp"
+    v-bind="props"
     @click.prevent="handleFocusElement"
     class="vue-skip-to__link"
   >
     <slot>{{ label }}</slot>
-  </a>
+  </component>
 </template>
 
 <script>
@@ -17,22 +18,54 @@ export default {
       type: String,
       default: 'Skip to main content'
     },
+
     to: {
       type: String,
       default: '#main'
+    },
+  },
+
+  computed: {
+    targetIsId () {
+      return this.to.substring(0, 1) === '#'
+    },
+
+    comp () {
+      if (this.targetIsId) return 'a'
+      return 'button'
+    },
+
+    props () {
+      if (this.targetIsId) {
+        return {
+          href: this.to,
+        }
+      }
+
+      return {}
     }
   },
 
   methods: {
-    handleFocusElement ({ target }) {
-      this.focusElement(target.getAttribute('href').substring(1))
+    handleFocusElement () {
+      if (this.targetIsId) {
+        const id = this.to.substring(1)
+        if (!id) return
+        const element = window.document.getElementById(id)
+        this.focusElement(element)
+      } else {
+        const element = window.document.querySelector(this.to)
+        this.focusElement(element)
+      }
     },
 
-    focusElement (id) {
-      if (!id) return
-      const element = window.document.getElementById(id)
+    focusElement (element) {
       if (!element) return
-      if (!/^(a|select|input|button|textarea)/i.test(element.tagName.toLowerCase())) {
+      if (
+        !/^(a|select|input|button|textarea)/i.test(
+          element.tagName.toLowerCase()
+        )
+      ) {
         element.setAttribute('tabindex', -1)
       }
       element.focus()

From 7fd9c83b69c48c845c91b64146f0d6d6271c45c1 Mon Sep 17 00:00:00 2001
From: William L <w-lindvall@outlook.com>
Date: Fri, 19 Jun 2020 14:38:28 -0700
Subject: [PATCH 2/3] update skip-to list test to use non-id target selector

---
 demo/skip-to-list.html                | 4 ++--
 tests/e2e/integration/skip-to-list.js | 3 +++
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/demo/skip-to-list.html b/demo/skip-to-list.html
index 51eb9f0..27a7f0b 100644
--- a/demo/skip-to-list.html
+++ b/demo/skip-to-list.html
@@ -23,7 +23,7 @@
       list-label="Skip links"
       :to="[
         { anchor: '#main', label: 'Main content' },
-        { anchor: '#footer', label: 'Footer' },
+        { anchor: '.footer', label: 'Footer' },
       ]"
       data-vst="skip-to-list"
     ></vue-skip-to>
@@ -41,7 +41,7 @@ <h1>Press tab</h1>
       </p>
     </main>
 
-    <footer id="footer">
+    <footer class="footer">
       <p>
         Sed elit nunc, volutpat in urna vel, hendrerit vulputate justo. 
         <a href="https://google.com">Google</a>
diff --git a/tests/e2e/integration/skip-to-list.js b/tests/e2e/integration/skip-to-list.js
index fb03991..72dbdff 100644
--- a/tests/e2e/integration/skip-to-list.js
+++ b/tests/e2e/integration/skip-to-list.js
@@ -20,5 +20,8 @@ describe('Skip link list', () => {
   it('Should focus relevant element on link press', () => {
     cy.get('body').tab().click()
     cy.focused().should('have.id', 'main')
+
+    cy.get('body').tab().tab().click()
+    cy.focused().should('have.class', 'footer')
   })
 })

From 9b6b48b527e2717d889ef9e78530795a9e413e4d Mon Sep 17 00:00:00 2001
From: William L <w-lindvall@outlook.com>
Date: Fri, 19 Jun 2020 15:01:07 -0700
Subject: [PATCH 3/3] remove trailing commas

---
 src/VueSkipToSingle.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/VueSkipToSingle.vue b/src/VueSkipToSingle.vue
index c4eae9a..78f6286 100644
--- a/src/VueSkipToSingle.vue
+++ b/src/VueSkipToSingle.vue
@@ -22,7 +22,7 @@ export default {
     to: {
       type: String,
       default: '#main'
-    },
+    }
   },
 
   computed: {
@@ -38,7 +38,7 @@ export default {
     props () {
       if (this.targetIsId) {
         return {
-          href: this.to,
+          href: this.to
         }
       }