[Button] add accessibility (#6180)

* 	add accessibility for Alert、Button、 Breadcrumb、 Checkbox

* Update checkbox.md

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>