为 Select/Dropdown 等组件添加 ARIA 支持

packages/veui/src/components/Calendar.vue

@@ -4,6 +4,8 @@
   :ui="ui"
   role="application"
   aria-label="日历"
+  :aria-disabled="realDisabled"
+  :aria-readonly="realReadonly"
   @mouseleave="markEnd()">
   <slot name="before"/>
   <div

packages/veui/src/components/DatePicker.vue

@@ -10,6 +10,9 @@
     class="veui-date-picker-button"
     :ui="ui"
     :disabled="realDisabled || realReadonly"
+    :aria-disabled="realDisabled"
+    :aria-readonly="realReadonly"
+    aria-haspopup="dialog"
     @click="expanded = !expanded"
     @keydown.down.up.prevent="expanded = true">
     <template v-if="range">
@@ -42,31 +45,33 @@
     :overlay-class="overlayClass"
     autofocus
     modal>
-    <veui-calendar
-      class="veui-date-picker-overlay"
-      v-model="localSelected"
-      v-bind="calendarProps"
-      ref="cal"
-      :ui="inheritedUi"
-      v-outside:button="close"
-      @select="handleSelect"
-      @selectstart="handleProgress"
-      @selectprogress="handleProgress"
-      :panel="realPanel"
-      tabindex="-1"
-      @keydown.esc.native="close">
-      <template :slot="shortcutsPosition" v-if="range && realShortcuts && realShortcuts.length">
-        <div class="veui-date-picker-shortcuts">
-          <button v-for="({from, to, label}, index) in realShortcuts" type="button" :key="index"
-            :class="{
-              'veui-date-picker-shortcut': true,
-              'veui-date-picker-shortcut-selected': isShortcutSelected({from, to})
-            }" @click="handleSelect([from, to])"
-            @mouseenter="handleHoverShortcut([from, to])"
-            @mouseleave="handleHoverShortcut()">{{ label }}</button>
-        </div>
-      </template>
-    </veui-calendar>
+    <div role="dialog">
+      <veui-calendar
+        class="veui-date-picker-overlay"
+        v-model="localSelected"
+        v-bind="calendarProps"
+        ref="cal"
+        :ui="inheritedUi"
+        v-outside:button="close"
+        @select="handleSelect"
+        @selectstart="handleProgress"
+        @selectprogress="handleProgress"
+        :panel="realPanel"
+        tabindex="-1"
+        @keydown.esc.native="close">
+        <template :slot="shortcutsPosition" v-if="range && realShortcuts && realShortcuts.length">
+          <div class="veui-date-picker-shortcuts">
+            <button v-for="({from, to, label}, index) in realShortcuts" type="button" :key="index"
+              :class="{
+                'veui-date-picker-shortcut': true,
+                'veui-date-picker-shortcut-selected': isShortcutSelected({from, to})
+              }" @click="handleSelect([from, to])"
+              @mouseenter="handleHoverShortcut([from, to])"
+              @mouseleave="handleHoverShortcut()">{{ label }}</button>
+          </div>
+        </template>
+      </veui-calendar>
+    </div>
   </veui-overlay>
 </div>
 </template>

packages/veui/src/components/Dropdown.vue

@@ -7,6 +7,8 @@
     class="veui-dropdown-button"
     :ui="ui"
     :disabled="disabled"
+    aria-haspopup="menu"
+    :aria-disabled="String(this.disabled)"
     @keydown.down.up.prevent="expanded = true"
     @click="expanded = !expanded"
     ref="button">
@@ -29,7 +31,9 @@
       class="veui-dropdown-options"
       v-outside:button="close"
       tabindex="-1"
+      role="menu"
       :ui="ui"
+      :aria-expanded="String(expanded)"
       @keydown.esc.stop="expanded = false"
       @keydown.down.prevent="navigate()"
       @keydown.up.prevent="navigate(false)">

packages/veui/src/components/Radio.vue

@@ -47,8 +47,11 @@ export default {
     }
   },
   watch: {
-    checked (val) {
-      this.localChecked = val
+    checked: {
+      handler (val) {
+        this.localChecked = val
+      },
+      immediate: true
     },
     localChecked: {
       handler (val) {
@@ -64,7 +67,9 @@ export default {
     },
     model: {
       handler (val) {
-        this.localChecked = val === null ? false : this.value === val
+        if (val != null) {
+          this.localChecked = val === null ? false : this.value === val
+        }
       },
       immediate: true
     }

packages/veui/src/components/Select/Option.vue

@@ -10,6 +10,8 @@
     'veui-option-selected': selected
   }"
   :autofocus="selected"
+  :role="role"
+  :aria-selected="String(selected)"
   @click.stop="selectOption">
   <slot>
     <span class="veui-option-label"><slot name="label">{{ label }}</slot></span>
@@ -24,6 +26,7 @@ import ui from '../../mixins/ui'
 import menu from '../../mixins/menu'
 import select from '../../mixins/select'
 import { getScrollParent } from '../../utils/dom'
+import { isType } from '../../utils/helper'
 
 export default {
   name: 'veui-option',
@@ -48,6 +51,9 @@ export default {
   computed: {
     selected () {
       return this.value != null && this.value === this.select.value
+    },
+    role () {
+      return isType(this.select, 'input') ? 'option' : 'menuitem'
     }
   },
   methods: {

packages/veui/src/components/Select/OptionGroup.vue

@@ -11,6 +11,7 @@ import keySelect from '../../mixins/key-select'
 import outside from '../../directives/outside'
 import '../../common/uiTypes'
 import { walk } from '../../utils/data'
+import { isType } from '../../utils/helper'
 import { pull } from 'lodash'
 
 export default {
@@ -61,11 +62,15 @@ export default {
     },
     canPopOut () {
       return !!(this.position === 'popout' && this.items && this.items.length && this.label)
+    },
+    popoutRole () {
+      return isType(this.select, 'input') ? 'listbox' : 'menu'
     }
   },
   render () {
     let content = this.options
-      ? this.options.map((option, i) => {
+      ? this.options.map((opt, i) => {
+        let option = { ...opt, selected: opt.value === this.value }
         return option.options
           ? <veui-option-group
             ui={this.inheritedUi}
@@ -127,6 +132,7 @@ export default {
               'veui-option-group-label': true,
               'veui-option-group-button': this.canPopOut
             }}
+            aria-haspopout={this.canPopOut ? this.popoutRole : null}
             {...this.canPopOut
               ? {
                 on: {
@@ -173,6 +179,8 @@ export default {
               ref="box"
               class="veui-select-options"
               tabindex="-1"
+              role={this.popoutRole}
+              aria-expanded={String(this.expanded)}
               ui={this.ui}
               {...{
                 directives: [{

packages/veui/src/components/Select/Select.vue

@@ -85,12 +85,17 @@ export default {
         ref="button"
         class="veui-select-button"
         ui={this.ui}
+        aria-haspopup="listbox"
+        aria-disabled={String(this.realDisabled)}
+        aria-readonly={String(this.realReadonly)}
         disabled={this.realDisabled || this.realReadonly}
         onKeydown={this.handleButtonKeydown}
         onClick={this.handleButtonClick}>
         <span class="veui-select-label">
           {
-            this.$scopedSlots.label ? this.$scopedSlots.label({ label: this.label }) : this.label
+            this.$scopedSlots.label
+              ? this.$scopedSlots.label({ label: this.label })
+              : this.label
           }
         </span>
         <veui-icon
@@ -121,6 +126,8 @@ export default {
                 }]
               }}
               tabindex="-1"
+              role="listbox"
+              aria-expanded={String(this.expanded)}
               ui={this.ui}
               onKeydown={this.handleKeydown}>
               {this.$slots.before}