React Focus Lock 使用教程

1. 项目介绍

react-focus-lock 是一个用于管理 React 应用中焦点锁定的开源库。它可以帮助开发者确保在特定情况下（如模态对话框、焦点任务等）用户的焦点不会意外地离开某个组件。这个库特别适用于需要严格控制用户焦点的场景，如无障碍设计（a11y）。

主要特性

• 无键盘控制：通过观察焦点行为而不是模拟它来工作。
• React Portals 支持：即使数据在 React Portals 中，焦点锁定也能正常工作。
• 分散锁定：支持创建不同的隔离锁定，并允许在它们之间切换。
• 可控的隔离级别：允许开发者根据需要调整焦点锁定的行为。
• 可变大小包：通过使用 sidecar 模式，可以将 UI 部分缩小到 1.5kb。

2. 项目快速启动

安装

首先，使用 npm 或 yarn 安装 react-focus-lock：

npm install react-focus-lock
# 或者
yarn add react-focus-lock

基本使用

以下是一个简单的示例，展示如何使用 react-focus-lock 来锁定焦点：

import React from 'react';
import FocusLock from 'react-focus-lock';

const App = () => {
  return (
    <FocusLock>
      <div>
        <h1>这是一个焦点锁定的示例</h1>
        <button>按钮1</button>
        <button>按钮2</button>
      </div>
    </FocusLock>
  );
};

export default App;

在这个示例中，当组件挂载时，焦点将被锁定在 FocusLock 包裹的组件内，用户无法通过 Tab 键将焦点移出这个区域。

3. 应用案例和最佳实践

模态对话框

在模态对话框中使用 react-focus-lock 可以确保用户在对话框打开时无法将焦点移出对话框。

import React from 'react';
import FocusLock from 'react-focus-lock';

const Modal = ({ isOpen, onClose }) => {
  if (!isOpen) return null;

  return (
    <FocusLock returnFocus>
      <div className="modal">
        <h2>模态对话框</h2>
        <button onClick={onClose}>关闭</button>
      </div>
    </FocusLock>
  );
};

export default Modal;

焦点任务

在需要用户集中注意力的任务中，使用 react-focus-lock 可以确保用户不会意外地离开任务区域。

import React from 'react';
import FocusLock from 'react-focus-lock';

const FocusTask = () => {
  return (
    <FocusLock>
      <div>
        <h1>焦点任务</h1>
        <input type="text" placeholder="请输入内容" />
      </div>
    </FocusLock>
  );
};

export default FocusTask;

4. 典型生态项目

Atlassian AtlasKit

react-focus-lock 被 Atlassian 的 AtlasKit 使用，这是一个用于构建 Atlassian 产品的 UI 组件库。

ReachUI

ReachUI 是一个无障碍优先的 React 组件库，也使用了 react-focus-lock 来确保其组件的无障碍性。

Storybook

Storybook 是一个用于开发和测试 UI 组件的工具，它也集成了 react-focus-lock 来增强其无障碍功能。

通过这些生态项目的使用，react-focus-lock 展示了其在无障碍设计和焦点管理方面的强大功能和广泛应用。