vue-a11y · ktquez · May 29, 2020 · May 29, 2020 · Jun 5, 2020
diff --git a/.gitignore b/.gitignore
@@ -1,2 +1,3 @@
 /.eslintcache
 /node_modules/
+docs/.vuepress/dist
diff --git a/README.md b/README.md
@@ -5,33 +5,9 @@
 
 An `eslint` plugin for checking accessibility rules from within `.vue` files.
 
-## Usage
+## Links
 
-Add `vuejs-accessibility` to the plugins section of your `eslint` configuration. You can omit the `eslint-plugin-` prefix:
-
-```json
-{
-  "plugins": ["vuejs-accessibility"]
-}
-```
-
-Then configure the rules you want to use under the rules section.
-
-```json
-{
-  "rules": {
-    "vuejs-accessibility/rule-name": "error"
-  }
-}
-```
-
-You can also enable all the recommended rules at once. Add `plugin:vuejs-accessibility/recommended` in extends:
-
-```json
-{
-  "extends": ["plugin:vuejs-accessibility/recommended"]
-}
-```
+- [Documentation](https://multiselect.vue-a11y.com)
 
 ## Development
 

diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
@@ -0,0 +1,46 @@
+module.exports = {
+  theme: "default-vue-a11y",
+  title: "Eslint plugin vue.js accessibility",
+  themeConfig: {
+    home: false,
+    repo: "vue-a11y/eslint-plugin-vuejs-accessibility",
+    docsDir: "docs",
+    docsBranch: "master",
+    editLinks: true,
+    locales: {
+      "/": {
+        editLinkText: "Edit this page on GitHub",
+        sidebar: [
+          "/",
+          {
+            title: "Rules",
+            collapsable: false,
+            children: [
+              "/rules/alt-text.md",
+              "/rules/anchor-has-content.md",
+              "/rules/accessible-emoji.md",
+              "/rules/aria-props.md",
+              "/rules/aria-role.md",
+              "/rules/aria-unsupported-elements.md",
+              "/rules/click-events-have-key-events.md",
+              "/rules/form-control-has-label.md",
+              "/rules/heading-has-content.md",
+              "/rules/iframe-has-title.md",
+              "/rules/interactive-supports-focus.md",
+              "/rules/label-has-for.md",
+              "/rules/media-has-caption.md",
+              "/rules/mouse-events-have-key-events.md",
+              "/rules/no-access-key.md",
+              "/rules/no-autofocus.md",
+              "/rules/no-distracting-elements.md",
+              "/rules/no-onchange.md",
+              "/rules/no-redundant-roles.md",
+              "/rules/role-has-required-aria-props.md",
+              "/rules/tabindex-no-positive.md"
+            ]
+          }
+        ]
+      }
+    }
+  }
+};
diff --git a/docs/README.md b/docs/README.md
@@ -0,0 +1,41 @@
+# Introduction
+
+An eslint plugin for checking accessibility rules from within .vue files.
+
+## Installation
+
+<br>
+
+```bash
+$ npm install -D eslint-plugin-vuejs-accessibility
+# or
+$ yarn add -D eslint-plugin-vuejs-accessibility
+```
+
+## Usage
+
+Add `vuejs-accessibility` to the plugins section of your `eslint` configuration. You can omit the `eslint-plugin-` prefix:
+
+```json
+{
+  "plugins": ["vuejs-accessibility"]
+}
+```
+
+Then configure the rules you want to use under the rules section.
+
+```json
+{
+  "rules": {
+    "vuejs-accessibility/rule-name": "error"
+  }
+}
+```
+
+You can also enable all the recommended rules at once. Add `plugin:vuejs-accessibility/recommended` in extends:
+
+```json
+{
+  "extends": ["plugin:vuejs-accessibility/recommended"]
+}
+```
diff --git a/docs/accessible-emoji.md → docs/rules/accessible-emoji.md b/docs/accessible-emoji.md → docs/rules/accessible-emoji.md
@@ -12,15 +12,14 @@ This rule takes no arguments.
 
 ### Succeed
 
-```
+```html
 <span role="img" aria-label="Snowman">&#9731;</span>
 <span role="img" aria-label="Panda">🐼</span>
 <span role="img" aria-labelledby="panda1">🐼</span>
 ```
 
 ### Fail
 
-```
-<span>🐼</span>
-<i role="img" aria-label="Panda">🐼</i>
+```html
+<span>🐼</span> <i role="img" aria-label="Panda">🐼</i>
 ```
diff --git a/docs/rules/add-new-rule.md b/docs/rules/add-new-rule.md
diff --git a/docs/alt-text.md → docs/rules/alt-text.md b/docs/alt-text.md → docs/rules/alt-text.md
diff --git a/docs/anchor-has-content.md → docs/rules/anchor-has-content.md b/docs/anchor-has-content.md → docs/rules/anchor-has-content.md
diff --git a/docs/aria-props.md → docs/rules/aria-props.md b/docs/aria-props.md → docs/rules/aria-props.md
diff --git a/docs/aria-role.md → docs/rules/aria-role.md b/docs/aria-role.md → docs/rules/aria-role.md
diff --git a/docs/aria-unsupported-elements.md → docs/rules/aria-unsupported-elements.md b/docs/aria-unsupported-elements.md → docs/rules/aria-unsupported-elements.md
@@ -12,12 +12,12 @@ This rule takes no arguments.
 
 ### Succeed
 
-```
+```html
 <meta charset="UTF-8" />
 ```
 
 ### Fail
 
-```
+```html
 <meta charset="UTF-8" aria-hidden="false" />
 ```
diff --git a/docs/click-events-have-key-events.md → docs/rules/click-events-have-key-events.md b/docs/click-events-have-key-events.md → docs/rules/click-events-have-key-events.md
diff --git a/docs/form-control-has-label.md → docs/rules/form-control-has-label.md b/docs/form-control-has-label.md → docs/rules/form-control-has-label.md
@@ -10,7 +10,7 @@ _References:_
 
 ### Succeed
 
-```
+```html
 <label><input type="text" /></label>
 <input aria-label="test" type="text" />
 <input aria-labelledby="#id" type="text" />
@@ -20,7 +20,6 @@ _References:_
 
 ### Fail
 
-```
-<input value="1" type="text" />
-<textarea value="1"></textarea>
+```html
+<input value="1" type="text" /> <textarea value="1"></textarea>
 ```
diff --git a/docs/heading-has-content.md → docs/rules/heading-has-content.md b/docs/heading-has-content.md → docs/rules/heading-has-content.md
diff --git a/docs/iframe-has-title.md → docs/rules/iframe-has-title.md b/docs/iframe-has-title.md → docs/rules/iframe-has-title.md
diff --git a/docs/interactive-supports-focus.md → docs/rules/interactive-supports-focus.md b/docs/interactive-supports-focus.md → docs/rules/interactive-supports-focus.md
@@ -14,15 +14,15 @@ Replace the component with one that renders semantic html element like `<button>
 
 Add the `tabindex` property to your component. A value of zero indicates that this element can be tabbed to.
 
-```
+```vue
 <div role="button" @click="foo" tabindex="0" />
 ```
 
 ### Case: I got the error "Elements with the '\${role}' interactive role must be focusable". How can I fix this?
 
 This element is part of a group of buttons, links, menu items, etc. Or this element is part of a composite widget. Composite widgets prescribe standard [keyboard interaction patterns](https://www.w3.org/TR/wai-aria-practices-1.1/#kbd_generalnav). Within a group of similar elements -- like a button bar -- or within a composite widget, elements that can be focused are given a tabindex of -1. This makes the element _focusable_ but not _tabbable_. Generally one item in a group should have a tabindex of zero so that a user can tab to the component. Once an element in the component has focus, your key management behaviors will control traversal within the component's pieces. As the UI author, you will need to implement the key handling behaviors such as listening for traversal key (up/down/left/right) presses and moving the page focus between the focusable elements in your widget.
 
-```
+```html
 <div role="menu">
   <div role="menuitem" tabindex="0">Open</div>
   <div role="menuitem" tabindex="-1">Save</div>

diff --git a/docs/label-has-for.md → docs/rules/label-has-for.md b/docs/label-has-for.md → docs/rules/label-has-for.md
diff --git a/docs/media-has-caption.md → docs/rules/media-has-caption.md b/docs/media-has-caption.md → docs/rules/media-has-caption.md
diff --git a/docs/mouse-events-have-key-events.md → docs/rules/mouse-events-have-key-events.md b/docs/mouse-events-have-key-events.md → docs/rules/mouse-events-have-key-events.md
@@ -8,7 +8,7 @@ This rule takes no arguments.
 
 ### Succeed
 
-```
+```vue
 <div @mouseover="foo" @focus="bar" />
 <div @mouseout="foo" @blur="bar" />
 ```

diff --git a/docs/no-access-key.md → docs/rules/no-access-key.md b/docs/no-access-key.md → docs/rules/no-access-key.md
diff --git a/docs/no-autofocus.md → docs/rules/no-autofocus.md b/docs/no-autofocus.md → docs/rules/no-autofocus.md
diff --git a/docs/no-distracting-elements.md → docs/rules/no-distracting-elements.md b/docs/no-distracting-elements.md → docs/rules/no-distracting-elements.md
diff --git a/docs/no-onchange.md → docs/rules/no-onchange.md b/docs/no-onchange.md → docs/rules/no-onchange.md
@@ -13,7 +13,7 @@ This rule takes no arguments.
 
 ### Succeed
 
-```value
+```vue
 <select @blur="handleBlur">
   <option/>
 </select>

diff --git a/docs/no-redundant-roles.md → docs/rules/no-redundant-roles.md b/docs/no-redundant-roles.md → docs/rules/no-redundant-roles.md
diff --git a/docs/role-has-required-aria-props.md → docs/rules/role-has-required-aria-props.md b/docs/role-has-required-aria-props.md → docs/rules/role-has-required-aria-props.md
diff --git a/docs/tabindex-no-positive.md → docs/rules/tabindex-no-positive.md b/docs/tabindex-no-positive.md → docs/rules/tabindex-no-positive.md
diff --git a/package.json b/package.json
@@ -4,6 +4,9 @@
   "description": "An eslint plugin for checking Vue.js files for accessibility",
   "main": "src/index.js",
   "scripts": {
+    "docs:dev": "./node_modules/.bin/vuepress dev docs --no-cache",
+    "docs:build": "./node_modules/.bin/vuepress build docs --no-cache && echo eslint-plugin.vue-a11y.com >> docs/.vuepress/dist/CNAME",
+    "docs:publish": "gh-pages -d docs/.vuepress/dist",
     "lint": "eslint --cache .",
     "test": "jest"
   },
@@ -20,10 +23,14 @@
   "devDependencies": {
     "eslint": "^7.0.0",
     "eslint-plugin-eslint-plugin": "^2.2.1",
+    "gh-pages": "^2.2.0",
     "husky": "^4.2.5",
     "jest": "^26.0.0",
     "prettier": "^2.0.5",
-    "pretty-quick": "^2.0.1"
+    "pretty-quick": "^2.0.1",
+    "vuepress": "^1.5.0",
+    "vuepress-theme-default-vue-a11y": "^0.1.10",
+    "watchpack": "^1.6.1"
   },
   "eslintConfig": {
     "env": {
-Original file line number
+Diff line change
@@ Expand Up / @@ -8,7 +8,7 @@ This rule takes no arguments. @@
     ### Succeed
-    ```
+    ```vue
     <div @mouseover="foo" @focus="bar" />
     <div @mouseout="foo" @blur="bar" />
     ```
@@ Expand Down @@