[Button] add accessibility (#6180)

* 	add accessibility for Alert、Button、 Breadcrumb、 Checkbox

* Update checkbox.md

packages/alert/src/main.vue

@@ -1,6 +1,11 @@
 <template>
   <transition name="el-alert-fade">
-    <div class="el-alert" :class="[ typeClass ]" v-show="visible">
+    <div
+      class="el-alert"
+      :class="[ typeClass ]"
+      v-show="visible"
+      role="alert"
+    >
       <i class="el-alert__icon" :class="[ iconClass, isBigIcon ]" v-if="showIcon"></i>
       <div class="el-alert__content">
         <span class="el-alert__title" :class="[ isBoldTitle ]" v-if="title">{{ title }}</span>

packages/breadcrumb/src/breadcrumb-item.vue

@@ -1,6 +1,6 @@
 <template>
   <span class="el-breadcrumb__item">
-    <span class="el-breadcrumb__item__inner" ref="link"><slot></slot></span><span class="el-breadcrumb__separator">{{separator}}</span>
+    <span class="el-breadcrumb__item__inner" ref="link" role="link"><slot></slot></span><span class="el-breadcrumb__separator" role="presentation">{{separator}}</span>
   </span>
 </template>
 <script>
@@ -20,6 +20,7 @@
       var self = this;
       if (this.to) {
         let link = this.$refs.link;
+        link.setAttribute('role', 'link');
         link.addEventListener('click', _ => {
           let to = this.to;
           self.replace ? self.$router.replace(to)

packages/breadcrumb/src/breadcrumb.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="el-breadcrumb">
+  <div class="el-breadcrumb" aria-label="Breadcrumb" role="navigation">
     <slot></slot>
   </div>
 </template>
@@ -12,6 +12,10 @@
         type: String,
         default: '/'
       }
+    },
+    mounted() {
+      const items = this.$el.querySelectorAll('.el-breadcrumb__item');
+      items[items.length - 1].setAttribute('aria-current', 'page');
     }
   };
 </script>

packages/button/src/button.vue

@@ -1,7 +1,8 @@
 <template>
-  <button :disabled="disabled" class="el-button"
+  <button
+    v-bind="$props"
+    class="el-button"
     @click="handleClick"
-    :autofocus="autofocus"
     :type="nativeType"
     :class="[
       type ? 'el-button--' + type : '',

packages/checkbox/src/checkbox-button.vue

@@ -7,6 +7,9 @@
         { 'is-checked': isChecked },
         { 'is-focus': focus },
       ]"
+    role="checkbox"
+    :aria-checked="isChecked"
+    :aria-disabled="disabled"
     >
     <input
       v-if="trueLabel || falseLabel"

packages/checkbox/src/checkbox-group.vue

@@ -26,7 +26,7 @@
 </script>
 
 <template>
-  <div class="el-checkbox-group">
+  <div class="el-checkbox-group" role="group"  aria-label="checkbox-group">
     <slot></slot>
   </div>
 </template>

packages/checkbox/src/checkbox.vue

@@ -1,5 +1,11 @@
 <template>
-  <label class="el-checkbox">
+  <label
+    class="el-checkbox"
+    role="checkbox"
+    :aria-checked="indeterminate ? 'mixed': isChecked"
+    :aria-disabled="disabled"
+    :id="id"
+  >
     <span class="el-checkbox__input"
       :class="{
         'is-disabled': disabled,
@@ -7,6 +13,7 @@
         'is-indeterminate': indeterminate,
         'is-focus': focus
       }"
+       aria-checked="mixed"
     >
       <span class="el-checkbox__inner"></span>
       <input
@@ -120,7 +127,9 @@
       checked: Boolean,
       name: String,
       trueLabel: [String, Number],
-      falseLabel: [String, Number]
+      falseLabel: [String, Number],
+      id: String, /* 当indeterminate为真时，为controls提供相关连的checkbox的id，表明元素间的控制关系*/
+      controls: String /* 当indeterminate为真时，为controls提供相关连的checkbox的id，表明元素间的控制关系*/
     },
 
     methods: {
@@ -146,6 +155,11 @@
 
     created() {
       this.checked && this.addToStore();
+    },
+    mounted() { // 为indeterminate元素 添加aria-controls 属性
+      if (this.indeterminate) {
+        this.$el.setAttribute('aria-controls', this.controls);
+      }
     }
   };
 </script>

packages/theme-default/src/checkbox.css

@@ -70,9 +70,10 @@
           }
         }
       }
-      @when focus {
+      @when focus { /*focus时 视觉上区分*/
         .el-checkbox__inner {
           border-color: var(--checkbox-input-border-color-hover);
+          box-shadow: 0 0 1px 0 var(--checkbox-input-border-color-hover);
         }
       }
       @when indeterminate {
@@ -192,7 +193,6 @@
       outline: none;
       position: absolute;
       margin: 0;
-      visibility: hidden;
       left: -999px;
     }
 
@@ -215,13 +215,6 @@
         box-shadow: none;
       }
     }
-    
-    &.is-focus {
-      & .el-checkbox-button__inner {
-        border-color: var(--checkbox-button-checked-border-color);
-      }
-    }
-
 
     &:first-child {
       .el-checkbox-button__inner {
@@ -230,6 +223,14 @@
         box-shadow: none !important;
       }
     }
+
+    &.is-focus {
+      & .el-checkbox-button__inner {
+        border-color: var(--checkbox-button-checked-border-color);
+        box-shadow: 0 0 1px 0 var(--checkbox-button-checked-border-color) !important;
+      }
+    }
+
     &:last-child {
       .el-checkbox-button__inner {
         border-radius: 0 var(--border-radius-base) var(--border-radius-base) 0;