Merge pull request #2849 from Xotic750/checkbox_tabindex

Checkbox: Tabindex WIP

Merge pull request #2849 from Xotic750/checkbox_tabindex
Checkbox: Tabindex WIP
Aresn · GitHub
2 parents a43f9d7c 78a66116
Showing 2 changed files with 14 additions and 1 deletions Show diff stats
src/components/checkbox/checkbox.vue
src/styles/mixins/checkbox.less
 <template>
-    <label :class="wrapClasses">
+    <label 
+        :class="wrapClasses" 
+        @keydown.space.prevent="$el.click()"
+        tabindex="0">
         <span :class="checkboxClasses">
             <span :class="innerClasses"></span>
             <input
                 v-if="group"
                 type="checkbox"
+                 tabindex="-1"
                 :class="inputClasses"
                 :disabled="disabled"
                 :value="label"
@@ -14,6 +18,7 @@
             <input
                 v-if="!group"
                 type="checkbox"
+                 tabindex="-1"
                 :class="inputClasses"
                 :disabled="disabled"
                 :checked="currentValue"
@@ -236,6 +236,14 @@
         font-size: @font-size-small;
         display: inline-block;
         margin-right: 8px;
+        outline: 0;
+        &:focus,
+        &:active {
+            & .@{checkbox-prefix-cls}-inner {
+                box-shadow: 0 0 0 2px fade(@primary-color, 20%);
+            }
+        }
+
         &-disabled{
             cursor: @cursor-disabled;
         }