From 2fbe636b52548f287bb696daf9e9c279a1383232 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A2=81=E7=81=8F?= <admin@aresn.com>
Date: Wed, 14 Mar 2018 14:58:55 +0800
Subject: [PATCH] Select support a part of keyboard accessibility, #1647

---
 src/components/select/select.vue  | 10 +++++++++-
 src/styles/components/select.less |  6 ++++++
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/src/components/select/select.vue b/src/components/select/select.vue
index a6f54c69..3798a397 100644
--- a/src/components/select/select.vue
+++ b/src/components/select/select.vue
@@ -1,5 +1,9 @@
 <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;
diff --git a/src/styles/components/select.less b/src/styles/components/select.less
index 4e2f4d2d..fe860cab 100644
--- a/src/styles/components/select.less
+++ b/src/styles/components/select.less
@@ -55,6 +55,12 @@
             transform: rotate(180deg);
         }
     }
+    &:focus{
+        outline: 0;
+        .@{select-prefix-cls}-selection{
+            .active();
+        }
+    }
 
     &-disabled {
         .@{select-prefix-cls}-selection {