Checkbox: Improve screen reader experience (#16575)

packages/checkbox/src/checkbox.vue

@@ -7,9 +7,6 @@
       { 'is-bordered': border },
       { 'is-checked': isChecked }
     ]"
-    role="checkbox"
-    :aria-checked="indeterminate ? 'mixed': isChecked"
-    :aria-disabled="isDisabled"
     :id="id"
   >
     <span class="el-checkbox__input"
@@ -19,14 +16,16 @@
         'is-indeterminate': indeterminate,
         'is-focus': focus
       }"
-       aria-checked="mixed"
+      :tabindex="indeterminate ? 0 : false"
+      :role="indeterminate ? checkbox : false"
+      :aria-checked="indeterminate ? 'mixed' : false"
     >
       <span class="el-checkbox__inner"></span>
       <input
         v-if="trueLabel || falseLabel"
         class="el-checkbox__original"
         type="checkbox"
-        aria-hidden="true"
+        :aria-hidden="indeterminate ? 'true' : 'false'"
         :name="name"
         :disabled="isDisabled"
         :true-value="trueLabel"
@@ -39,7 +38,7 @@
         v-else
         class="el-checkbox__original"
         type="checkbox"
-        aria-hidden="true"
+        :aria-hidden="indeterminate ? 'true' : 'false'"
         :disabled="isDisabled"
         :value="label"
         :name="name"