@douyinfe/semi-foundation 2.11.2 → 2.12.0-beta.1

package/tabs/foundation.ts

@@ -1,5 +1,5 @@
 import BaseFoundation, { DefaultAdapter } from '../base/foundation';
-import { noop } from 'lodash';
+import { get, noop } from 'lodash';
 
 export interface TabsAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
     collectPane: () => void;
@@ -72,6 +72,95 @@ class TabsFoundation<P = Record<string, any>, S = Record<string, any>> extends B
     handleTabDelete(tabKey: string): void {
         this._adapter.notifyTabDelete(tabKey);
     }
+
+    handlePrevent = (event: any) => {
+        event.stopPropagation();
+        event.preventDefault();
+    }
+
+    handleKeyDown = (event: any, itemKey: string, closable: boolean) => {
+        const tabs = [...event.target.parentNode.childNodes].filter(item => {
+            return get(item, 'attributes.data-tabkey.value', '').includes('semiTab') && item.ariaDisabled!=="true";
+        });
+
+        switch (event.key) {
+            case "ArrowLeft":
+            case "ArrowRight":
+            case "ArrowUp":
+            case "ArrowDown":
+                this.determineOrientation(event, tabs);
+                break;
+            case "Backspace":
+            case "Delete":
+                this.handleDeleteKeyDown(event, tabs, itemKey, closable);
+                break;
+            case "Enter":
+            case " ":
+                this.handleTabClick(itemKey, event);
+                this.handlePrevent(event);
+                break;
+            case "Home":
+                tabs[0].focus(); // focus first tab
+                this.handlePrevent(event);
+                break;
+            case "End":
+                tabs[tabs.length - 1].focus(); // focus last tab
+                this.handlePrevent(event);
+                break;
+        }
+    }
+
+    determineOrientation(event: any, tabs: HTMLElement[]): void {
+        const { tabPosition } = this.getProps();
+        const isVertical = tabPosition === 'left';
+
+        if (isVertical) {
+            if (event.key ===  "ArrowUp" || event.key ===  "ArrowDown") {
+                this.switchTabOnArrowPress(event, tabs);
+                this.handlePrevent(event);
+            }
+        } else {
+            if (event.key ===  "ArrowLeft" || event.key === "ArrowRight") {
+                this.switchTabOnArrowPress(event, tabs);
+                this.handlePrevent(event);
+            }
+        }
+    }
+
+    handleDeleteKeyDown(event:any, tabs: HTMLElement[], itemKey: string, closable: boolean): void {
+        if (closable) {
+            this.handleTabDelete(itemKey);
+            const index = tabs.indexOf(event.target);
+            // Move focus to next element after deletion
+            // If the element is the last removable tab, focus to its previous tab
+            if (tabs.length !== 1 ){
+                tabs[index + 1 >= tabs.length ? index - 1 : index + 1].focus();   
+            }
+        }
+    }
+
+    switchTabOnArrowPress(event: any, tabs: HTMLElement[]): void {
+        const index = tabs.indexOf(event.target);
+
+        const direction = {
+            "ArrowLeft": -1,
+            "ArrowUp": -1,
+            "ArrowRight": 1,
+            "ArrowDown": 1,
+        };
+
+        if (direction[event.key]) {
+            if (index !== undefined) {
+                if (tabs[index + direction[event.key]]) {
+                    tabs[index+ direction[event.key]].focus();
+                } else if (event.key === "ArrowLeft" || event.key === "ArrowUp") {
+                    tabs[tabs.length - 1].focus(); // focus last tab
+                } else if (event.key ===  "ArrowRight" || event.key == "ArrowDown") {
+                    tabs[0].focus(); // focus first tab
+                }
+            }
+        }
+    }
 }
 
 export default TabsFoundation;

package/tabs/tabs.scss

@@ -124,6 +124,11 @@ $module: #{$prefix}-tabs;
                     width: 0;
                     height: 0;
                 }
+
+                &:focus-visible {
+                    outline: $width-tabs-outline solid $color-tabs_tab-outline-focus;
+                    outline-offset: $width-tabs-outline-offset;
+                }
             }
         }
         
@@ -164,6 +169,11 @@ $module: #{$prefix}-tabs;
                 &:hover {
                     border-bottom: $width-tabs_bar_line_tab-border solid $color-tabs_tab_line_default-border-hover;
                 }
+
+                &:focus-visible {
+                    outline: $width-tabs-outline solid $color-tabs_tab-outline-focus;
+                    outline-offset: $width-tabs_bar_line-outline-offset;
+                }
                 
                 &:active {
                     border-bottom: $width-tabs_bar_line_tab-border solid $color-tabs_tab_line_default-border-active;
@@ -202,6 +212,11 @@ $module: #{$prefix}-tabs;
                     border-left: $width-tabs_bar_line_tab-border solid $color-tabs_tab_line_default-border-hover;
                     background-color: $color-tabs_tab_line_vertical-bg-hover;
                 }
+
+                &:focus-visible {
+                    outline: $width-tabs-outline solid $color-tabs_tab-outline-focus;
+                    outline-offset: $width-tabs-outline-offset;
+                }
                 
                 &:active {
                     border-left: $width-tabs_bar_line_tab-border solid $color-tabs_tab_line_default-border-active;
@@ -327,6 +342,11 @@ $module: #{$prefix}-tabs;
             &:hover {
                 background: $color-tabs_tab_card-bg-hover;
             }
+
+            &:focus-visible {
+                outline: $width-tabs-outline solid $color-tabs_tab-outline-focus;
+                outline-offset: $width-tabs-outline-offset;
+            }
             
             &:active {
                 background: $color-tabs_tab_card-bg-active;
@@ -365,6 +385,11 @@ $module: #{$prefix}-tabs;
                 border: none;
                 background-color: $color-tabs_tab_button-bg-hover;
             }
+
+            &:focus-visible {
+                outline: $width-tabs-outline solid $color-tabs_tab-outline-focus;
+                outline-offset: $width-tabs-outline-offset;
+            }
             
             &:active {
                 background-color: $color-tabs_tab_button-bg-active;
@@ -393,13 +418,17 @@ $module: #{$prefix}-tabs;
         height: 100%;
         padding: $spacing-tabs_content_left-paddingY $spacing-tabs_content_left-paddingX;
     }
-    
+
     &-pane {
         width: 100%;
         overflow: hidden;
         // position: absolute;
         // flex-shrink: 0;
         // position: absolute;
+
+        &:focus-visible {
+            outline: $width-tabs-outline solid $color-tabs_tab-outline-focus;
+        }
     }
     
     &-pane-inactive,

package/tabs/variables.scss

@@ -44,6 +44,8 @@ $color-tabs_tab-icon-hover: var(--semi-color-text-0); // 页签图标颜色 -
 $color-tabs_tab-icon-active: var(--semi-color-text-0); // 页签图标颜色 - 按下
 $color-tabs_tab_selected-icon-default: var(--semi-color-primary); // 页签图标颜色 - 选中
 
+$color-tabs_tab-outline-focus: var(--semi-color-primary-light-active); // 页签轮廓 - 聚焦
+
 
 $font-tabs_tab-fontWeight: $font-weight-regular; // 页签文本字重 - 默认
 $font-tabs_tab_active-fontWeight: $font-weight-bold; // 页签文本字重 - 选中
@@ -54,6 +56,9 @@ $width-tabs_bar_line-border: $border-thickness-control; // 线条式页签底部
 $width-tabs_bar_line_tab-border: 2px; // 页签标示线宽度
 
 $width-tabs_bar_card-border: $border-thickness-control; // 卡片式页签底部分割线宽度
+$width-tabs-outline: 2px; // 聚焦轮廓宽度
+$width-tabs-outline-offset: -2px; // 聚焦轮廓偏移宽度
+$width-tabs_bar_line-outline-offset: -1px; // 线条式页签聚焦轮廓偏移宽度
 
 $height-tabs_bar_extra_large: 50px; // 大尺寸页签高度
 $font-tabs_bar_extra_large-lineHeight: $height-tabs_bar_extra_large; // 大尺寸页签文字行高

package/tag/tag.scss

@@ -25,12 +25,18 @@ $types: "ghost", "solid", "light";
         @include font-size-small;
         height: $height-tag_small;
         padding: $spacing-tag_small-paddingY $spacing-tag_small-paddingX;
+        &:focus-visible {
+            outline: $width-tag-outline solid $color-tag-outline-focus;
+        }
     }
 
     &-large {
         @include font-size-small;
         padding: $spacing-tag_large-paddingY $spacing-tag_large-paddingX;
         height: $height-tag_large;
+        &:focus-visible {
+            outline: $width-tag-outline solid $color-tag-outline-focus;
+        }
     }
 
     &-invisible {
@@ -46,12 +52,13 @@ $types: "ghost", "solid", "light";
     &-close {
         @include all-center;
         color: $color-tag_close-icon-default;
-        padding-left: $spacing-tag_close-paddingLeft; 
+        padding-left: $spacing-tag_close-paddingLeft;
         cursor: pointer;
     }
 
     &-closable {
-        padding: $spacing-tag_closable-paddingTop $spacing-tag_closable-paddingRight $spacing-tag_closable-paddingBottom $spacing-tag_closable-paddingLeft;
+        padding: $spacing-tag_closable-paddingTop $spacing-tag_closable-paddingRight $spacing-tag_closable-paddingBottom
+            $spacing-tag_closable-paddingLeft;
     }
 
     &-avatar-square,
@@ -62,10 +69,10 @@ $types: "ghost", "solid", "light";
     }
 
     &-avatar-square {
-        padding: $spacing-tag_avatar_square-paddingTop $spacing-tag_avatar_square-paddingRight $spacing-tag_avatar_square-paddingBottom $spacing-tag_avatar_square-paddingLeft;
+        padding: $spacing-tag_avatar_square-paddingTop $spacing-tag_avatar_square-paddingRight
+            $spacing-tag_avatar_square-paddingBottom $spacing-tag_avatar_square-paddingLeft;
 
         .#{$prefix}-avatar {
-
             & > img {
                 background-color: $color-tag_avatar_square_img-bg-default;
             }
@@ -73,10 +80,12 @@ $types: "ghost", "solid", "light";
     }
 
     &-avatar-circle {
-        padding: $spacing-tag_avatar_circle-paddingTop $spacing-tag_avatar_circle-paddingRight $spacing-tag_avatar_circle-paddingBottom $spacing-tag_avatar_circle-paddingLeft;
+        padding: $spacing-tag_avatar_circle-paddingTop $spacing-tag_avatar_circle-paddingRight
+            $spacing-tag_avatar_circle-paddingBottom $spacing-tag_avatar_circle-paddingLeft;
     }
 
-    &-avatar-square.#{$module}-default, &-avatar-square.#{$module}-small {
+    &-avatar-square.#{$module}-default,
+    &-avatar-square.#{$module}-small {
         .#{$prefix}-avatar {
             width: $height-tag_small;
             height: $height-tag_small;
@@ -179,4 +188,10 @@ $types: "ghost", "solid", "light";
     color: $color-tag_avatar-text-default;
 }
 
-@import "./rtl.scss";
+.#{$module}-solid {
+    .#{$module}-close {
+        color: $color-tag_close-icon_deep-default;
+    }
+}
+
+@import './rtl.scss';

package/tag/variables.scss

@@ -7,12 +7,16 @@ $color-tag_white-border-default: rgba(var(--semi-grey-2), 0.7); // 白色标签
 $color-tag_white-text-default: var(--semi-color-text-0); // 白色标签文字颜色 - 默认
 $color-tag_white-icon-default: var(--semi-color-text-2); // 白色标签图标颜色 - 默认
 
+$color-tag-outline-focus: var(--semi-color-primary-light-active); // 标签轮廓 - 聚焦
+
 $width-tag_avatar_circle_small: 16px; // 头像标签圆角 - 小尺寸
 $width-tag_avatar_circle_large: 20px; // 头像标签圆角 - 大尺寸
 
 $width-tag-border: 1px; // 标签描边宽度
 $width-tag_avatar-border: $width-tag-border; // 头像标签描边宽度
 
+$width-tag-outline: 2px; // 标签轮廓宽度
+
 $height-tag_small: 20px; // 小尺寸标签高度
 $height-tag_large: 24px; // 大尺寸标签高度
 $radius-tag: var(--semi-border-radius-small); // 标签圆角大小
@@ -24,6 +28,7 @@ $spacing-tag_large-paddingY: 4px; // 大尺寸标签垂直方向内边距
 $spacing-tag_large-paddingX: $spacing-tight; // 大尺寸标签水平方向内边距
 
 $color-tag_close-icon-default: var(--semi-color-text-2); // 可删除的标签删除按钮颜色
+$color-tag_close-icon_deep-default: var(--semi-color-white); // 深色模式下可删除的标签删除按钮颜色
 $spacing-tag_close-paddingLeft: $spacing-extra-tight; // 可删除的标签删除按钮左侧内边距
 $spacing-tag_closable-paddingTop: $spacing-extra-tight; // 可删除的标签删除按钮顶部内边距
 $spacing-tag_closable-paddingRight: $spacing-extra-tight; // 可删除的标签删除按钮右侧内边距

package/utils/FocusHandle.ts

@@ -0,0 +1,159 @@
+import { isHTMLElement } from "@douyinfe/semi-foundation/utils/dom";
+import { without } from "lodash-es";
+
+
+type FocusRedirectListener = (element: HTMLElement) => boolean;
+
+interface HandleOptions {
+    enable?: boolean
+    onFocusRedirectListener?: FocusRedirectListener | FocusRedirectListener[]
+}
+
+/*
+* Usage:
+*   // Eg1: Pass a dom as the tab tarp container.
+*  const handle = new FocusTrapHandle(container, { enable: true });
+*
+*   // Eg2: The focus redirect listener will be triggered when user pressed tab whiling last focusable dom is focusing in trap dom, return false to cancel redirect and use the browser normal tab focus index.
+*   handle.addFocusRedirectListener((e)=>{
+*       return true; // return false to prevent redirect on target DOM;
+*   });
+*
+*   // Eg3: Set it to false in order to disable tab tarp at any moment;
+*   handle.enable = true;
+*
+*   // Eg4: Destroy instance when component is unmounting for saving resource;
+*   handle.destroy();
+*
+* */
+
+class FocusTrapHandle {
+    public container: HTMLElement;
+    private options: HandleOptions;
+    private focusRedirectListenerList: FocusRedirectListener[];
+    private _enable: boolean;
+
+    constructor(container: HTMLElement, options?: HandleOptions) {
+        Object.freeze(options); // prevent user to change options after init;
+        this.container = container;
+        this.options = options;
+        this.enable = options?.enable ?? true;
+        this.focusRedirectListenerList = (() => {
+            if (options?.onFocusRedirectListener) {
+                return Array.isArray(options.onFocusRedirectListener) ? [...options.onFocusRedirectListener] : [options.onFocusRedirectListener];
+            } else {
+                return [];
+            }
+        })();
+        this.container.addEventListener('keydown', this.onKeyPress);
+    }
+
+    public addFocusRedirectListener = (listener: FocusRedirectListener) => {
+        this.focusRedirectListenerList.push(listener);
+        return () => this.removeFocusRedirectListener(listener);
+    }
+
+    public removeFocusRedirectListener = (listener: FocusRedirectListener) => {
+        this.focusRedirectListenerList = without(this.focusRedirectListenerList, listener);
+    }
+
+    public get enable() {
+        return this._enable;
+    }
+
+    public set enable(value) {
+        this._enable = value;
+    }
+
+    public destroy = () => {
+        this.container?.removeEventListener('keydown', this.onKeyPress);
+    }
+
+    // ---- private func ----
+
+    private shouldFocusRedirect = (element: HTMLElement) => {
+        if (!this.enable) {
+            return false;
+        }
+        for (const listener of this.focusRedirectListenerList) {
+            const should = listener(element);
+            if (!should) {
+                return false;
+            }
+        }
+        return true;
+    }
+
+    private focusElement = (element: HTMLElement, event: KeyboardEvent) => {
+        element?.focus();
+        event.preventDefault(); // prevent browser default tab move behavior
+    }
+
+
+    private onKeyPress = (event: KeyboardEvent) => {
+        if (event && event.key === 'Tab') {
+            const focusableElements = FocusTrapHandle.getFocusableElements(this.container);
+            const focusableNum = focusableElements.length;
+            if (focusableNum) {
+                // Shift + Tab will move focus backward
+                if (event.shiftKey) {
+                    this.handleContainerShiftTabKeyDown(focusableElements, event);
+                } else {
+                    this.handleContainerTabKeyDown(focusableElements, event);
+                }
+            }
+        }
+    }
+
+    private handleContainerTabKeyDown = (focusableElements: any[], event: any) => {
+        const activeElement = FocusTrapHandle.getActiveElement();
+        const isLastCurrentFocus = focusableElements[focusableElements.length - 1] === activeElement;
+
+        const redirectForcingElement = focusableElements[0];
+        if (isLastCurrentFocus && this.shouldFocusRedirect(redirectForcingElement)) {
+            this.focusElement(redirectForcingElement, event);
+        }
+    };
+
+
+    private handleContainerShiftTabKeyDown = (focusableElements: any[], event: KeyboardEvent) => {
+        const activeElement = FocusTrapHandle.getActiveElement();
+        const isFirstCurrentFocus = focusableElements[0] === activeElement;
+        const redirectForcingElement = focusableElements[focusableElements.length - 1];
+        if (isFirstCurrentFocus && this.shouldFocusRedirect(redirectForcingElement)) {
+            this.focusElement(redirectForcingElement, event);
+        }
+    };
+
+
+    // ---- static func ----
+
+    static getFocusableElements(node: HTMLElement) {
+        if (!isHTMLElement(node)) {
+            return [];
+        }
+        const focusableSelectorsList = [
+            "input:not([disabled]):not([tabindex='-1'])",
+            "textarea:not([disabled]):not([tabindex='-1'])",
+            "button:not([disabled]):not([tabindex='-1'])",
+            "a[href]:not([tabindex='-1'])",
+            "select:not([disabled]):not([tabindex='-1'])",
+            "area[href]:not([tabindex='-1'])",
+            "iframe:not([tabindex='-1'])",
+            "object:not([tabindex='-1'])",
+            "*[tabindex]:not([tabindex='-1'])",
+            "*[contenteditable]:not([tabindex='-1'])",
+        ];
+        const focusableSelectorsStr = focusableSelectorsList.join(',');
+        // we are not filtered elements which are invisible
+        return Array.from(node.querySelectorAll<HTMLElement>(focusableSelectorsStr));
+    }
+
+    static getActiveElement(): HTMLElement | null {
+        return document ? document.activeElement as HTMLElement : null;
+    }
+
+
+}
+
+export default FocusTrapHandle;

package/utils/a11y.ts

@@ -0,0 +1,4 @@
+export function handlePrevent(event: any)  {
+    event.stopPropagation();
+    event.preventDefault();
+}