fix(Switch): [Switch] add keydown support and improth the accessibili…

…ty (#1428)
opentiny · Feb 28, 2024 · e32c022 · e32c022
1 parent 990c9fb
commit e32c022
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 1 deletion.
diff --git a/packages/theme/src/switch/index.less b/packages/theme/src/switch/index.less
@@ -29,7 +29,14 @@
   position: relative;
   cursor: pointer;
   outline: none;
-  transition: all 0.2s ease-in-out;
+  transition:
+    border 0.2s ease-in-out,
+    background-color 0.2s ease-in-out;
+
+  &:focus-visible {
+    outline: 2px solid var(--ti-switch-on-bg-color);
+    outline-offset: 1px;
+  }
 
   & &-inner {
     color: var(--ti-switch-text-color);

diff --git a/packages/vue/src/switch/src/pc.vue b/packages/vue/src/switch/src/pc.vue
@@ -16,6 +16,7 @@
     :tabindex="tabindex"
     @click="toggle"
     @keydown.space="toggle"
+    @keydown.enter="toggle"
   >
     <span :class="state.innerClasses">
       <div v-if="!mini && state.showText">