https://github.com/wswmsword/focuz

Focus management.
https://github.com/wswmsword/focuz

a11y focus-management keyboard

Last synced: 3 months ago
JSON representation

Focus management.

• Host: GitHub
• URL: https://github.com/wswmsword/focuz
• Owner: wswmsword
• License: mit
• Created: 2023-09-21T12:48:20.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2025-01-19T07:25:07.000Z (4 months ago)
• Last Synced: 2025-01-19T08:25:16.948Z (4 months ago)
• Topics: a11y, focus-management, keyboard
• Language: JavaScript
• Homepage:
• Size: 353 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# focuz

配置 focuz 会涉及到入口、出口和列表，这三个概念和字面一样好理解。想象要实现一个弹窗组件，首先要触发一个按钮打开弹窗，这个按钮是入口；打开弹窗之后按下 Tab　或 Shift-Tab 从而在弹窗里导航，导航到的元素们是列表；最后在“关闭”按钮上按下空格或回车，弹窗关闭，这个“关闭”按钮是出口。

focuz 的特性：

- 嵌套的聚焦结构；

- 灵活、方便的入口与出口：

  - 多入口、多出口；

  - 开关入口、封面入口；

  - 蒙层和 Esc 出口；

  - 调用式的入口与出口。

- 安全、灵活的列表：

  - 范围列表、固定列表和动态列表；

  - 无需入口的溯溪列表；

  - 焦点矫正与焦点保护；

  - 自定义导航组合键；

  - 延迟聚焦与失焦，支持指定初始焦点。

- 导航前执行的钩子；

- 兼容鼠标聚焦行为。

TODO:

- 特性——悬浮聚焦；

- 特性——通过插件将范围模式转为序列模式；

- 优化——入口与出口的 type 选项；

- 优化——范围列表焦点矫正；

- 优化——通过元素寻找列表；

- 优化——组合键字符串；

- 优化——参数整理与简化；

- 优化——listsInfo 的 wrap 依赖移除。

基本入参结构：

```json

{

  "root": "#app",

  "entry": "#en1",

  "exit": "#ex1",

  "list": [

    "#i1",

    "#i2",

    "#i3"

  ],

  "sub": {

    "entry": "en2",

    "exit": "#ex2",

    "list": {

      "nodes": ["#i_start", "#i_end"],

      "range": true

    }

  }

}

```