Select support a part of keyboard accessibility, #1647

梁灏
1 parent 2c6b8f09
Showing 2 changed files with 15 additions and 1 deletions Show diff stats
src/components/select/select.vue
src/styles/components/select.less
 <template>
-    <div :class="classes" v-clickoutside="handleClose">
+    <div
+        tabindex="0"
+        @keydown.down="handleFocus"
+        :class="classes"
+        v-clickoutside="handleClose">
         <div
             :class="selectionCls"
             ref="reference"
@@ -260,6 +264,10 @@
             }
         },
         methods: {
+            // open when focus on Select and press `down` key
+            handleFocus () {
+                if (!this.visible) this.toggleMenu();
+            },
             toggleMenu () {
                 if (this.disabled || this.autoComplete) {
                     return false;
@@ -55,6 +55,12 @@
             transform: rotate(180deg);
         }
     }
+    &:focus{
+        outline: 0;
+        .@{select-prefix-cls}-selection{
+            .active();
+        }
+    }
  
     &-disabled {
         .@{select-prefix-cls}-selection {