fix: added aria attributes

kouts · Apr 18, 2022 · a10e17b · a10e17b
1 parent f657483
commit a10e17b
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 8 deletions.
diff --git a/docs/options/index.md b/docs/options/index.md
@@ -1,7 +1,9 @@
 ## v-model
-Pass a Boolean value to the ```v-model``` directive to open and close the modal window.
+
+Pass a Boolean value to the `v-model` directive to open and close the modal window.
 
 ## Props
+
 <table class="table table-bordered">
   <thead>
     <tr>
@@ -95,19 +97,29 @@ Pass a Boolean value to the ```v-model``` directive to open and close the modal
       <td>Opens and closes the modal window, this is used by <code>v-model</code> internally.</td>
       <td>Boolean</td>
       <td>false</td>
-    </tr>    
+    </tr>
+    <tr>
+      <td>closeLabel</td>
+      <td>The aria-label attribute of the close button</td>
+      <td>String</td>
+      <td><em>Close</em></td>
+    </tr>        
   </tbody>
 </table>
 
 ## Slots
+
 ### default
+
 The default slot to use for the content of the modal.
 
 ### titlebar
+
 The slot to use for overriding the titlebar of the modal
 
 Default value:
-``` vue
+
+```vue
 <div class="vm-titlebar">
   <h3 class="vm-title">
     {{ title }}
@@ -122,16 +134,19 @@ Default value:
 ```
 
 ### content
+
 The slot to use for overriding the content of the modal
 
 Default value:
-``` vue
+
+```vue
 <div class="vm-content">
   <slot></slot>
 </div>
 ```
 
 ## Events
+
 <table class="table table-bordered">
   <thead>
     <tr>
@@ -169,4 +184,4 @@ Default value:
       <td>Event that fires when the modal closing transition is finished</td>
     </tr>    
   </tbody>
-</table>
+</table>
diff --git a/src/Modal.vue b/src/Modal.vue
@@ -31,20 +31,28 @@
         role="dialog"
         :aria-label="title"
         aria-modal="true"
+        :aria-describedby="`vm-content-${id}`"
+        :aria-labelledby="`vm-title-${id}`"
         @click="clickOutside($event)"
         @keydown="keydown($event)"
       >
         <div ref="vm" class="vm" :data-vm-id="id" :class="modalClass" :style="modalStyle">
           <slot name="titlebar">
             <div class="vm-titlebar">
-              <h3 class="vm-title">
+              <h3 :id="`vm-title-${id}`" class="vm-title">
                 {{ title }}
               </h3>
-              <button v-if="enableClose" type="button" class="vm-btn-close" aria-label="Close" @click.prevent="close"></button>
+              <button
+                v-if="enableClose"
+                type="button"
+                class="vm-btn-close"
+                :aria-label="closeLabel"
+                @click.prevent="close"
+              ></button>
             </div>
           </slot>
           <slot name="content">
-            <div class="vm-content">
+            <div :id="`vm-content-${id}`" class="vm-content">
               <slot></slot>
             </div>
           </slot>
@@ -106,6 +114,10 @@ export default {
     basedOn: {
       type: Boolean,
       default: false
+    },
+    closeLabel: {
+      type: String,
+      default: 'Close'
     }
   },
   data() {