为 Dialog 等组件提供 WAI-ARIA 支持 (#237)

ecomfe · Mar 5, 2018 · ff26e0d · ff26e0d
1 parent 390d401
commit ff26e0d
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 6 deletions.
diff --git a/packages/veui/src/components/Alert.vue b/packages/veui/src/components/Alert.vue
@@ -1,5 +1,6 @@
 <template>
-<div v-if="localOpen" class="veui-alert" :ui="ui" :class="`veui-alert-${type}`">
+<div v-if="localOpen" class="veui-alert" :ui="ui" :class="`veui-alert-${type}`"
+  role="alert" aria-expanded="true">
   <slot name="content">
     <veui-icon class="veui-alert-icon" :name="icons[type]"></veui-icon>
 

diff --git a/packages/veui/src/components/AlertBox.vue b/packages/veui/src/components/AlertBox.vue
@@ -3,7 +3,8 @@
   :open.sync="localOpen"
   :ui="localUi"
   :closable="false"
-  :priority="priority">
+  :priority="priority"
+  role="alertdialog">
   <veui-icon v-if="icons[type]"
     class="veui-alert-box-icon"
     :name="icons[type]">

diff --git a/packages/veui/src/components/ConfirmBox.vue b/packages/veui/src/components/ConfirmBox.vue
@@ -4,7 +4,8 @@
   :priority="priority"
   :closable="false"
   escapable
-  :overlay-class="mergeOverlayClass('veui-confirm-box')">
+  :overlay-class="mergeOverlayClass('veui-confirm-box')"
+  role="alertdialog">
   <template slot="title">
     <slot name="title">{{ title }}</slot>
   </template>

diff --git a/packages/veui/src/components/Dialog.vue b/packages/veui/src/components/Dialog.vue
@@ -12,14 +12,16 @@
     <div class="veui-dialog-content"
       ref="content"
       tabindex="-1"
-      @keydown.esc="handleEscape">
+      @keydown.esc="handleEscape"
+      v-bind="attrs">
       <div class="veui-dialog-content-head"
         :class="{ 'veui-dialog-draggable': draggable }"
         v-drag:content.translate="{ draggable, containment: '@window', ready: dragReady }">
         <span class="veui-dialog-content-head-title"><slot name="title">{{ title }}</slot></span>
         <button type="button" class="veui-dialog-content-head-close"
           v-if="closable"
-          @click="localOpen = false">
+          @click="localOpen = false"
+          aria-label="关闭">
           <veui-icon :name="icons.close"></veui-icon>
         </button>
       </div>
@@ -50,6 +52,7 @@ export default {
     'veui-button': Button,
     'veui-icon': Icon
   },
+  inheritAttrs: false,
   directives: { drag },
   mixins: [ui, icons, overlay],
   props: {
@@ -86,6 +89,13 @@ export default {
     }
   },
   computed: {
+    attrs () {
+      return {
+        role: 'dialog',
+        'aria-modal': String(this.modal),
+        ...this.$attrs
+      }
+    },
     realEscapable () {
       return this.closable || this.escapable
     }

diff --git a/packages/veui/src/components/PromptBox.vue b/packages/veui/src/components/PromptBox.vue
@@ -7,7 +7,8 @@
   @ok="submit"
   escapable
   @escape="cancel"
-  @cancel="cancel">
+  @cancel="cancel"
+  role="alertdialog">
   <template slot="title">
     <slot name="title">{{ title }}</slot>
   </template>