✨ Updated to [email protected] and added way to disable native dialog…

… element

README.md

@@ -1,6 +1,6 @@
 # Vue A11yDialog
 
-This is a Vue.js wrapper component for [`a11y-dialog`](https://github.com/edenspiekermann/a11y-dialog) ([**demo**](https://codesandbox.io/s/rj20wr1kpp)).
+This is a Vue.js wrapper component for [`a11y-dialog@5.1.0`](https://github.com/edenspiekermann/a11y-dialog) ([**demo**](https://codesandbox.io/s/rj20wr1kpp)).
 
 -   [Install](#install)
 -   [Usage](#usage)
@@ -89,6 +89,18 @@ export default {
 
 > All `a11y-dialog` instance methods are available, see their [docs](https://github.com/edenspiekermann/a11y-dialog#js-api) for more.
 
+### `disable-native`
+-   **Property**: `disable-native`
+-   **Type**: `Boolean`
+-   **Default**: `false`
+-   **Description**: Per default we're using the native `<dialog>` element. However, if you want to disable that and use a `<div role="dialog">` instead, you can just do that by adding this attribute. This gives you full control (and responsibilites) over styling. Read the [`a11y-dialog` Styling layer documentation](http://edenspiekermann.github.io/a11y-dialog/#styling-layer) for more information.
+-   **Usage**:
+```html
+<a11y-dialog disable-native>
+  <!-- ... -->
+</a11y-dialog>
+```
+
 ### `id`
 -   **Property**: `id`
 -   **Type**: `String`

package.json

@@ -30,7 +30,7 @@
     "url": "https://github.com/morkro/vue-a11y-dialog"
   },
   "dependencies": {
-    "a11y-dialog": "^5.0.2"
+    "a11y-dialog": "^5.1.0"
   },
   "peerDependencies": {
     "vue": "2.x"
@@ -40,7 +40,7 @@
     "babel-preset-env": "^1.7.0",
     "eslint": "^4.19.1",
     "eslint-plugin-vue": "^4.5.0",
-    "rollup": "^0.60.4",
+    "rollup": "^0.60.7",
     "rollup-plugin-babel": "^3.0.4",
     "rollup-plugin-babel-minify": "^5.0.0",
     "rollup-plugin-commonjs": "^9.1.3",

src/A11yDialog.vue

@@ -1,12 +1,18 @@
 <template>
   <div :id="id" :class="classNames.base" ref="rootElement">
     <div
+      data-a11y-dialog-hide
       tabIndex="-1"
       :class="classNames.overlay"
       @click="close" />
-    <dialog :class="classNames.element" :aria-labelledby="titleId">
+
+    <component :is="dialogElement"
+      role="dialog"
+      :class="classNames.element"
+      :aria-labelledby="titleId">
       <div role="document" :class="classNames.document">
         <button
+          data-a11y-dialog-hide
           type="button"
           :aria-label="closeButtonLabel"
           @click="close"
@@ -22,7 +28,7 @@
 
         <slot />
       </div>
-    </dialog>
+    </component>
   </div>
 </template>
 
@@ -37,12 +43,16 @@
       appRoot: { type: [String, Array], required: true },
       classNames: { type: Object, default: () => ({}) },
       titleId: { type: String },
-      closeButtonLabel: { type: String, default: 'Close this dialog window' }
+      closeButtonLabel: { type: String, default: 'Close this dialog window' },
+      disableNative: { type: Boolean, default: false }
     },
 
     computed: {
       fullTitleId () {
         return this.titleId || this.id + '-title'
+      },
+      dialogElement () {
+        return this.disableNative ? 'div' : 'dialog'
       }
     },