Merge pull request #6 from morkro/fix/dialog-root-container

Fixes broken a11y by adding dialog container
morkro · Dec 14, 2018 · ed90c91 · ed90c91
2 parents 8244a8f + 744a822
commit ed90c91
Show file tree

Hide file tree

Showing 7 changed files with 238 additions and 150 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -21,6 +21,13 @@ module.exports = {
         'allowFirstLine': true
       }
     }],
+    'vue/component-name-in-template-casing': ['error', 'kebab-case', {
+      'ignores': []
+    }],
+    'vue/html-closing-bracket-newline': ['error', {
+      'singleline': 'never',
+      'multiline': 'never'
+    }],
     'indent': 'off',
     // allow paren-less arrow functions
     'arrow-parens': 'off',

diff --git a/README.md b/README.md
@@ -35,7 +35,12 @@ Then use it as follows:
       Open dialog
     </button>
 
-    <a11y-dialog id="app-dialog" app-root="#app" @dialog-ref="assignDialogRef">
+    <a11y-dialog
+      id="app-dialog"
+      app-root="#app"
+      dialog-root="#dialog-root"
+      @dialog-ref="assignDialogRef"
+    >
       <h1 slot="title">Your dialog title</h1>
       <div>
         <p>Your content</p>
@@ -66,6 +71,19 @@ export default {
 }
 ```
 
+In your `index.html`, add a container where your dialog will be rendered into.
+
+```html
+<!DOCTYPE html>
+<html>
+  <body>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+    <div id="dialog-root"></div>
+  </body>
+</html>
+```
+
 It's important to assign the direct reference to the dialog instance via `@dialog-ref`, otherwise there is no way to call its methods.
 
 Alternatively, you can also import the component directly into your file without installing it first:
@@ -114,7 +132,7 @@ export default {
 ```
 
 ### `app-root`
--   **Property**: `appRoot`
+-   **Property**: `app-root`
 -   **Type**: `String`, `Array<String>` — CSS Selector string.
 -   **Required**: `true`
 -   **Description**: The selector(s) `a11y-dialog` needs to disable when the dialog is open.
@@ -125,6 +143,18 @@ export default {
 </a11y-dialog>
 ```
 
+### `dialog-root`
+-   **Property**: `dialog-root`
+-   **Type**: `String` — CSS Selector string.
+-   **Required**: `true`
+-   **Description**: The container for the dialog to be rendered into.
+-   **Usage**:
+```html
+<a11y-dialog dialog-root="#dialog-root">
+  <!-- ... -->
+</a11y-dialog>
+```
+
 ### `class-names`
 -   **Property**: `class-names`
 -   **Type**: `Object`
@@ -139,7 +169,7 @@ export default {
 ```
 
 ### `title-id`
--   **Property**: `titleId`
+-   **Property**: `title-id`
 -   **Type**: `String`
 -   **Required**: `false`
 -   **Default**: Defaults to `id + '-title'`.
@@ -152,7 +182,7 @@ export default {
 ```
 
 ### `close-button-label`
--   **Property**: `closeButtonLabel`
+-   **Property**: `close-button-label`
 -   **Type**: `String`
 -   **Required**: `false`
 -   **Default**: `'Close this dialog window'`

diff --git a/dist/vue-a11y-dialog.js b/dist/vue-a11y-dialog.js