@douyinfe/semi-foundation 2.15.1 → 2.16.0

package/input/input.scss

@@ -77,7 +77,7 @@ $module: #{$prefix}-input;
         }
 
         &:active {
-            background-color: $color-input_default-bg-focus;
+            background-color: $color-input_default-bg-active;
             border-color: $color-input_default-border-focus;
         }
     }
@@ -100,10 +100,10 @@ $module: #{$prefix}-input;
             border-color: $color-input_danger-border-focus;
         }
 
-        // &:active {
-        //     background-color: $color-input_danger-bg-active;
-        //     border-color: $color-input_danger-border-active;
-        // }
+        &:active {
+            background-color: $color-input_danger-bg-active;
+            border-color: $color-input_danger-border-focus;
+        }
     }
 
     &-warning {
@@ -120,10 +120,10 @@ $module: #{$prefix}-input;
             border-color: $color-input_warning-border-focus;
         }
 
-        // &:active {
-        //     background-color: $color-input_warning-bg-active;
-        //     border-color: $color-input_warning-border-active;
-        // }
+        &:active {
+            background-color: $color-input_warning-bg-active;
+            border-color: $color-input_warning-border-focus;
+        }
     }
 
     &__with-prefix {
@@ -288,6 +288,16 @@ $module: #{$prefix}-input;
                 }
             }
 
+            // when have prepend and append, only make the input have active bg color
+            &:active {
+                background-color: $color-input_default-bg-active;
+
+                & + .#{$module}-clearbtn,
+                & ~ .#{$module}-modebtn {
+                    background-color: $color-input_default-bg-active;
+                }
+            }
+
             &-clearbtn,
             &-modebtn,
             &-clearbtn:hover,
@@ -328,6 +338,16 @@ $module: #{$prefix}-input;
                     }
                 }
 
+                &:active {
+                    background-color:  $color-input_danger-bg-active;
+
+                    & + .#{$module}-clearbtn,
+                    & + .#{$module}-modebtn {
+                        background-color: $color-input_danger-bg-active;
+                        border-color: $color-input_danger-border-focus;
+                    }
+                }
+
                 &-clearbtn,
                 &-modebtn,
                 &-clearbtn:hover,
@@ -369,6 +389,16 @@ $module: #{$prefix}-input;
                     }
                 }
 
+                &:active {
+                    background-color:  $color-input_warning-bg-active;
+
+                    & + .#{$module}-clearbtn,
+                    & + .#{$module}-modebtn {
+                        background-color: $color-input_warning-bg-active;
+                        border-color: $color-input_warning-border-focus;
+                    }
+                }
+
                 &-clearbtn,
                 &-modebtn,
                 &-clearbtn:hover,

package/input/textarea.scss

@@ -90,7 +90,7 @@ $module: #{$prefix}-input;
 
         &:active {
             background-color: $color-input_danger-bg-active;
-            border-color: $color-input_danger-border-active;
+            border-color: $color-input_danger-border-focus;
         }
     }
 
@@ -110,7 +110,7 @@ $module: #{$prefix}-input;
 
         &:active {
             background-color: $color-input_warning-bg-active;
-            border-color: $color-input_warning-border-active;
+            border-color: $color-input_warning-border-focus;
         }
     }
 

package/lib/cjs/input/input.css

@@ -68,7 +68,7 @@
   border-color: var(--semi-color-focus-border);
 }
 .semi-input-wrapper-focus:active {
-  background-color: var(--semi-color-fill-0);
+  background-color: var(--semi-color-fill-2);
   border-color: var(--semi-color-focus-border);
 }
 .semi-input-wrapper.semi-input-readonly {
@@ -86,6 +86,10 @@
   background-color: var(--semi-color-danger-light-default);
   border-color: var(--semi-color-danger);
 }
+.semi-input-wrapper-error:active {
+  background-color: var(--semi-color-danger-light-active);
+  border-color: var(--semi-color-danger);
+}
 .semi-input-wrapper-warning {
   background-color: var(--semi-color-warning-light-default);
   border-color: var(--semi-color-warning-light-default);
@@ -98,6 +102,10 @@
   background-color: var(--semi-color-warning-light-default);
   border-color: var(--semi-color-warning);
 }
+.semi-input-wrapper-warning:active {
+  background-color: var(--semi-color-warning-light-active);
+  border-color: var(--semi-color-warning);
+}
 .semi-input-wrapper__with-prefix {
   display: inline-flex;
   align-items: center;
@@ -218,6 +226,12 @@
 .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:focus ~ .semi-input-modebtn:not(:last-child), .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:focus ~ .semi-input-modebtn:not(:last-child) {
   border-radius: 0;
 }
+.semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:active, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:active {
+  background-color: var(--semi-color-fill-2);
+}
+.semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:active + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:active ~ .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:active + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:active ~ .semi-input-modebtn {
+  background-color: var(--semi-color-fill-2);
+}
 .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input-clearbtn:hover, .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input-modebtn:hover, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input-clearbtn:hover, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input-modebtn:hover {
   background-color: var(--semi-color-fill-0);
 }
@@ -246,6 +260,13 @@
   background-color: var(--semi-color-danger-light-default);
   border-color: var(--semi-color-danger);
 }
+.semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input:active, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input:active {
+  background-color: var(--semi-color-danger-light-active);
+}
+.semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input:active + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input:active + .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input:active + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input:active + .semi-input-modebtn {
+  background-color: var(--semi-color-danger-light-active);
+  border-color: var(--semi-color-danger);
+}
 .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input-clearbtn:hover, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input-modebtn:hover, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input-clearbtn:hover, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input-modebtn:hover {
   background-color: var(--semi-color-danger-light-default);
 }
@@ -274,6 +295,13 @@
   background-color: var(--semi-color-warning-light-default);
   border-color: var(--semi-color-warning);
 }
+.semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input:active, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input:active {
+  background-color: var(--semi-color-warning-light-active);
+}
+.semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input:active + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input:active + .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input:active + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input:active + .semi-input-modebtn {
+  background-color: var(--semi-color-warning-light-active);
+  border-color: var(--semi-color-warning);
+}
 .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input-clearbtn:hover, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input-modebtn:hover, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input-clearbtn:hover, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input-modebtn:hover {
   background-color: var(--semi-color-warning-light-default);
 }

package/lib/cjs/input/input.scss

@@ -77,7 +77,7 @@ $module: #{$prefix}-input;
         }
 
         &:active {
-            background-color: $color-input_default-bg-focus;
+            background-color: $color-input_default-bg-active;
             border-color: $color-input_default-border-focus;
         }
     }
@@ -100,10 +100,10 @@ $module: #{$prefix}-input;
             border-color: $color-input_danger-border-focus;
         }
 
-        // &:active {
-        //     background-color: $color-input_danger-bg-active;
-        //     border-color: $color-input_danger-border-active;
-        // }
+        &:active {
+            background-color: $color-input_danger-bg-active;
+            border-color: $color-input_danger-border-focus;
+        }
     }
 
     &-warning {
@@ -120,10 +120,10 @@ $module: #{$prefix}-input;
             border-color: $color-input_warning-border-focus;
         }
 
-        // &:active {
-        //     background-color: $color-input_warning-bg-active;
-        //     border-color: $color-input_warning-border-active;
-        // }
+        &:active {
+            background-color: $color-input_warning-bg-active;
+            border-color: $color-input_warning-border-focus;
+        }
     }
 
     &__with-prefix {
@@ -288,6 +288,16 @@ $module: #{$prefix}-input;
                 }
             }
 
+            // when have prepend and append, only make the input have active bg color
+            &:active {
+                background-color: $color-input_default-bg-active;
+
+                & + .#{$module}-clearbtn,
+                & ~ .#{$module}-modebtn {
+                    background-color: $color-input_default-bg-active;
+                }
+            }
+
             &-clearbtn,
             &-modebtn,
             &-clearbtn:hover,
@@ -328,6 +338,16 @@ $module: #{$prefix}-input;
                     }
                 }
 
+                &:active {
+                    background-color:  $color-input_danger-bg-active;
+
+                    & + .#{$module}-clearbtn,
+                    & + .#{$module}-modebtn {
+                        background-color: $color-input_danger-bg-active;
+                        border-color: $color-input_danger-border-focus;
+                    }
+                }
+
                 &-clearbtn,
                 &-modebtn,
                 &-clearbtn:hover,
@@ -369,6 +389,16 @@ $module: #{$prefix}-input;
                     }
                 }
 
+                &:active {
+                    background-color:  $color-input_warning-bg-active;
+
+                    & + .#{$module}-clearbtn,
+                    & + .#{$module}-modebtn {
+                        background-color: $color-input_warning-bg-active;
+                        border-color: $color-input_warning-border-focus;
+                    }
+                }
+
                 &-clearbtn,
                 &-modebtn,
                 &-clearbtn:hover,

package/lib/cjs/input/textarea.css

@@ -72,7 +72,7 @@
 }
 .semi-input-textarea-wrapper-error:active {
   background-color: var(--semi-color-danger-light-active);
-  border-color: var(--semi-color-danger-light-active);
+  border-color: var(--semi-color-danger);
 }
 .semi-input-textarea-wrapper-warning {
   background-color: var(--semi-color-warning-light-default);
@@ -88,7 +88,7 @@
 }
 .semi-input-textarea-wrapper-warning:active {
   background-color: var(--semi-color-warning-light-active);
-  border-color: var(--semi-color-warning-light-active);
+  border-color: var(--semi-color-warning);
 }
 
 .semi-input-textarea {

package/lib/cjs/input/textarea.scss

@@ -90,7 +90,7 @@ $module: #{$prefix}-input;
 
         &:active {
             background-color: $color-input_danger-bg-active;
-            border-color: $color-input_danger-border-active;
+            border-color: $color-input_danger-border-focus;
         }
     }
 
@@ -110,7 +110,7 @@ $module: #{$prefix}-input;
 
         &:active {
             background-color: $color-input_warning-bg-active;
-            border-color: $color-input_warning-border-active;
+            border-color: $color-input_warning-border-focus;
         }
     }
 

package/lib/cjs/select/select.css

@@ -283,11 +283,11 @@
   align-items: center;
 }
 .semi-select-prefix-text, .semi-select-suffix-text {
-  margin: 0 12px;
+  margin: 0px 12px;
 }
 .semi-select-prefix-icon, .semi-select-suffix-icon {
   color: var(--semi-color-text-2);
-  margin: 0 8px;
+  margin: 0px 8px;
 }
 .semi-select-suffix {
   display: flex;

package/lib/cjs/select/variables.scss

@@ -58,16 +58,16 @@ $width-select_arrow: 32px; // 选择器输入框下拉箭头宽度
 $width-select_arrow_empty: 12px; // 选择器输入框下拉箭头为空时（有suffix icon）宽度
 $width-select_clear-icon: 32px; // 选择器输入框清空按钮宽度
 $width-select_group_top-border: $border-thickness-control; // 选择器菜单分组标题描边宽度
-$height-select_multiple_content_wrapper-minHeight: $height-select_default - 2; // 多项选择器标签组最小宽度
+$height-select_multiple_content_wrapper-minHeight: $height-select_default - 2px; // 多项选择器标签组最小宽度
 $width-select-border-hover: $width-select-border;  // 选择器输入框描边宽度 - 悬浮
 $width-select-border-focus: $width-select-border-hover; // 选择器输入框描边宽度 - 按下
 $width-select-border-active: $width-select-border-focus; // 选择器输入框描边宽度 - 选中
 // Spacing
 $spacing-select_option_tick-marginRight: $spacing-tight; // 选择器菜单选中对勾右侧外边距
 $spacing-select_prefix_suffix_text-marginX: $spacing-base-tight; // 选择器输入框前后缀文本水平内边距
-$spacing-select_prefix_suffix_text-marginY: 0; // 选择器输入框前后缀文本垂直内边距
+$spacing-select_prefix_suffix_text-marginY: 0px; // 选择器输入框前后缀文本垂直内边距
 $spacing-select_prefix_suffix_icon-marginX: $spacing-tight; // 选择器输入框前后缀图标水平内边距
-$spacing-select_prefix_suffix_icon-marginY: 0; // 选择器输入框前后缀图标垂直内边距
+$spacing-select_prefix_suffix_icon-marginY: 0px; // 选择器输入框前后缀图标垂直内边距
 $spacing-select_create_tips-marginRight: $spacing-extra-tight; // 创建新选项右侧外边距
 $spacing-select_group-marginTop: $spacing-extra-tight; // 选择器菜单分组标题顶部外边距
 $spacing-select_group-paddingTop: $spacing-base-tight; // 选择器菜单分组标题顶部内边距
@@ -106,5 +106,5 @@ $font-select_inset_label-fontWeight: 600; // 选择器内嵌标签文本字重
 $font-select_keyword-fontWeight: 600; // 选择器搜索结果命关键词中文本字重
 
 // Other
-$opacity-select_selection_text_inactive: .4;
+$opacity-select_selection_text_inactive: 0.4;
 

package/lib/cjs/slider/foundation.d.ts

@@ -26,7 +26,7 @@ export interface SliderProps {
     'aria-label'?: string;
     'aria-labelledby'?: string;
     'aria-valuetext'?: string;
-    getAriaValueText?: (value: number) => string;
+    getAriaValueText?: (value: number, index?: number) => string;
 }
 export interface SliderState {
     currentValue: number | number[];
@@ -40,6 +40,8 @@ export interface SliderState {
     clickValue: 0;
     showBoundary: boolean;
     isInRenderTree: boolean;
+    firstDotFocusVisible: boolean;
+    secondDotFocusVisible: boolean;
 }
 export interface SliderLengths {
     sliderX: number;
@@ -53,7 +55,6 @@ export interface ScrollParentVal {
 }
 export interface OverallVars {
     dragging: boolean[];
-    chooseMovePos: 'min' | 'max';
 }
 export interface SliderAdapter extends DefaultAdapter<SliderProps, SliderState> {
     getSliderLengths: () => SliderLengths;
@@ -189,7 +190,13 @@ export default class SliderFoundation extends BaseFoundation<SliderAdapter> {
     onHandleEnter: (pos: SliderState['focusPos']) => void;
     onHandleLeave: () => void;
     onHandleUp: (e: any) => boolean;
+    _handleValueDecreaseWithKeyBoard: (step: number, handler: 'min' | 'max') => number | any[];
+    _handleValueIncreaseWithKeyBoard: (step: number, handler: 'min' | 'max') => any;
+    _handleHomeKey: (handler: 'min' | 'max') => any;
+    _handleEndKey: (handler: 'min' | 'max') => any;
+    handleKeyDown: (event: any, handler: 'min' | 'max') => void;
     onFocus: (e: any, handler: 'min' | 'max') => void;
+    onBlur: (e: any, handler: 'min' | 'max') => void;
     handleWrapClick: (e: any) => void;
     /**
      * Move the slider to the current click position

package/lib/cjs/slider/foundation.js

@@ -14,10 +14,16 @@ var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-sta
 
 var _isArray = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/is-array"));
 
+var _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/includes"));
+
 var _foundation = _interopRequireDefault(require("../base/foundation"));
 
 var _touchPolyfill = _interopRequireDefault(require("../utils/touchPolyfill"));
 
+var _warning = _interopRequireDefault(require("../utils/warning"));
+
+var _a11y = require("../utils/a11y");
+
 /* eslint-disable no-param-reassign */
 
 /* eslint-disable max-len */
@@ -547,8 +553,7 @@ class SliderFoundation extends _foundation.default {
       const handleMaxDom = this._adapter.getMaxHandleEl().current;
 
       if (e.target === handleMinDom || e.target === handleMaxDom) {
-        e.preventDefault();
-        e.stopPropagation();
+        (0, _a11y.handlePrevent)(e);
         const touch = (0, _touchPolyfill.default)(e.touches[0], e);
         this.onHandleDown(touch, handler);
       }
@@ -612,18 +617,203 @@ class SliderFoundation extends _foundation.default {
         this._adapter.setDragging([dragging[0], false]);
       }
 
-      this._adapter.setStateVal('isDrag', false); // this._adapter.setStateVal('chooseMovePos', '');
-
+      this._adapter.setStateVal('isDrag', false);
 
       this._adapter.onHandleLeave();
 
       this._adapter.onHandleUpAfter();
 
       return true;
+    };
+
+    this._handleValueDecreaseWithKeyBoard = (step, handler) => {
+      const {
+        min,
+        currentValue
+      } = this.getStates();
+      const {
+        range
+      } = this.getProps();
+
+      if (handler === 'min') {
+        if (range) {
+          let newMinValue = currentValue[0] - step;
+          newMinValue = newMinValue < min ? min : newMinValue;
+          return [newMinValue, currentValue[1]];
+        } else {
+          let newMinValue = currentValue - step;
+          newMinValue = newMinValue < min ? min : newMinValue;
+          return newMinValue;
+        }
+      } else {
+        let newMaxValue = currentValue[1] - step;
+        newMaxValue = newMaxValue < currentValue[0] ? currentValue[0] : newMaxValue;
+        return [currentValue[0], newMaxValue];
+      }
+    };
+
+    this._handleValueIncreaseWithKeyBoard = (step, handler) => {
+      const {
+        max,
+        currentValue
+      } = this.getStates();
+      const {
+        range
+      } = this.getProps();
+
+      if (handler === 'min') {
+        if (range) {
+          let newMinValue = currentValue[0] + step;
+          newMinValue = newMinValue > currentValue[1] ? currentValue[1] : newMinValue;
+          return [newMinValue, currentValue[1]];
+        } else {
+          let newMinValue = currentValue + step;
+          newMinValue = newMinValue > max ? max : newMinValue;
+          return newMinValue;
+        }
+      } else {
+        let newMaxValue = currentValue[1] + step;
+        newMaxValue = newMaxValue > max ? max : newMaxValue;
+        return [currentValue[0], newMaxValue];
+      }
+    };
+
+    this._handleHomeKey = handler => {
+      const {
+        min,
+        currentValue
+      } = this.getStates();
+      const {
+        range
+      } = this.getProps();
+
+      if (handler === 'min') {
+        if (range) {
+          return [min, currentValue[1]];
+        } else {
+          return min;
+        }
+      } else {
+        return [currentValue[0], currentValue[0]];
+      }
+    };
+
+    this._handleEndKey = handler => {
+      const {
+        max,
+        currentValue
+      } = this.getStates();
+      const {
+        range
+      } = this.getProps();
+
+      if (handler === 'min') {
+        if (range) {
+          return [currentValue[1], currentValue[1]];
+        } else {
+          return max;
+        }
+      } else {
+        return [currentValue[0], max];
+      }
+    };
+
+    this.handleKeyDown = (event, handler) => {
+      var _context;
+
+      const {
+        min,
+        max,
+        currentValue
+      } = this.getStates();
+      const {
+        step,
+        range
+      } = this.getProps();
+      let outputValue;
+
+      switch (event.key) {
+        case "ArrowLeft":
+        case "ArrowDown":
+          outputValue = this._handleValueDecreaseWithKeyBoard(step, handler);
+          break;
+
+        case "ArrowRight":
+        case "ArrowUp":
+          outputValue = this._handleValueIncreaseWithKeyBoard(step, handler);
+          break;
+
+        case "PageUp":
+          outputValue = this._handleValueIncreaseWithKeyBoard(10 * step, handler);
+          break;
+
+        case "PageDown":
+          outputValue = this._handleValueDecreaseWithKeyBoard(10 * step, handler);
+          break;
+
+        case "Home":
+          outputValue = this._handleHomeKey(handler);
+          break;
+
+        case "End":
+          outputValue = this._handleEndKey(handler);
+          break;
+
+        case 'default':
+          break;
+      }
+
+      if ((0, _includes.default)(_context = ["ArrowLeft", "ArrowDown", "ArrowRight", "ArrowUp", "PageUp", "PageDown", "Home", "End"]).call(_context, event.key)) {
+        let update = true;
+
+        if ((0, _isArray.default)(currentValue)) {
+          update = !(currentValue[0] === outputValue[0] && currentValue[1] === outputValue[1]);
+        } else {
+          update = currentValue !== outputValue;
+        }
+
+        if (update) {
+          this._adapter.updateCurrentValue(outputValue);
+
+          this._adapter.notifyChange(outputValue);
+        }
+
+        (0, _a11y.handlePrevent)(event);
+      }
     }; // eslint-disable-next-line @typescript-eslint/no-empty-function
 
 
-    this.onFocus = (e, handler) => {};
+    this.onFocus = (e, handler) => {
+      (0, _a11y.handlePrevent)(e);
+      const {
+        target
+      } = e;
+
+      try {
+        if (target.matches(':focus-visible')) {
+          if (handler === 'min') {
+            this._adapter.setStateVal('firstDotFocusVisible', true);
+          } else {
+            this._adapter.setStateVal('secondDotFocusVisible', true);
+          }
+        }
+      } catch (error) {
+        (0, _warning.default)(true, 'Warning: [Semi Slider] The current browser does not support the focus-visible');
+      }
+    };
+
+    this.onBlur = (e, handler) => {
+      const {
+        firstDotFocusVisible,
+        secondDotFocusVisible
+      } = this.getStates();
+
+      if (handler === 'min') {
+        firstDotFocusVisible && this._adapter.setStateVal('firstDotFocusVisible', false);
+      } else {
+        secondDotFocusVisible && this._adapter.setStateVal('secondDotFocusVisible', false);
+      }
+    };
 
     this.handleWrapClick = e => {
       const {

package/lib/cjs/slider/slider.css

@@ -46,6 +46,9 @@
   cursor: pointer;
   transition: #fff 0.3s;
 }
+.semi-slider-handle:focus-visible {
+  outline: 2px solid var(--semi-color-primary-light-active);
+}
 .semi-slider-handle:hover {
   background-color: var(--semi-color-white);
 }

package/lib/cjs/slider/slider.scss

@@ -1,5 +1,5 @@
 //@import '../theme/variables.scss';
-@import "./variables.scss";
+@import './variables.scss';
 
 $module: #{$prefix}-slider;
 
@@ -29,7 +29,7 @@ $module: #{$prefix}-slider;
         font-variant: tabular-nums;
         line-height: $font-slider_rail-lineHeight;
         list-style: none;
-        font-feature-settings: "tnum";
+        font-feature-settings: 'tnum';
         position: absolute;
         height: $height-slider_rail;
         cursor: pointer;
@@ -54,7 +54,11 @@ $module: #{$prefix}-slider;
         border: none;
         border-radius: 50%;
         cursor: pointer;
-        transition: #fff .3s;
+        transition: #fff 0.3s;
+
+        &:focus-visible {
+            outline: $width-slider_handle-focus solid $color-slider_handle-focus;
+        }
     }
 
     &-handle:hover {
@@ -133,10 +137,8 @@ $module: #{$prefix}-slider;
         text-align: center;
         cursor: pointer;
         transform: translate(-50%, 0) rotate(-180deg);
-
     }
 
-
     &-boundary {
         position: relative;
         font-size: $font-size-small;