fix: Rename skip-link list label prop to list-label (#17)

Author: shwilliam

README.md

@@ -52,7 +52,7 @@ new Vue({
 
 <template>
   <div id="app">
-    <VueSkipTo to="#main" text="Skip to main content" />
+    <VueSkipTo to="#main" label="Skip to main content" />
 
     <!-- header, navigation, and more -->
 
@@ -94,7 +94,7 @@ To use multiple links, simply pass an array into the `to` prop with the followin
 <template>
   <div id="app">
     <vue-skip-to
-      title-list="Skip to"
+      list-label="Skip to"
       :to="[
         { anchor: '#main', label: 'Main content' },
         { anchor: '#footer', label: 'Footer' },
@@ -139,11 +139,11 @@ To use multiple links, simply pass an array into the `to` prop with the followin
 
 ## Props
 
-| Prop        | Data Type       | required | Description                                                     | Default                |
-| ----------- | --------------- | -------- | --------------------------------------------------------------- | ---------------------- |
-| `to`        | String \| Array | false    | Destination ID or [array of destination objects](#skip-to-list) | '#main'                |
-| `label`     | String          | false    | Skip link text content                                          | 'Skip to main content' |
-| `titleList` | String          | false    | Skip link list label text                                       | 'Skip to'              |
+| Prop         | Data Type       | required | Description                                                       | Default                |
+| ------------ | --------------- | -------- | ----------------------------------------------------------------- | ---------------------- |
+| `to`         | String \| Array | false    | Destination ID or [array of destination objects](###skip-to-list) | '#main'                |
+| `label`      | String          | false    | Skip link text content                                            | 'Skip to main content' |
+| `list-label` | String          | false    | Skip link list label text                                         | 'Skip to'              |
 
 ## Custom styling
 

demo/skip-to-list.html

@@ -20,15 +20,13 @@
   <div id="app">
     <!-- data-vst used for internal testing, it is NOT required -->
     <vue-skip-to
-      title-list="Skip links"
+      list-label="Skip links"
       :to="[
         { anchor: '#main', label: 'Main content' },
         { anchor: '#footer', label: 'Footer' },
       ]"
       data-vst="skip-to-list"
-    >
-      Skip links
-    </vue-skip-to>
+    ></vue-skip-to>
 
     <header>
       <h1>Press tab</h1>

src/VueSkipTo.vue

@@ -12,7 +12,7 @@ export default {
   name: 'VueSkipTo',
 
   props: {
-    titleList: {
+    listLabel: {
       type: String,
       default: 'Skip to'
     },
@@ -36,7 +36,7 @@ export default {
     },
 
     props () {
-      if (this.isList) return { titleList: this.titleList, to: this.to }
+      if (this.isList) return { listLabel: this.listLabel, to: this.to }
       return { label: this.label, to: this.to }
     }
   }

src/VueSkipToList.vue

@@ -1,6 +1,6 @@
 <template>
   <nav class="vue-skip-to__nav">
-    <span id="list-title">{{ titleList }}</span>
+    <span id="list-title">{{ listLabel }}</span>
     <ul class="vue-skip-to__nav-list">
       <li
         v-for="el in to"
@@ -11,7 +11,7 @@
       >
         <VueSkipToSingle
           :to="el.anchor"
-          :aria-label="el.ariaLabel || `${titleList} ${el.label}`"
+          :aria-label="el.ariaLabel || `${listLabel} ${el.label}`"
         >
           {{ el.label }}
         </VueSkipToSingle>
@@ -27,7 +27,7 @@ export default {
   name: 'VueSkipToList',
 
   props: {
-    titleList: {
+    listLabel: {
       type: String,
       default: 'Skip to'
     },