为 RegionPicker 添加键盘导航 & WAI-ARIA 支持 (#303)

* support focus outside * keyboard nav & WAI-ARIA support for `RegionPicker` * `log10` in `utils/math` * `focusBefore` & `focusAfter` in `utils/dom` * `focus({ visible })` for `Radio` & `Checkbox` * omit delay arg if delay is 0
ecomfe · May 2, 2018 · e750248 · e750248
1 parent 25bf7dd
commit e750248
Show file tree

Hide file tree

Showing 10 changed files with 327 additions and 72 deletions.
diff --git a/packages/veui-theme-one/components/region-picker.less b/packages/veui-theme-one/components/region-picker.less
@@ -8,10 +8,10 @@
   border: 1px solid @veui-gray-color-5;
 
   &-section {
-    border-top: 1px solid @veui-gray-color-5;
+    border-bottom: 1px solid @veui-gray-color-5;
 
-    &:first-child {
-      border-top: none;
+    &:last-child {
+      border-bottom: none;
     }
 
     &-title {

diff --git a/packages/veui/src/components/Carousel.vue b/packages/veui/src/components/Carousel.vue
@@ -133,7 +133,7 @@ export default {
       if (event === 'click') {
         setTimeout(() => {
           this.$refs.item[this.localIndex].focus()
-        }, 0)
+        })
       }
 
       this.localIndex = index

diff --git a/packages/veui/src/components/Checkbox.vue b/packages/veui/src/components/Checkbox.vue
@@ -27,7 +27,7 @@ import Icon from './Icon'
 import input from '../mixins/input'
 import ui from '../mixins/ui'
 import { getListeners } from '../utils/helper'
-import { patchIndeterminate } from '../utils/dom'
+import { patchIndeterminate, focus } from '../utils/dom'
 
 const EVENTS = ['keyup', 'keydown', 'keypress', 'focus', 'blur']
 
@@ -93,6 +93,13 @@ export default {
     },
     toggleChecked () {
       this.localChecked = this.isChecked ? this.falseValue : this.trueValue
+    },
+    focus ({ visible = false }) {
+      if (visible) {
+        focus(this.$refs.box)
+      } else {
+        this.$refs.box.focus()
+      }
     }
   },
   watch: {

diff --git a/packages/veui/src/components/Radio.vue b/packages/veui/src/components/Radio.vue
@@ -6,6 +6,7 @@
   }"
   :ui="ui">
   <input
+    ref="box"
     type="radio"
     v-bind="attrs"
     @change="localChecked = $event.target.checked"
@@ -19,6 +20,7 @@
 import ui from '../mixins/ui'
 import input from '../mixins/input'
 import { getListeners } from '../utils/helper'
+import { focus } from '../utils/dom'
 
 const EVENTS = ['keyup', 'keydown', 'keypress', 'focus', 'blur']
 
@@ -83,6 +85,15 @@ export default {
       },
       immediate: true
     }
+  },
+  methods: {
+    focus ({ visible = false }) {
+      if (visible) {
+        focus(this.$refs.box)
+      } else {
+        this.$refs.box.focus()
+      }
+    }
   }
 }
 </script>