feat(a11y): button keyboard and focus (#663)

content/input/button/index-en-US.md

@@ -534,6 +534,12 @@ function SplitButtonDemo(){
 - `aria-label` is used to indicate the function of the button. For icon buttons, we recommend using this attribute
 - `aria-disabled` is synchronized with the disabled attribute, indicating that the button is disabled
 
+### Keyboard and Focus
+
+- `Button`'s focus management is consistent with native `button`, keyboard users can use `Tab` and `Shift + Tab` to switch focus
+- The trigger of `Button` is the same as the native `button`, when the `button` is focused, it can be activated by `Enter` or `Space` key
+- The buttons in the `ButtonGroup` are managed in the same way as the focus of a single `button`, and can be switched by `Tab` and `Shift + Tab`
+
 ## Design Tokens
 <DesignToken/>
 

content/input/button/index.md

@@ -494,6 +494,12 @@ function SplitButtonDemo(){
 - `aria-label` 用于表示按钮的作用，对于图标按钮，我们推荐使用此属性
 - `aria-disabled` 与 disabled 属性同步，表示按钮禁用 
 
+### 键盘和焦点
+
+- Button 的焦点管理与原生 button 一致，键盘用户可以使用 Tab 及  Shift + Tab 切换焦点
+- Button 的触发与原生 button 一致，当按钮聚焦时，可以通过 Enter 或 Space 键激活
+- ButtonGroup 中的按钮与单个按钮的焦点管理方式一致，可以通过 Tab 以及 Shift + Tab 进行切换
+
 ## 设计变量
 <DesignToken/>
 

packages/semi-foundation/button/button.scss

@@ -23,6 +23,11 @@ $module: #{$prefix}-button;
     outline: none;
     vertical-align: middle;
     white-space: nowrap;
+
+    &:focus {
+        outline: $width-button-outline solid $color-button_primary-outline-focus;
+    }
+
     &-danger {
         background-color: $color-button_danger-bg-default;
         color: $color-button_danger-text-default;
@@ -36,6 +41,9 @@ $module: #{$prefix}-button;
         &.#{$module}-borderless {
             color: $color-button_danger-bg-default;
         }
+        &:not(.#{$module}-borderless):not(.#{$module}-light):focus {
+            outline-color: $color-button_danger-outline-focus;
+        }
     }
     &-warning {
         background-color: $color-button_warning-bg-default;
@@ -50,6 +58,9 @@ $module: #{$prefix}-button;
         &.#{$module}-borderless {
             color: $color-button_warning-bg-default;
         }
+        &:not(.#{$module}-borderless):not(.#{$module}-light):focus {
+            outline-color: $color-button_warning-outline-focus;
+        }
     }
     &-tertiary {
         background-color: $color-button_tertiary-bg-default;

packages/semi-foundation/button/variables.scss

@@ -10,6 +10,7 @@ $color-button_primary-text-hover: white; // 主要按钮文字颜色 - 悬浮
 $color-button_primary-bg-active: var(--semi-color-primary-active); // 主要按钮背景颜色 - 按下
 $color-button_primary-border-active: var(--semi-color-primary-active); // 主要按钮描边颜色 - 按下
 $color-button_primary-text-active: white; // 主要按钮文字颜色 - 按下
+$color-button_primary-outline-focus: var(--semi-color-primary-light-active); // 主要按钮轮廓 - 聚焦
 
 // secondary
 $color-button_secondary-bg-default: var(--semi-color-secondary); // 次要按钮背景颜色
@@ -36,6 +37,7 @@ $color-button_danger-text-hover: white; // 危险按钮文字颜色 - 悬浮
 $color-button_danger-bg-active: var(--semi-color-danger-active); // 危险按钮背景颜色 - 按下
 $color-button_danger-border-active: var(--semi-color-danger-active); // 危险按钮描边颜色 - 按下
 $color-button_danger-text-active: white; // 危险按钮文字颜色 - 按下
+$color-button_danger-outline-focus: var(--semi-color-danger-light-active); // 危险按钮轮廓 - 聚焦
 
 // warning
 $color-button_warning-bg-default: var(--semi-color-warning); // 警告按钮背景颜色
@@ -49,6 +51,7 @@ $color-button_warning-text-hover: white; // 警告按钮文字颜色 - 悬浮
 $color-button_warning-bg-active: var(--semi-color-warning-active); // 警告按钮背景颜色 - 按下
 $color-button_warning-border-active: var(--semi-color-warning-active); // 警告按钮描边颜色 - 按下
 $color-button_warning-text-active: white; // 警告按钮文字颜色 - 按下
+$color-button_warning-outline-focus: var(--semi-color-warning-light-active); // 警告按钮轮廓 - 聚焦
 
 // tertiary
 $color-button_tertiary-bg-default: var(--semi-color-tertiary); // 第三按钮背景颜色
@@ -134,3 +137,4 @@ $height-button_default: $height-control-default; // 按钮高度 - 默认
 $width-button-border: $border-thickness;  // 按钮描边宽度
 $radius-button: var(--semi-border-radius-small); // 按钮圆角大小
 $radius-button_group: $radius-button; // 按钮组圆角大小
+$width-button-outline: 2px; // 按钮轮廓宽度