SAP Spartacus LockFocusDirective

https://sap.github.io/spartacus-docs/lock-focus/

The cxFocus directive provides locking of the focusable elements of a host element. The focusable elements receive a tabindex of -1, so that the default tabbing in the browser is temporarily disabled.

lock意味着tabindex为-1， 这样浏览器里的tabbing功能暂时被禁用。

The locked focus is used for groups of elements that should be skipped by keyboard users.

lock focus的意义是，声明一组需要暂时被键盘用户忽略的元素。

The locked focus is used for groups of elements that should be skipped by keyboard users. A good example is a child navigation panel, or the facet navigation on the product listing page. Keyboard users can skip larger groups of focusable elements, until they unlock the group by pressing the ENTER or SPACE key.

组元素的unlock通过enter或者space按键完成。

Locked elements leverage the auto focus feature, unless the auto focus configuration is explicitly set to false.

Focus focus需要借助auto focus特性，除非auto focus被显式地禁用。

This results in the first focusable element being selected when the group is unlocked.

当整个组被unlock时，组内第一个focusable element被自动focus。

An unlocked group can be locked again by pressing the ESC key.

被unlock的组，通过ESC按键可以再次被lock.

The locked focus feature uses the escape focus feature, so that the host element is focused again when pressing ESC.

当按下ESC时，host element再次被focus.

  /**
   * When the user selects enter or space, the focusable childs are
   * unlocked, which means that the tabindex is set to 0.
   */
  @HostListener('keydown.enter', ['$event'])
  @HostListener('keydown.space', ['$event'])
  handleEnter(event: KeyboardEvent) {
    if (this.shouldLock && this.host === (event.target as HTMLElement)) {
      this.unlockFocus(event);
      event.preventDefault();
      event.stopPropagation();
    }
  }

上述代码：用户按下回车或者空格键时，host元素的子元素被unlock.

unlockFocus方法的实现：

  protected unlockFocus(event?: UIEvent) {
    this.unlock.emit(true);
    this.addTabindexToChildren(0);
    // we focus the host if the event was triggered from a child
    if (event?.target === this.host) {
      // we wait a few milliseconds, mainly because firefox will otherwise apply
      // the mouse event on the new focused child element
      setTimeout(() => {
        super.handleFocus(event as KeyboardEvent);
      }, 100);
    }
  }

首先抛出unlock事件，然后将所有子元素的tabindex设置成0.

最后调用父类的handleFocus方法。

父类在这里指auto focus指令。

host被unlock时，子DOM的第一个focusable element会被focus：

在这里插入图片描述

注释里也有add persistence for focused element的功能：element 被rebuild的时候，比如新的数据从后台到达。

当敲回车或者空格键或者鼠标左键单击时，如果配置为shouldLock，则unlock子孙(index = 0)

this.shoudLock从config.lock读取

ngAfterViewInit：

this.shouldLock和this.group必须同时为true

unlock：子孙index设为0

这个lock/unlock是给集合组件使用，语义上比较说得过去。