fix(checkbox): [checkbox,checkbutton] Improve Checkbox and CheckButton accessibility. (#1581)

* fix(Checkbox): [Checkbox] Improve component accessibility

* fix(checkbox-button): [checkbox-button] Improve component accessibility

packages/theme/src/checkbox-button/index.less

@@ -127,7 +127,9 @@
     text-align: center;
     box-sizing: border-box;
     margin: 0 var(--ti-checkbox-button-margin-horizontal);
-    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+    transition:
+      border-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),
+      background-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
     padding: 12px 20px;
     font-size: var(--ti-checkbox-button-font-size);
     border-radius: var(--ti-checkbox-button-border-radius);
@@ -214,4 +216,9 @@
       }
     }
   }
+
+  input:focus-visible + .@{checkbox-button-prefix-cls}__inner {
+    outline: 2px solid var(--ti-checkbox-button-checked-bg-color);
+    outline-offset: 1px;
+  }
 }

packages/theme/src/checkbox/index.less

@@ -247,6 +247,11 @@
     }
   }
 
+  input:focus-visible + .@{checkbox-prefix-cls}__inner {
+    outline: 2px solid var(--ti-checkbox-bg-color-checked);
+    outline-offset: 1px;
+  }
+
   &__original {
     opacity: 0;
     outline: 0;

packages/vue/src/checkbox-button/src/index.ts

@@ -35,6 +35,10 @@ export default defineComponent({
     events: {
       type: Object,
       default: () => ({})
+    },
+    tabindex: {
+      type: String,
+      default: '0'
     }
   },
   setup(props, context) {

packages/vue/src/checkbox-button/src/pc.vue

@@ -27,6 +27,7 @@
       class="tiny-checkbox-button__original"
       type="checkbox"
       :name="name"
+      :tabindex="tabindex"
       :disabled="state.isDisabled"
       :true-value="trueLabel"
       :false-value="falseLabel"
@@ -40,6 +41,7 @@
       class="tiny-checkbox-button__original"
       type="checkbox"
       :name="name"
+      :tabindex="tabindex"
       :disabled="state.isDisabled"
       :value="label"
       v-model="state.model"
@@ -64,7 +66,19 @@ import { props, setup, defineComponent } from '@opentiny/vue-common'
 
 export default defineComponent({
   emits: ['change', 'update:modelValue'],
-  props: [...props, 'modelValue', 'label', 'text', 'events', 'disabled', 'checked', 'name', 'trueLabel', 'falseLabel'],
+  props: [
+    ...props,
+    'modelValue',
+    'label',
+    'text',
+    'events',
+    'disabled',
+    'checked',
+    'name',
+    'trueLabel',
+    'falseLabel',
+    'tabindex'
+  ],
   setup(props, context) {
     return setup({ props, context, renderless, api })
   }

packages/vue/src/checkbox/src/index.ts

@@ -71,6 +71,10 @@ export const checkboxProps = {
   shape: {
     type: String,
     default: ''
+  },
+  tabindex: {
+    type: String,
+    default: '0'
   }
 }
 

packages/vue/src/checkbox/src/pc.vue

@@ -36,15 +36,11 @@
       :role="indeterminate ? 'checkbox' : undefined"
       :aria-checked="indeterminate ? 'mixed' : false"
     >
-      <span class="tiny-checkbox__inner" tabindex="1">
-        <icon-halfselect v-if="indeterminate && state.shape !== 'filter'" class="tiny-svg-size icon-halfselect" />
-        <icon-checked-sur v-else-if="state.isChecked" class="tiny-svg-size icon-checked-sur" />
-        <icon-check v-else class="tiny-svg-size icon-check" />
-      </span>
       <input
         v-if="trueLabel || falseLabel"
         class="tiny-checkbox__original"
         type="checkbox"
+        :tabindex="tabindex"
         :aria-hidden="indeterminate ? 'true' : 'false'"
         :name="name"
         :disabled="state.isDisabled || state.isDisplayOnly"
@@ -60,6 +56,7 @@
         v-else
         class="tiny-checkbox__original"
         type="checkbox"
+        :tabindex="tabindex"
         :aria-hidden="indeterminate ? 'true' : 'false'"
         :disabled="state.isDisabled || state.isDisplayOnly"
         :value="label"
@@ -70,6 +67,11 @@
         @blur="state.focus = false"
         @click.stop
       />
+      <span class="tiny-checkbox__inner">
+        <icon-halfselect v-if="indeterminate && state.shape !== 'filter'" class="tiny-svg-size icon-halfselect" />
+        <icon-checked-sur v-else-if="state.isChecked" class="tiny-svg-size icon-checked-sur" />
+        <icon-check v-else class="tiny-svg-size icon-check" />
+      </span>
     </span>
     <span
       v-if="(slots.default && slots.default()) || state.isShowText"
@@ -120,7 +122,8 @@ export default defineComponent({
     'border',
     'validateEvent',
     'displayOnly',
-    'shape'
+    'shape',
+    'tabindex'
   ],
   components: {
     IconHalfselect: iconHalfselect(),