简介
react-aria-modal 是一个用于实现无障碍模态对话框的 React 组件库。通过该库，可以方便地实现一个有序对话框，支持键盘焦点管理和对话框外元素的屏幕阅读器友好。
本文旨在介绍 react-aria-modal 的基本使用方法，着重介绍以下四个方面：
- 安装与使用：如何在项目中引入并使用 react-aria-modal。
- 样式自定义：如何自定义 react-aria-modal 组件的样式。
- 获取焦点：如何使对话框弹出时自动获取焦点。
- 无障碍访问：如何确保对话框是无障碍的。
安装与使用
安装
使用 npm 安装 react-aria-modal：
npm i react-aria-modal
使用
使用 react-aria-modal 组件只需在你的 React 组件中引入并渲染即可：
-- -------------------- ---- -------
------ ----- ---- --------
------ --------- ---- -------------------
----- ------- ------- --------------- -
----- - -
------------ -----
--
------------- - -- -- -
--------------- ------------ ---- ---
--
--------------- - -- -- -
--------------- ------------ ----- ---
--
-------- -
----- - ----------- - - -----------
------ -
-----
------- --------------------------------- --------------
----------
--------------- ------
-----------------------------
--------------------------------
---------------------- -- ------------------------------------
---------------- ----------- ------ --
----------------
-----------
-------------- ------ ------ --------- -------- ----------- -------- -------- ------ --
----------------------------
-----------------------------------------
-
---- ----------------------
--- -------------------------- ----------
-- ----------------------------
---- -- - ------------- ------ -- ---- -------- --- ------- -- ------ --------
---- ----- --- ------- ---------- ---------- --- ------ -- -----
----
------- ----------------------------------------- --------------
------
------------
------
--
-
-上述代码演示了一个基本的 react-aria-modal 使用方法：
- 在 render() 中渲染一个触发按钮，点击按钮触发 activateModal() 方法。
- 在 AriaModal 中设置组件所需的必要属性：titleText、onExit、initialFocus、getApplicationNode、underlayStyle、verticallyCenter、 focusDialog、dialogStyle、includeDefaultStyles、aria-describedby。
- 在需要弹出对话框的位置渲染 AriaModal 子组件，结束时渲染的子组件从父组件内移除而不是隐藏。
样式自定义
react-aria-modal 提供了一些默认的样式，但如果需要调整样式，则可以通过以下两种方式进行：
1. 导入默认样式
react-aria-modal 提供了默认的样式，你可以根据自己的需要使用或覆盖它们，只需在组件外导入 react-aria-modal 的默认样式即可：
@import "react-aria-modal/css/ReactAriaModal.css";
2. 自定义样式
你也可以自定义样式，只需覆盖组件生成的 CSS 类：
-- -------------------- ---- -------
----- ------------ - -
--------- -
----------- -------- -- -- -----
--
------- -
-------- --
------ ------
------- ---- ----- ------
----------- ------
-
--
---------- --------------- ----------------------------------------- ------------------------------------- ------------------------------------- ----------------------------------
--- ----- ------- ---
------------你需要提供一个被包裹在 underlayClassingName 或 dialogClassName 中的字符串，作为动态配置类名称的属性。然后在样式表中使用这个类，覆盖任何默认样式。
获取焦点
当对话框弹出时，为了确保自己能够轻松地与其中的内容进行交互，应该将焦点放在对话框元素或者对话框内的第一个交互元素上。这可以通过设置 AriaModal 的 initialFocus 属性来实现：
<AriaModal {...otherProps} initialFocus="dialog">
{/* modal content */}
</AriaModal>无障碍访问
react-aria-modal 已经考虑了较多无障碍访问标准，包括但不限于以下三点：
- 空间键和 Enter 键触发 AriaModal；
- 包含对话框的文档区域被识别为应用程序区域；
- 对话框自动获取焦点。
然而对于每个项目都要满足不同的无障碍性需求，因此需要自定义其他部分：
- 您需要提供适当的 ARIA 标签来标识对话框，这可以帮助屏幕阅读器用户了解对话框的内容和意义；
- 您需要添加聚焦和键盘支持，即使这意味着您需要将焦点从对话框传递到某个元素以执行特定任务。
ARIA 标签
你应该提供以下 ARIA 属性：
- aria-labelledby：一个具有对话框标题的 ID 的元素
- aria-describedby：一个具有描述对话框内容的 ID 的元素
<AriaModal {...otherProps} titleText="demo" aria-labelledby="demo-modal-title" aria-describedby="demo-modal-description">
{/* modal content */}
</AriaModal>-- -------------------- ---- -------
-----
--- -------------------------- ----------
-- ----------------------------
---- -- - ------------- ------ -- ---- -------- --- ------- -- ------ -------- ---- ----- ---
------- ---------- ---------- --- ------ -- -----
----
---------- ----------------
--- ----- ------- ---
------------
------键盘支持
针对更高的无障碍性体验，应该提供键盘支持。对于对话框弹出后使用户可以再次访问打开时的元素，可以通过如下设置实现：
<AriaModal {...otherProps} initialFocus="#my-initial-focus-element-id">
{/* modal content */}
</AriaModal>然后监听Tab键，通过键盘在对话框中从一个元素移动到另一个元素：
<AriaModal {...otherProps} initialFocus="#my-initial-focus-element-id" focusDialog onKeyDown={this.handleKeyDown}>
{/* modal content */}
</AriaModal>-- -------------------- ---- -------
----- ------- ------- --------------- -
------------- - ----- -- -
--- ------------ - -----
------ ------------- -
---- --- -- ---
-----------------------
------
--------
------------ - ------
-
-- -------------- -
----------------------
---------------------
------ ------
-
-
-示例代码
所演示的示例代码均可通过 GitHub 代码库 获取，它包含了更多示例代码，可以帮助你更好地理解 react-aria-modal 的使用方法。
总结
react-aria-modal 是一个实现无障碍模态对话框的 React 组件库，它提供了简单易用的 API 和灵活的样式自定义功能。在使用 react-aria-modal 时，需要遵循一定的无障碍性标准，这可以通过提供适当的 ARIA 标签和键盘支持来实现。我们希望本文对于初次接触 react-aria-modal 的读者有所帮助，也希望能够促进更多开发者注重 Web 应用程序的无障碍性设计。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/155716