✨ Adds alertdialog feature

Author: morkro

README.md

@@ -164,6 +164,19 @@ export default {
 </a11y-dialog>
 ```
 
+### `role`
+-   **Property**: `role`
+-   **Type**: `String`
+-   **Required**: `false`
+-   **Default**: `dialog`
+-   **Description**: The `role` attribute of the dialog element, either `dialog` (default) or `alertdialog` to make it a modal (preventing closing on click outside of <kbd>ESC</kbd> key).
+-   **Usage**:
+```html
+<a11y-dialog role="alertdialog">
+  <!-- ... -->
+</a11y-dialog>
+```
+
 ## Events
 
 ### `dialog-ref`

package-lock.json

@@ -30,7 +30,7 @@
     "url": "https://github.com/morkro/vue-a11y-dialog"
   },
   "dependencies": {
-    "a11y-dialog": "^5.1.0"
+    "a11y-dialog": "^5.2.0"
   },
   "peerDependencies": {
     "vue": "2.x"

package.json

@@ -4,10 +4,10 @@
       data-a11y-dialog-hide
       tabIndex="-1"
       :class="classNames.overlay"
-      @click="close" />
+      @click="role === 'alertdialog' ? undefined : close" />
 
     <component :is="dialogElement"
-      role="dialog"
+      :role="role"
       :class="classNames.element"
       :aria-labelledby="titleId">
       <div role="document" :class="classNames.document">
@@ -35,6 +35,10 @@
 <script>
   import A11yDialog from 'a11y-dialog'
 
+  function roleValidator (value) {
+    return ['dialog', 'alertdialog'].includes(value)
+  }
+
   export default {
     name: 'VueA11yDialog',
 
@@ -44,7 +48,8 @@
       classNames: { type: Object, default: () => ({}) },
       titleId: { type: String },
       closeButtonLabel: { type: String, default: 'Close this dialog window' },
-      disableNative: { type: Boolean, default: false }
+      disableNative: { type: Boolean, default: false },
+      role: { type: String, default: 'dialog', validator: roleValidator }
     },
 
     computed: {