From 0d2371be545ca5ee094f559197b38ba7f228f819 Mon Sep 17 00:00:00 2001
From: William L <w-lindvall@outlook.com>
Date: Wed, 10 Jun 2020 15:24:04 -0700
Subject: [PATCH 1/4] Format README

---
 README.md | 41 ++++++++++++++++++++++++++++-------------
 1 file changed, 28 insertions(+), 13 deletions(-)

diff --git a/README.md b/README.md
index c6ba4ae..1de0b2b 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,8 @@
 # vue-skip-to
-It helps people who only use the keyboard to jump to what matters most
+
+> Helps people who only use the keyboard to jump to what matters most
+
+## About
 
 The population grows very fast nowadays and with that the number of visually impaired increases as well. Did you know that we have over 350 million visually impaired people in the world?
 
@@ -7,23 +10,28 @@ However, we are responsible for doing our utmost to make our applications usable
 
 "Skip to content" or "skip to a section" of your site is one of the most common accessibility techniques today, but not as used as it should be.
 
-In addition to being a technique recommended by WCAG 2.0, that's where this component was inspired.
-https://www.w3.org/TR/WCAG20-TECHS/G1.html  
-https://www.w3.org/TR/WCAG20-TECHS/G124.html
+This pattern is detailed in the Techniques for WCAG 2.0 in notes [G1](https://www.w3.org/TR/WCAG20-TECHS/G1.html) and [G124](https://www.w3.org/TR/WCAG20-TECHS/G124.html), and also served as the inspiration for creating this component.
 
 ## Install
-#### NPM
+
+### NPM
+
 ```shell
 npm install -S @vue-a11y/skip-to
 ```
 
-#### Yarn
+### Yarn
+
 ```shell
 yarn add @vue-a11y/skip-to
 ```
 
 ## How to use
+
+## Vue SFC
+
 In your `main.js`
+
 ```javascript
 import Vue from 'vue'
 import VueSkipTo from '@vue-a11y/skip-to'
@@ -36,6 +44,7 @@ new Vue({
 ```
 
 In your `App.vue`
+
 ```vue
 <template>
   <div id="app">
@@ -49,6 +58,7 @@ In your `App.vue`
     </div>
   </div>
 </template>
+
 <script>
 export default {
   name: 'app'
@@ -60,7 +70,8 @@ export default {
 </script>
 ```
 
-## Using with HTML files
+### In HTML files
+
 ```html
 <!--omitted -->
   <script src="https://unpkg.com/vue"></script>
@@ -86,22 +97,24 @@ export default {
 </html>
 ```
 
-## Check live demo
-https://vue-skip-to.surge.sh
+## Live demo
 
+[https://vue-skip-to.surge.sh](https://vue-skip-to.surge.sh)
 
 ## Props
+
 Prop            | Data Type  | required  | Description            | Default
 --------------- | ---------- | --------- | ---------------------- | -------------
 `to`            | String     | false     | Set destination ID     | #main
 `text`          | String     | false     | Text content of link   | Skip to main content
 
 ## Custom style
-You can style the link through the selector `.vue-skip-to`
+
+You can style the link through the selector `.vue-skip-to`.
 
 ## Feature
-Inspired by this article, to know more, access the link:  
-http://www.nczonline.net/blog/2013/01/15/fixing-skip-to-content-links/
+
+Inspired by [this article](http://www.nczonline.net/blog/2013/01/15/fixing-skip-to-content-links/).
 
 - This component working in all modern browsers and IE9;
 - Ensures that the target element receives focus, even if it is not a tag that naturally receives focus as the tag `input` and `a`. In this case, the `div` are also given the focus and the `tabindex` attribute with the value of `-1`;
@@ -110,18 +123,20 @@ http://www.nczonline.net/blog/2013/01/15/fixing-skip-to-content-links/
 ## Run the tests
 
 ```shell
-git clone https://github.com/vue-a11y/vue-skip-to.git 
+git clone https://github.com/vue-a11y/vue-skip-to.git
 npm install
 npm run dev
 npm run test:e2e
 ```
 
 Or run Cypress on interactive mode
+
 ```shell
 npm run test:e2e:open
 ```
 
 ## Contributing
+
 - From typos in documentation to coding new features;
 - Check the open issues or open a new issue to start a discussion around your feature idea or the bug you found;
 - Fork repository, make changes and send a pull request;

From bbaf97f39726e3c9cbf4af3edd1fbcf1fb97a008 Mon Sep 17 00:00:00 2001
From: William L <w-lindvall@outlook.com>
Date: Wed, 10 Jun 2020 15:59:00 -0700
Subject: [PATCH 2/4] Note skip-link list usage in README

---
 README.md | 59 ++++++++++++++++++++++++++++++++++++++++++++-----------
 1 file changed, 48 insertions(+), 11 deletions(-)

diff --git a/README.md b/README.md
index 1de0b2b..ab7b0a2 100644
--- a/README.md
+++ b/README.md
@@ -28,11 +28,11 @@ yarn add @vue-a11y/skip-to
 
 ## How to use
 
-## Vue SFC
-
-In your `main.js`
+### Vue SFC
 
 ```javascript
+// main.js
+
 import Vue from 'vue'
 import VueSkipTo from '@vue-a11y/skip-to'
 
@@ -43,16 +43,17 @@ new Vue({
 })
 ```
 
-In your `App.vue`
-
 ```vue
+// App.vue
 <template>
   <div id="app">
     <VueSkipTo to="#main" text="Skip to main content" />
 
     <logo :src="require('@/assets/logo.png')" />
     <h1 data-va="main header">{{ msg }}</h1>
-    ...
+
+    <!-- header, navigation, and more -->
+
     <div id="main" role="main">
       <!-- My content -->
     </div>
@@ -63,13 +64,48 @@ In your `App.vue`
 export default {
   name: 'app'
   components: {
-    Logo
+    Logo,
+    VueSkipTo,
   },
   //...
 }
 </script>
 ```
 
+#### Skip-to list
+
+To use multiple links, simply pass an array into the `to` prop with the following shape:
+
+```json
+[
+  {
+    anchor: '<STRING>',  // destination id
+    label: '<STRING>',   // link text
+  },
+  //...
+]
+```
+
+```vue
+// App.vue
+<template>
+  <div id="app">
+    <vue-skip-to
+      title-list="Skip to"
+      :to="[
+        { anchor: '#main', label: 'Main content' },
+        { anchor: '#footer', label: 'Footer' },
+      ]"
+    ></vue-skip-to>
+
+    <!-- header, navigation, and more -->
+
+    <main id="main"></div>
+    <footer id="footer"></div>
+  </div>
+</template>
+```
+
 ### In HTML files
 
 ```html
@@ -103,10 +139,11 @@ export default {
 
 ## Props
 
-Prop            | Data Type  | required  | Description            | Default
---------------- | ---------- | --------- | ---------------------- | -------------
-`to`            | String     | false     | Set destination ID     | #main
-`text`          | String     | false     | Text content of link   | Skip to main content
+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
 
 ## Custom style
 

From fac2d4fc4bb92a464a71d1e4549f09ab60462c68 Mon Sep 17 00:00:00 2001
From: William L <w-lindvall@outlook.com>
Date: Wed, 10 Jun 2020 16:15:29 -0700
Subject: [PATCH 3/4] Clean up README

---
 README.md | 80 +++++++++++++++++++++++++++----------------------------
 1 file changed, 39 insertions(+), 41 deletions(-)

diff --git a/README.md b/README.md
index ab7b0a2..2fa5019 100644
--- a/README.md
+++ b/README.md
@@ -2,7 +2,6 @@
 
 > Helps people who only use the keyboard to jump to what matters most
 
-## About
 
 The population grows very fast nowadays and with that the number of visually impaired increases as well. Did you know that we have over 350 million visually impaired people in the world?
 
@@ -12,21 +11,19 @@ However, we are responsible for doing our utmost to make our applications usable
 
 This pattern is detailed in the Techniques for WCAG 2.0 in notes [G1](https://www.w3.org/TR/WCAG20-TECHS/G1.html) and [G124](https://www.w3.org/TR/WCAG20-TECHS/G124.html), and also served as the inspiration for creating this component.
 
-## Install
+[Check out the live demo!](https://vue-skip-to.surge.sh)
 
-### NPM
+## Installation
 
 ```shell
+// npm
 npm install -S @vue-a11y/skip-to
-```
 
-### Yarn
-
-```shell
+// yarn
 yarn add @vue-a11y/skip-to
 ```
 
-## How to use
+## Usage
 
 ### Vue SFC
 
@@ -39,24 +36,22 @@ import VueSkipTo from '@vue-a11y/skip-to'
 Vue.use(VueSkipTo)
 
 new Vue({
-  //... options
+  //...
 })
 ```
 
 ```vue
 // App.vue
+
 <template>
   <div id="app">
     <VueSkipTo to="#main" text="Skip to main content" />
 
-    <logo :src="require('@/assets/logo.png')" />
-    <h1 data-va="main header">{{ msg }}</h1>
-
     <!-- header, navigation, and more -->
 
-    <div id="main" role="main">
-      <!-- My content -->
-    </div>
+    <main id="main">
+      <!-- content -->
+    </main>
   </div>
 </template>
 
@@ -79,15 +74,16 @@ To use multiple links, simply pass an array into the `to` prop with the followin
 ```json
 [
   {
-    anchor: '<STRING>',  // destination id
-    label: '<STRING>',   // link text
-  },
+    "anchor": "<STRING>", // destination id
+    "label": "<STRING>" // link text
+  }
   //...
 ]
 ```
 
 ```vue
 // App.vue
+
 <template>
   <div id="app">
     <vue-skip-to
@@ -101,6 +97,7 @@ To use multiple links, simply pass an array into the `to` prop with the followin
     <!-- header, navigation, and more -->
 
     <main id="main"></div>
+
     <footer id="footer"></div>
   </div>
 </template>
@@ -117,11 +114,11 @@ To use multiple links, simply pass an array into the `to` prop with the followin
   <div id="app">
     <vue-skip-to to="#main"></vue-skip-to>
 
-    <!-- my header, navigation, and more -->
+    <!-- header, navigation, and more -->
 
-    <div id="main" role="main">
-      <!-- My content -->
-    </div>
+    <main id="main">
+      <!-- content -->
+    </main>
   </div>
 
   <script>
@@ -133,31 +130,24 @@ To use multiple links, simply pass an array into the `to` prop with the followin
 </html>
 ```
 
-## Live demo
-
-[https://vue-skip-to.surge.sh](https://vue-skip-to.surge.sh)
-
 ## 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
-
-## Custom style
+| 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'              |
 
-You can style the link through the selector `.vue-skip-to`.
+## Custom styling
 
-## Feature
+Override the default styles by targeting the following:
 
-Inspired by [this article](http://www.nczonline.net/blog/2013/01/15/fixing-skip-to-content-links/).
-
-- This component working in all modern browsers and IE9;
-- Ensures that the target element receives focus, even if it is not a tag that naturally receives focus as the tag `input` and `a`. In this case, the `div` are also given the focus and the `tabindex` attribute with the value of `-1`;
-- Add focus to the destination, even when the address bar already has the corresponding hash;
+```css
+.vue-skip-to {
+}
+```
 
-## Run the tests
+## Running tests
 
 ```shell
 git clone https://github.com/vue-a11y/vue-skip-to.git
@@ -172,6 +162,14 @@ Or run Cypress on interactive mode
 npm run test:e2e:open
 ```
 
+## About
+
+This component was inspired by [this article](http://www.nczonline.net/blog/2013/01/15/fixing-skip-to-content-links/).
+
+- This component working in all modern browsers and IE9;
+- Ensures that the target element receives focus, even if it is not a tag that naturally receives focus as the tag `input` and `a`. In this case, the `div` are also given the focus and the `tabindex` attribute with the value of `-1`;
+- Add focus to the destination, even when the address bar already has the corresponding hash;
+
 ## Contributing
 
 - From typos in documentation to coding new features;

From 45f1c95ee5ba45e248f317123eb7e23f13db4acb Mon Sep 17 00:00:00 2001
From: William L <w-lindvall@outlook.com>
Date: Wed, 10 Jun 2020 16:15:43 -0700
Subject: [PATCH 4/4] Add table of contents to README

---
 README.md | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/README.md b/README.md
index 2fa5019..9c2125e 100644
--- a/README.md
+++ b/README.md
@@ -2,6 +2,13 @@
 
 > Helps people who only use the keyboard to jump to what matters most
 
+- [Installation](##installation)
+- [Usage](##usage)
+- [Props](##props)
+- [Custom styling](##custom-styling)
+- [Running tests](##running-tests)
+- [About](##about)
+- [Contributing](##contributing)
 
 The population grows very fast nowadays and with that the number of visually impaired increases as well. Did you know that we have over 350 million visually impaired people in the world?