在构建 Disclosure (Show/Hide) 组件时,需要遵循 WAI-ARIA 的规范来确保可访问性。该组件包含一个用于触发显示/隐藏内容的按钮和一个被控制的内容区域。
**关键的 ARIA 属性配置如下:**
1. **触发按钮(Disclosure Button):**
* 该元素应设置 `role="button"`。
* 当内容可见时,应设置 `aria-expanded="true"`。
* 当内容隐藏时,应设置 `aria-expanded="false"`。
* 可选地,如果需要明确指出该按钮控制的是哪个内容区域,可以在该按钮上设置 `aria-controls` 属性,其值应指向包含所有可显示或隐藏内容的元素。
2. **键盘交互:**
* 用户在焦点位于该控制元素时,按下 **Enter** 或 **Space** 键,应能激活该控制元素,从而切换(toggle)显示/隐藏内容的可见性。
遵循这些 ARIA 角色、状态和属性的配置,可以确保屏幕阅读器用户能够正确理解和操作这个显示/隐藏模式的组件。