@ a11y/ 焦点陷阱

将焦点困入 DOM 节点的轻量级网络组件
_{焦点陷阱确保 tab 财务报告和审定财务报表 shift + tab 键将循环通过焦点陷阱的可制取元素,但不离开焦点陷阱。 这是伟大的制造 无障碍模式。到这里看演示 https://appnest-demo.firebaseapp.com/焦点-陷阱/。 。 。 .}

• 有一件事非常棒,它把焦点困住!
• 皮尔斯在寻找可聚焦元素时会穿过阴影根.
• 在盒子里工作(加入你的标记)
• 创建时只使用 vanilla js - 没有依赖性和框架不可知性 !

* 安装

npm i @a11y/focus-trap

使用量

导入 @a11y/focus-trap 在你的代码中某个地方 你准备去! 只要把焦点陷阱添加到您的 html 它会工作 没有你的任何努力.

<focus-trap>
  <button>Focus 1</button>
  <button>Focus 2</button>
  <button>Focus 3</button>
  <button>Focus 4</button>
  <button>Focus 5</button>
</focus-trap>

• API

这个 focus-trap 元素执行以下接口.

interface IFocusTrap {
  // Returns whether or not the focus trap is inactive.
  inactive: boolean;

  // Returns whether the focus trap currently has focus.
  readonly focused: boolean;

  // Focuses the first focusable element in the focus trap.
  focusFirstElement: (() => void);

  // Focuses the last focusable element in the focus trap.
  focusLastElement: (() => void);

  // Returns a list of the focusable children found within the element.
  getFocusableElements: (() => HTMLElement[]);
}

许可证

许可证根据 麻省理工学院。 。 。 .