From d41c0c4ba9dfa69870fc9bd09f1e478cc6a9e6d1 Mon Sep 17 00:00:00 2001
From: chikara-chan <771334038@qq.com>
Date: Wed, 10 May 2017 17:02:59 +0800
Subject: [PATCH] feat: popup close button accessible with `tab` key

---
 packages/dialog/src/component.vue          |  9 +++---
 packages/message-box/src/main.vue          |  7 ++--
 packages/theme-default/src/dialog.css      | 22 ++++++++-----
 packages/theme-default/src/message-box.css | 37 +++++++++++++---------
 4 files changed, 46 insertions(+), 29 deletions(-)

diff --git a/packages/dialog/src/component.vue b/packages/dialog/src/component.vue
index 6a3897090..e66bdf87c 100644
--- a/packages/dialog/src/component.vue
+++ b/packages/dialog/src/component.vue
@@ -1,6 +1,6 @@
 <template>
   <transition name="dialog-fade">
-    <div class="el-dialog__wrapper" v-show="visible" @click.self="handleWrapperClick">
+    <div class="el-dialog__wrapper" tabindex="-1" v-show="visible" @click.self="handleWrapperClick">
       <div
         class="el-dialog"
         :class="[sizeClass, customClass]"
@@ -10,9 +10,10 @@
           <slot name="title">
             <span class="el-dialog__title">{{title}}</span>
           </slot>
-          <div class="el-dialog__headerbtn">
-            <i v-if="showClose" class="el-dialog__close el-icon el-icon-close" @click='handleClose'></i>
-          </div>
+          <button type="button" class="el-dialog__headerbtn" aria-label="Close" 
+                  v-if="showClose" @click="handleClose">
+            <i class="el-dialog__close el-icon el-icon-close"></i>
+          </button>
         </div>
         <div class="el-dialog__body" v-if="rendered"><slot></slot></div>
         <div class="el-dialog__footer" v-if="$slots.footer">
diff --git a/packages/message-box/src/main.vue b/packages/message-box/src/main.vue
index 73c6e2125..9b868e42e 100644
--- a/packages/message-box/src/main.vue
+++ b/packages/message-box/src/main.vue
@@ -1,10 +1,13 @@
 <template>
   <transition name="msgbox-fade">
-    <div class="el-message-box__wrapper" v-show="visible" @click.self="handleWrapperClick">
+    <div class="el-message-box__wrapper" tabindex="-1" v-show="visible" @click.self="handleWrapperClick">
       <div class="el-message-box" :class="customClass">
         <div class="el-message-box__header" v-if="title !== undefined">
           <div class="el-message-box__title">{{ title || t('el.messagebox.title') }}</div>
-          <i class="el-message-box__close el-icon-close" @click="handleAction('cancel')" v-if="showClose"></i>
+          <button type="button" class="el-message-box__headerbtn" aria-label="Close" 
+                  v-if="showClose" @click="handleAction('cancel')">
+            <i class="el-message-box__close el-icon-close"></i>
+          </button>
         </div>
         <div class="el-message-box__content" v-if="message !== ''">
           <div class="el-message-box__status" :class="[ typeClass ]"></div>
diff --git a/packages/theme-default/src/dialog.css b/packages/theme-default/src/dialog.css
index 6f7a8495d..fe17e0b8c 100755
--- a/packages/theme-default/src/dialog.css
+++ b/packages/theme-default/src/dialog.css
@@ -44,12 +44,22 @@
       padding: 20px 20px 0;
     }
 
-    @e close {
+    @e headerbtn {
+      float: right;
+      background: transparent;
+      border: none;
+      outline: none;
+      padding: 0;
       cursor: pointer;
-      color: var(--dialog-close-color);
 
-      &:hover {
-        color: var(--dialog-close-hover-color);
+      .el-dialog__close {
+        color: var(--dialog-close-color);
+      }
+      
+      &:focus, &:hover {
+        .el-dialog__close {
+          color: var(--dialog-close-hover-color);
+        }
       }
     }
 
@@ -66,10 +76,6 @@
       font-size: var(--dialog-font-size);
     }
 
-    @e headerbtn {
-      float: right;
-    }
-
     @e footer {
       padding: 10px 20px 15px;
       text-align: right;
diff --git a/packages/theme-default/src/message-box.css b/packages/theme-default/src/message-box.css
index 671911729..7364f88c7 100644
--- a/packages/theme-default/src/message-box.css
+++ b/packages/theme-default/src/message-box.css
@@ -37,6 +37,28 @@
       padding: 20px 20px 0;
     }
 
+    @e headerbtn {
+      position: absolute;
+      top: 19px;
+      right: 20px;
+      background: transparent;
+      border: none;
+      outline: none;
+      padding: 0;
+      cursor: pointer;
+
+      .el-message-box__close {
+        color: #999;
+      }
+      
+      &:focus, &:hover {
+        .el-message-box__close {
+          color: var(--color-primary);
+        }
+      }
+
+    }
+
     @e content {
       padding: 30px 20px;
       color: var(--msgbox-content-color);
@@ -44,21 +66,6 @@
       position: relative;
     }
 
-    @e close {
-      display: inline-block;
-      position: absolute;
-      top: 19px;
-      right: 20px;
-      color: #999;
-      cursor: pointer;
-      line-height: 20px;
-      text-align: center;
-
-      &:hover {
-        color: var(--color-primary);
-      }
-    }
-
     @e input {
       padding-top: 15px;
       & input.invalid {