@douyinfe/semi-foundation 2.7.0 → 2.8.0-beta.1

package/lib/es/tooltip/foundation.js

@@ -175,6 +175,42 @@ export default class Tooltip extends BaseFoundation {
       }
     };
 
+    this.handleContainerKeydown = event => {
+      const {
+        guardFocus,
+        closeOnEsc
+      } = this.getProps();
+
+      switch (event && event.key) {
+        case "Escape":
+          closeOnEsc && this._handleEscKeyDown(event);
+          break;
+
+        case "Tab":
+          if (guardFocus) {
+            const container = this._adapter.getContainer();
+
+            const focusableElements = this._adapter.getFocusableElements(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);
+              }
+            }
+          }
+
+          break;
+
+        default:
+          break;
+      }
+    };
+
     this._timer = null;
   }
 
@@ -272,7 +308,12 @@ export default class Tooltip extends BaseFoundation {
   _generateEvent(types) {
     const eventNames = this._adapter.getEventName();
 
-    const triggerEventSet = {};
+    const triggerEventSet = {
+      // bind esc keydown on trigger for a11y
+      [eventNames.keydown]: event => {
+        this._handleTriggerKeydown(event);
+      }
+    };
     let portalEventSet = {};
 
     switch (types) {
@@ -308,6 +349,15 @@ export default class Tooltip extends BaseFoundation {
         triggerEventSet[eventNames.mouseLeave] = () => {
           // console.log(e);
           this.delayHide(); // this.hide('trigger');
+        }; // bind focus to hover trigger for a11y
+
+
+        triggerEventSet[eventNames.focus] = () => {
+          this.delayShow();
+        };
+
+        triggerEventSet[eventNames.blur] = () => {
+          this.delayHide();
         };
 
         portalEventSet = _Object$assign({}, triggerEventSet);
@@ -331,7 +381,7 @@ export default class Tooltip extends BaseFoundation {
 
       case 'custom':
         // when trigger type is 'custom', no need to bind eventHandler
-        // show/hide completely depond on props.visible which change by user
+        // show/hide completely depend on props.visible which change by user
         break;
 
       default:
@@ -357,7 +407,13 @@ export default class Tooltip extends BaseFoundation {
     const nowVisible = this.getState('visible');
 
     if (nowVisible !== isVisible) {
-      this._adapter.togglePortalVisible(isVisible, () => this._adapter.notifyVisibleChange(isVisible));
+      this._adapter.togglePortalVisible(isVisible, () => {
+        if (isVisible) {
+          this._adapter.setInitialFocus();
+        }
+
+        this._adapter.notifyVisibleChange(isVisible);
+      });
     }
   }
 
@@ -860,4 +916,104 @@ export default class Tooltip extends BaseFoundation {
     this._adapter.updateContainerPosition();
   }
 
+  _handleTriggerKeydown(event) {
+    const {
+      closeOnEsc
+    } = this.getProps();
+
+    const container = this._adapter.getContainer();
+
+    const focusableElements = this._adapter.getFocusableElements(container);
+
+    const focusableNum = focusableElements.length;
+
+    switch (event && event.key) {
+      case "Escape":
+        closeOnEsc && this._handleEscKeyDown(event);
+        break;
+
+      case "ArrowUp":
+        focusableNum && this._handleTriggerArrowUpKeydown(focusableElements, event);
+        break;
+
+      case "ArrowDown":
+        focusableNum && this._handleTriggerArrowDownKeydown(focusableElements, event);
+        break;
+
+      default:
+        break;
+    }
+  }
+  /**
+   * focus trigger
+   *
+   * when trigger is 'focus' or 'hover', onFocus is bind to show popup
+   * if we focus trigger, popup will show again
+   *
+   * 如果 trigger 是 focus 或者 hover，则它绑定了 onFocus，这里我们如果重新 focus 的话，popup 会再次打开
+   * 因此 returnFocusOnClose 只支持 click trigger
+   */
+
+
+  _focusTrigger() {
+    const {
+      trigger,
+      returnFocusOnClose
+    } = this.getProps();
+
+    if (returnFocusOnClose && trigger === 'click') {
+      const triggerNode = this._adapter.getTriggerNode();
+
+      if (triggerNode && 'focus' in triggerNode) {
+        triggerNode.focus();
+      }
+    }
+  }
+
+  _handleEscKeyDown(event) {
+    const {
+      trigger
+    } = this.getProps();
+
+    if (trigger !== 'custom') {
+      this.hide();
+
+      this._focusTrigger();
+    }
+
+    this._adapter.notifyEscKeydown(event);
+  }
+
+  _handleContainerTabKeyDown(focusableElements, event) {
+    const activeElement = this._adapter.getActiveElement();
+
+    const isLastCurrentFocus = focusableElements[focusableElements.length - 1] === activeElement;
+
+    if (isLastCurrentFocus) {
+      focusableElements[0].focus();
+      event.preventDefault(); // prevent browser default tab move behavior
+    }
+  }
+
+  _handleContainerShiftTabKeyDown(focusableElements, event) {
+    const activeElement = this._adapter.getActiveElement();
+
+    const isFirstCurrentFocus = focusableElements[0] === activeElement;
+
+    if (isFirstCurrentFocus) {
+      focusableElements[focusableElements.length - 1].focus();
+      event.preventDefault(); // prevent browser default tab move behavior
+    }
+  }
+
+  _handleTriggerArrowDownKeydown(focusableElements, event) {
+    focusableElements[0].focus();
+    event.preventDefault(); // prevent browser default scroll behavior
+  }
+
+  _handleTriggerArrowUpKeydown(focusableElements, event) {
+    focusableElements[focusableElements.length - 1].focus();
+    event.preventDefault(); // prevent browser default scroll behavior
+  }
+
 }

package/lib/es/utils/getHighlight.js

@@ -168,7 +168,7 @@ const fillInChunks = _ref3 => {
 
 const findAll = _ref4 => {
   let {
-    autoEscape,
+    autoEscape = true,
     caseSensitive = false,
     searchWords,
     sourceString

package/lib/es/utils/isEscPress.d.ts

@@ -0,0 +1,4 @@
+declare function isEscPress<T extends {
+    key: string;
+}>(e: T): boolean;
+export default isEscPress;

package/lib/es/utils/isEscPress.js

@@ -0,0 +1,8 @@
+import _get from "lodash/get";
+import { ESC_KEY } from './keyCode';
+
+function isEscPress(e) {
+  return _get(e, 'key') === ESC_KEY ? true : false;
+}
+
+export default isEscPress;

package/lib/es/utils/keyCode.d.ts

@@ -426,4 +426,5 @@ declare const keyCode: {
 };
 export declare const ENTER_KEY = "Enter";
 export declare const TAB_KEY = "Tab";
+export declare const ESC_KEY = "Escape";
 export default keyCode;

package/lib/es/utils/keyCode.js

@@ -530,4 +530,5 @@ const keyCode = {
 };
 export const ENTER_KEY = 'Enter';
 export const TAB_KEY = 'Tab';
+export const ESC_KEY = 'Escape';
 export default keyCode;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-foundation",
-    "version": "2.7.0",
+    "version": "2.8.0-beta.1",
     "description": "",
     "scripts": {
         "build:lib": "node ./scripts/compileLib.js",
@@ -8,7 +8,7 @@
     },
     "dependencies": {
         "@babel/runtime-corejs3": "^7.15.4",
-        "@douyinfe/semi-animation": "2.7.0",
+        "@douyinfe/semi-animation": "2.8.0-beta.1",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
         "date-fns": "^2.9.0",
@@ -24,7 +24,7 @@
         "*.scss",
         "*.css"
     ],
-    "gitHead": "b6e4e0a1e22d4dabe68cbf7e3d2cfd0202da0424",
+    "gitHead": "1d03945ec34f2ebd37ab7cc67c4b11786b46cb1f",
     "devDependencies": {
         "@babel/plugin-proposal-decorators": "^7.15.8",
         "@babel/plugin-transform-runtime": "^7.15.8",

package/tooltip/foundation.ts

@@ -46,6 +46,7 @@ export interface TooltipAdapter<P = Record<string, any>, S = Record<string, any>
         click: string;
         focus: string;
         blur: string;
+        keydown: string;
     };
     registerTriggerEvent(...args: any[]): void;
     getTriggerBounding(...args: any[]): DOMRect;
@@ -61,6 +62,12 @@ export interface TooltipAdapter<P = Record<string, any>, S = Record<string, any>
     updateContainerPosition(): void;
     updatePlacementAttr(placement: Position): void;
     getContainerPosition(): string;
+    getFocusableElements(node: any): any[];
+    getActiveElement(): any;
+    getContainer(): any;
+    setInitialFocus(): void;
+    notifyEscKeydown(event: any): void;
+    getTriggerNode(): any;
 }
 
 export type Position = ArrayElement<typeof strings.POSITION_SET>;
@@ -154,7 +161,12 @@ export default class Tooltip<P = Record<string, any>, S = Record<string, any>> e
 
     _generateEvent(types: ArrayElement<typeof strings.TRIGGER_SET>) {
         const eventNames = this._adapter.getEventName();
-        const triggerEventSet = {};
+        const triggerEventSet = {
+            // bind esc keydown on trigger for a11y
+            [eventNames.keydown]: (event) => {
+                this._handleTriggerKeydown(event);
+            },
+        };
         let portalEventSet = {};
         switch (types) {
             case 'focus':
@@ -186,6 +198,13 @@ export default class Tooltip<P = Record<string, any>, S = Record<string, any>> e
                     this.delayHide();
                     // this.hide('trigger');
                 };
+                // bind focus to hover trigger for a11y
+                triggerEventSet[eventNames.focus] = () => {
+                    this.delayShow();
+                };
+                triggerEventSet[eventNames.blur] = () => {
+                    this.delayHide();
+                };
 
                 portalEventSet = { ...triggerEventSet };
                 if (this.getProp('clickToHide')) {
@@ -205,7 +224,7 @@ export default class Tooltip<P = Record<string, any>, S = Record<string, any>> e
                 break;
             case 'custom':
                 // when trigger type is 'custom', no need to bind eventHandler
-                // show/hide completely depond on props.visible which change by user
+                // show/hide completely depend on props.visible which change by user
                 break;
             default:
                 break;
@@ -292,7 +311,12 @@ export default class Tooltip<P = Record<string, any>, S = Record<string, any>> e
     _togglePortalVisible(isVisible: boolean) {
         const nowVisible = this.getState('visible');
         if (nowVisible !== isVisible) {
-            this._adapter.togglePortalVisible(isVisible, () => this._adapter.notifyVisibleChange(isVisible));
+            this._adapter.togglePortalVisible(isVisible, () => {
+                if (isVisible) {
+                    this._adapter.setInitialFocus();
+                }
+                this._adapter.notifyVisibleChange(isVisible);
+            });
         }
     }
 
@@ -797,4 +821,108 @@ export default class Tooltip<P = Record<string, any>, S = Record<string, any>> e
     _initContainerPosition() {
         this._adapter.updateContainerPosition();
     }
+
+    handleContainerKeydown = (event: any) => {
+        const { guardFocus, closeOnEsc } = this.getProps();
+        switch (event && event.key) {
+            case "Escape":
+                closeOnEsc && this._handleEscKeyDown(event);
+                break;
+            case "Tab":
+                if (guardFocus) {
+                    const container = this._adapter.getContainer();
+                    const focusableElements = this._adapter.getFocusableElements(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);
+                        }
+                    }
+                }
+                break;
+            default:
+                break;
+        }
+    }
+
+    _handleTriggerKeydown(event: any) {
+        const { closeOnEsc } = this.getProps();
+        const container = this._adapter.getContainer();
+        const focusableElements = this._adapter.getFocusableElements(container);
+        const focusableNum = focusableElements.length;
+        
+        switch (event && event.key) {
+            case "Escape":
+                closeOnEsc && this._handleEscKeyDown(event);
+                break;
+            case "ArrowUp":
+                focusableNum && this._handleTriggerArrowUpKeydown(focusableElements, event);
+                break;
+            case "ArrowDown":
+                focusableNum && this._handleTriggerArrowDownKeydown(focusableElements, event);
+                break;
+            default:
+                break;
+        }
+    }
+
+    /**
+     * focus trigger 
+     * 
+     * when trigger is 'focus' or 'hover', onFocus is bind to show popup
+     * if we focus trigger, popup will show again
+     * 
+     * 如果 trigger 是 focus 或者 hover，则它绑定了 onFocus，这里我们如果重新 focus 的话，popup 会再次打开
+     * 因此 returnFocusOnClose 只支持 click trigger
+     */
+    _focusTrigger() {
+        const { trigger, returnFocusOnClose } = this.getProps();
+        if (returnFocusOnClose && trigger === 'click') {
+            const triggerNode = this._adapter.getTriggerNode();
+            if (triggerNode && 'focus' in triggerNode) {
+                triggerNode.focus();
+            }
+        }
+    }
+
+    _handleEscKeyDown(event: any) {
+        const { trigger } = this.getProps();
+        if (trigger !== 'custom') {
+            this.hide();
+            this._focusTrigger();
+        }
+        this._adapter.notifyEscKeydown(event);
+    }
+
+    _handleContainerTabKeyDown(focusableElements: any[], event: any) {
+        const activeElement = this._adapter.getActiveElement();
+        const isLastCurrentFocus = focusableElements[focusableElements.length - 1] === activeElement;
+        if (isLastCurrentFocus) {
+            focusableElements[0].focus();
+            event.preventDefault(); // prevent browser default tab move behavior
+        }
+    }
+
+    _handleContainerShiftTabKeyDown(focusableElements: any[], event: any) {
+        const activeElement = this._adapter.getActiveElement();
+        const isFirstCurrentFocus = focusableElements[0] === activeElement;
+        if (isFirstCurrentFocus) {
+            focusableElements[focusableElements.length - 1].focus();
+            event.preventDefault(); // prevent browser default tab move behavior
+        }
+    }
+
+    _handleTriggerArrowDownKeydown(focusableElements: any[], event: any) {
+        focusableElements[0].focus();
+        event.preventDefault(); // prevent browser default scroll behavior
+    }
+
+    _handleTriggerArrowUpKeydown(focusableElements: any[], event: any) {
+        focusableElements[focusableElements.length - 1].focus();
+        event.preventDefault(); // prevent browser default scroll behavior
+    }
 }

package/utils/getHighlight.ts

@@ -152,7 +152,7 @@ const fillInChunks = ({ chunksToHighlight, totalLength }: { chunksToHighlight: C
  */
 
 const findAll = ({
-    autoEscape,
+    autoEscape = true,
     caseSensitive = false,
     searchWords,
     sourceString

package/utils/isEscPress.ts

@@ -0,0 +1,8 @@
+import { get } from 'lodash';
+import { ESC_KEY } from './keyCode';
+
+function isEscPress<T extends { key: string }>(e: T) {
+    return get(e, 'key') === ESC_KEY ? true : false;
+}
+
+export default isEscPress;

package/utils/keyCode.ts

@@ -428,5 +428,6 @@ const keyCode = {
 
 export const ENTER_KEY = 'Enter';
 export const TAB_KEY = 'Tab';
+export const ESC_KEY = 'Escape';
 
 export default keyCode;