feat: Support non-ID query selector

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>

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()

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')
   })
 })