Commit ad2ee431963956f3465e2288d541da04b77a743c
Committed by
GitHub
GitHub
Merge pull request #2849 from Xotic750/checkbox_tabindex
Checkbox: Tabindex WIP
Showing
2 changed files
with
14 additions
and
1 deletions
Show diff stats
src/components/checkbox/checkbox.vue
| 1 | <template> | 1 | <template> |
| 2 | - <label :class="wrapClasses"> | 2 | + <label |
| 3 | + :class="wrapClasses" | ||
| 4 | + @keydown.space.prevent="$el.click()" | ||
| 5 | + tabindex="0"> | ||
| 3 | <span :class="checkboxClasses"> | 6 | <span :class="checkboxClasses"> |
| 4 | <span :class="innerClasses"></span> | 7 | <span :class="innerClasses"></span> |
| 5 | <input | 8 | <input |
| 6 | v-if="group" | 9 | v-if="group" |
| 7 | type="checkbox" | 10 | type="checkbox" |
| 11 | + tabindex="-1" | ||
| 8 | :class="inputClasses" | 12 | :class="inputClasses" |
| 9 | :disabled="disabled" | 13 | :disabled="disabled" |
| 10 | :value="label" | 14 | :value="label" |
| @@ -14,6 +18,7 @@ | @@ -14,6 +18,7 @@ | ||
| 14 | <input | 18 | <input |
| 15 | v-if="!group" | 19 | v-if="!group" |
| 16 | type="checkbox" | 20 | type="checkbox" |
| 21 | + tabindex="-1" | ||
| 17 | :class="inputClasses" | 22 | :class="inputClasses" |
| 18 | :disabled="disabled" | 23 | :disabled="disabled" |
| 19 | :checked="currentValue" | 24 | :checked="currentValue" |
src/styles/mixins/checkbox.less
| @@ -236,6 +236,14 @@ | @@ -236,6 +236,14 @@ | ||
| 236 | font-size: @font-size-small; | 236 | font-size: @font-size-small; |
| 237 | display: inline-block; | 237 | display: inline-block; |
| 238 | margin-right: 8px; | 238 | margin-right: 8px; |
| 239 | + outline: 0; | ||
| 240 | + &:focus, | ||
| 241 | + &:active { | ||
| 242 | + & .@{checkbox-prefix-cls}-inner { | ||
| 243 | + box-shadow: 0 0 0 2px fade(@primary-color, 20%); | ||
| 244 | + } | ||
| 245 | + } | ||
| 246 | + | ||
| 239 | &-disabled{ | 247 | &-disabled{ |
| 240 | cursor: @cursor-disabled; | 248 | cursor: @cursor-disabled; |
| 241 | } | 249 | } |