From 3ed478d26d137aefcca39ae30815448f549712b2 Mon Sep 17 00:00:00 2001
From: AcWrong02 <147061401+AcWrong02@users.noreply.github.com>
Date: Tue, 30 Apr 2024 12:09:38 +0800
Subject: [PATCH] fix(button & button-grounp): [button, button-group]improve
 the accessibility (#1586)

* fix(button): [button]modify the button prop tabindex's default value to 0

* fix(button-grounp): [button-group]improve the tab select style
---
 packages/theme/src/button-group/index.less | 13 +++++++++----
 packages/vue/src/button-group/src/pc.vue   |  1 +
 packages/vue/src/button/src/index.ts       |  2 +-
 3 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/packages/theme/src/button-group/index.less b/packages/theme/src/button-group/index.less
index a1a260b7d..03715a12e 100644
--- a/packages/theme/src/button-group/index.less
+++ b/packages/theme/src/button-group/index.less
@@ -60,17 +60,24 @@
         padding: 0 var(--ti-button-group-btn-padding-horizontal);
         text-decoration: none;
         font-size: var(--ti-button-group-item-btn-font-size);
-        outline: none;
+
         cursor: pointer;
-        transition: all 0.3s;
+        transition:
+          background ease-in 0.3s,
+          border ease-in 0.3s;
         border-radius: var(--ti-button-group-middle-border-radius);
 
+        &:focus-visible {
+          outline: 2px solid var(--ti-button-group-item-active-bg-color);
+        }
+
         &.disabled,
         &[disabled] {
           background: var(--ti-button-group-item-btn-disabled-bg-color);
           border-color: var(--ti-button-group-item-btn-disabled-border-color);
           cursor: not-allowed;
           color: var(--ti-button-group-item-disabled-text-color);
+          outline: none;
         }
 
         &.plain,
@@ -86,7 +93,6 @@
           background: var(--ti-button-group-item-btn-hover-bg-color);
           color: var(--ti-button-group-item-btn-hover-text-color);
           border-color: var(--ti-button-group-item-btn-hover-border-color);
-          outline: none;
 
           &.plain,
           &[plain] {
@@ -120,7 +126,6 @@
             background: var(--ti-button-group-item-active-bg-color);
             color: var(--ti-button-group-item-active-text-color);
             border-color: var(--ti-button-group-item-active-border-color);
-            outline: none;
 
             &.plain,
             &[plain] {
diff --git a/packages/vue/src/button-group/src/pc.vue b/packages/vue/src/button-group/src/pc.vue
index d50ca629f..b5b500eca 100644
--- a/packages/vue/src/button-group/src/pc.vue
+++ b/packages/vue/src/button-group/src/pc.vue
@@ -25,6 +25,7 @@
                 'line-height': size === 'medium' ? '40px' : size === 'small' ? '30px' : size === 'mini' ? '22px' : ''
               }"
               type="button"
+              :tabindex="getItemClass(node).disabled ? '-1' : '0'"
               @click="handleClick(node)"
             >
               {{ node[textField] }}
diff --git a/packages/vue/src/button/src/index.ts b/packages/vue/src/button/src/index.ts
index 5ff581190..08ab78cfa 100644
--- a/packages/vue/src/button/src/index.ts
+++ b/packages/vue/src/button/src/index.ts
@@ -18,7 +18,7 @@ export const buttonProps = {
     type: String,
     default: 'default'
   },
-  tabindex: { type: String, default: '1' },
+  tabindex: { type: String, default: '0' },
   icon: {
     type: [Object, String],
     default: ''