为 ButtonGroup 等组件添加 WAI-ARIA 支持 (#239)

ecomfe · Mar 5, 2018 · 8dec2cd · 8dec2cd
1 parent ff26e0d
commit 8dec2cd
Show file tree

Hide file tree

Showing 11 changed files with 74 additions and 21 deletions.
diff --git a/packages/veui-theme-one/components/checkbox.less b/packages/veui-theme-one/components/checkbox.less
@@ -7,7 +7,11 @@
   line-height: @veui-font-size-large;
   cursor: pointer;
 
-  input,
+  input {
+    position: absolute;
+    opacity: 0;
+  }
+
   .veui-icon {
     display: none;
   }

diff --git a/packages/veui-theme-one/components/radio.less b/packages/veui-theme-one/components/radio.less
@@ -8,7 +8,7 @@
   cursor: pointer;
 
   input {
-    .size(0);
+    position: absolute;
     opacity: 0;
   }
 

diff --git a/packages/veui/src/components/Breadcrumb.vue b/packages/veui/src/components/Breadcrumb.vue
@@ -30,7 +30,7 @@ export default {
   },
   render () {
     return (
-      <ul class="veui-breadcrumb">
+      <ul class="veui-breadcrumb" role="navigation">
         {this.$slots.default || this.localRoutes.map((route, index) => (
           <BreadcrumbItem to={route.to}
             replace={route.replace}

diff --git a/packages/veui/src/components/ButtonGroup.vue b/packages/veui/src/components/ButtonGroup.vue
@@ -1,11 +1,21 @@
 <template>
-<div :class="{
+<div
+  :class="{
     'veui-button-group': true,
     'veui-button-group-disabled': disabled
-  }" :ui="ui">
+  }"
+  :ui="ui"
+  role="group"
+  :aria-disabled="disabled">
   <slot>
-    <veui-button v-for="(item, index) in items" :key="index" :ui="ui"
-      :disabled="disabled || item.disabled" @click="handleClick(item, index)">
+    <veui-button
+      v-for="(item, index) in items"
+      :key="index"
+      :ui="ui"
+      :disabled="disabled || item.disabled"
+      @click="handleClick(item, index)"
+      :aria-posinset="index + 1"
+      :aria-setsize="items.length">
       <slot v-bind="item" :index="index">{{ item.label }}</slot>
     </veui-button>
   </slot>

diff --git a/packages/veui/src/components/CheckButtonGroup.vue b/packages/veui/src/components/CheckButtonGroup.vue
@@ -1,5 +1,10 @@
 <template>
-<div class="veui-check-button-group veui-button-group" :ui="ui">
+<div class="veui-check-button-group veui-button-group"
+  :ui="ui"
+  role="listbox"
+  aria-multiselectable="true"
+  :aria-readonly="String(realReadonly)"
+  :aria-disabled="String(realDisabled)">
   <veui-button
     :class="{
       'veui-button-selected': value.indexOf(item.value) !== -1
@@ -8,7 +13,11 @@
     v-for="(item, index) in items"
     :key="index"
     :disabled="item.disabled || realDisabled || realReadonly"
-    @click="handleChange(item.value)">
+    @click="handleChange(item.value)"
+    role="option"
+    :aria-selected="String(value.indexOf(item.value) !== -1)"
+    :aria-posinset="index + 1"
+    :aria-setsize="items.length">
     <slot v-bind="item">{{ item.label }}</slot>
   </veui-button>
 </div>

diff --git a/packages/veui/src/components/Checkbox.vue b/packages/veui/src/components/Checkbox.vue
@@ -2,7 +2,8 @@
 <label :class="{
     'veui-checkbox': true,
     'veui-disabled': realReadonly || realDisabled
-  }" :ui="ui">
+  }"
+  :ui="ui">
   <input ref="box" type="checkbox" v-bind="attrs" @change="handleChange">
   <span class="veui-checkbox-box">
     <icon v-if="isChecked || localIndeterminate" :name="icons[localIndeterminate ? 'indeterminate' : 'checked']"></icon>
@@ -19,6 +20,7 @@ import { patchIndeterminate } from '../utils/dom'
 
 export default {
   name: 'veui-checkbox',
+  inheritAttrs: false,
   components: {
     Icon
   },
@@ -54,7 +56,8 @@ export default {
       return {
         name: this.realName,
         disabled: this.realDisabled || this.realReadonly,
-        checked: this.isChecked
+        checked: this.isChecked,
+        ...this.$attrs
       }
     },
     isChecked () {

diff --git a/packages/veui/src/components/CheckboxGroup.vue b/packages/veui/src/components/CheckboxGroup.vue
@@ -1,13 +1,23 @@
 <template>
-<div class="veui-checkbox-group" :ui="ui">
+<div
+  class="veui-checkbox-group"
+  :ui="ui"
+  role="listbox"
+  aria-multiselectable="true"
+  :aria-readonly="String(realReadonly)"
+  :aria-disabled="String(realDisabled)">
   <checkbox
     :ui="ui"
     :name="localName"
     v-for="(item, index) in items"
     :key="index"
     :disabled="item.disabled || realDisabled || realReadonly"
     :checked="value.indexOf(item.value) !== -1"
-    @change="checked => handleChange(item.value, checked)">
+    @change="checked => handleChange(item.value, checked)"
+    role="option"
+    :aria-selected="String(value.indexOf(item.value) !== -1)"
+    :aria-posinset="index + 1"
+    :aria-setsize="items.length">
     <slot v-bind="item">{{ item.label }}</slot>
   </checkbox>
 </div>

diff --git a/packages/veui/src/components/Radio.vue b/packages/veui/src/components/Radio.vue
@@ -2,7 +2,8 @@
 <label :class="{
     'veui-radio': true,
     'veui-disabled': realReadonly || realDisabled
-  }" :ui="ui">
+  }"
+  :ui="ui">
   <input type="radio" v-bind="attrs" @change="localChecked = $event.target.checked">
   <span class="veui-radio-box"></span>
   <span class="veui-radio-label"><slot></slot></span>
@@ -14,6 +15,7 @@ import input from '../mixins/input'
 
 export default {
   name: 'veui-radio',
+  inheritAttrs: false,
   mixins: [input],
   model: {
     prop: 'checked',
@@ -37,7 +39,8 @@ export default {
       return {
         checked: this.localChecked,
         name: this.realName,
-        disabled: this.realDisabled || this.realReadonly
+        disabled: this.realDisabled || this.realReadonly,
+        ...this.$attrs
       }
     }
   },

diff --git a/packages/veui/src/components/RadioButtonGroup.vue b/packages/veui/src/components/RadioButtonGroup.vue
@@ -1,5 +1,10 @@
 <template>
-<div class="veui-radio-button-group veui-button-group" :ui="ui">
+<div
+  class="veui-radio-button-group veui-button-group"
+  :ui="ui"
+  role="radiogroup"
+  :aria-readonly="String(realReadonly)"
+  :aria-disabled="String(realDisabled)">
   <veui-button
     :class="{
       'veui-button-selected': item.value === value
@@ -8,7 +13,9 @@
     v-for="(item, index) in items"
     :key="index"
     :disabled="item.disabled || realDisabled || realReadonly"
-    @click="handleChange(item.value)">
+    @click="handleChange(item.value)"
+    role="radio"
+    :aria-selected="String(item.value === value)">
     <slot v-bind="item">{{ item.label }}</slot>
   </veui-button>
 </div>

diff --git a/packages/veui/src/components/RadioGroup.vue b/packages/veui/src/components/RadioGroup.vue
@@ -1,5 +1,10 @@
 <template>
-<div class="veui-radio-group" :ui="ui">
+<div
+  class="veui-radio-group"
+  :ui="ui"
+  role="radiogroup"
+  :aria-readonly="String(realReadonly)"
+  :aria-disabled="String(realDisabled)">
   <radio
     :ui="ui"
     :name="localName"
@@ -8,7 +13,9 @@
     :value="item.value"
     :disabled="item.disabled || realDisabled || realReadonly"
     :checked="item.value === value"
-    @change="checked => handleChange(item.value, checked)">
+    @change="checked => handleChange(item.value, checked)"
+    :aria-posinset="index + 1"
+    :aria-setsize="items.length">
     <slot v-bind="item">{{ item.label }}</slot>
   </radio>
 </div>

diff --git a/packages/veui/src/mixins/input.js b/packages/veui/src/mixins/input.js
@@ -18,10 +18,10 @@ export default {
       return (this.formField && this.formField.name) || this.name
     },
     realDisabled () {
-      return this.disabled || (this.formField && this.formField.realDisabled)
+      return Boolean(this.disabled || (this.formField && this.formField.realDisabled))
     },
     realReadonly () {
-      return this.readonly || (this.formField && this.formField.realReadonly)
+      return Boolean(this.readonly || (this.formField && this.formField.realReadonly))
     },
     ...getTypedAncestorTracker('field', 'formField').computed
   },