Merge pull request #2847 from Xotic750/radio_tabindex

Radio: Tabindex WIP

src/components/radio/radio.vue

@@ -1,14 +1,19 @@
 <template>
-    <label :class="wrapClasses">
+    <label
+        :class="wrapClasses"
+        :tabindex="disabled ? -1 : 0"
+        @keyup.space="change">
         <span :class="radioClasses">
             <span :class="innerClasses"></span>
             <input
                 type="radio"
+                tabindex="-1"
                 :class="inputClasses"
                 :disabled="disabled"
                 :checked="currentValue"
                 :name="name"
-                @change="change">
+                @change="change"
+            >
         </span><slot>{{ label }}</slot>
     </label>
 </template>

src/styles/components/radio.less

@@ -16,7 +16,7 @@
     }
 }
 
-// 普通状态
+// 普通状态 - Normal state
 .@{radio-prefix-cls}-wrapper {
     font-size: @font-size-small;
     vertical-align: middle;
@@ -28,6 +28,12 @@
     &-disabled{
         cursor: @cursor-disabled;
     }
+    outline: 0;
+    &:focus {
+        & .@{radio-inner-prefix-cls} {
+            box-shadow: 0 0 0 2px fade(@primary-color, 20%);
+        }
+    }
 }
 
 .@{radio-prefix-cls} {
@@ -110,7 +116,7 @@
     }
 }
 
-// 选中状态
+// 选中状态 - Selected state
 .@{radio-prefix-cls}-checked {
     .@{radio-inner-prefix-cls} {
         border-color: @primary-color;
@@ -156,7 +162,7 @@ span.@{radio-prefix-cls} + * {
     margin-right: 2px;
 }
 
-// 按钮样式
+// 按钮样式 - Button style
 .@{radio-group-button-prefix-cls} {
     font-size: 0;
     -webkit-text-size-adjust:none;
@@ -214,6 +220,13 @@ span.@{radio-prefix-cls} + * {
         &:hover {
             position: relative;
             color: @primary-color;
+            & .@{radio-prefix-cls} {
+                background-color: black;
+            }
+        }
+
+        &:focus {
+            box-shadow: 0 0 0 2px fade(@primary-color, 20%);
         }
 
         .@{radio-prefix-cls}-inner,
@@ -240,6 +253,10 @@ span.@{radio-prefix-cls} + * {
                 color: tint(@primary-color, 20%);
             }
 
+            &:focus {
+                box-shadow: 0 0 0 2px fade(@primary-color, 20%)!important;
+            }
+
             &:active {
                 border-color: shade(@primary-color, 5%);
                 box-shadow: -1px 0 0 0 shade(@primary-color, 5%);
@@ -291,3 +308,4 @@ span.@{radio-prefix-cls} + * {
         border-radius: 0 @btn-border-radius-small @btn-border-radius-small 0;
     }
 }
+