使用按钮和 aria-expanded 构建折叠面板

手风琴组件是一组可以展开和收起的标题，用于显示内容。与选项卡不同，每个区块都可以独立打开。

请让每个手风琴标题都成为真正的按钮。按钮可以获得焦点，支持 Enter 和空格键，并且会自动向屏幕阅读器宣布自身。

请注意，不要使用可点击的 div 作为标题。它无法获得焦点，也不会响应键盘操作，并且不会向辅助技术说明自己的作用。

请将 aria-expanded 添加到按钮上，让屏幕阅读器宣布内容是收起还是展开的。这个状态正是手风琴组件实现无障碍访问的关键。

用户激活按钮时，请在 true 和 false 之间切换 aria-expanded。它必须始终与面板是否实际显示保持同步。

在按钮上使用 aria-controls，并将其值设为按钮打开的面板的 id。这样，用户就能知道该标题会显示哪些内容。

区块关闭时，请为其面板添加 hidden 属性。这样面板会从页面和无障碍树中移除，直到再次打开。

请将每个按钮放在真正的标题元素中，例如 h3。屏幕阅读器用户就能通过标题导航在各个区块之间跳转。

单独的显示与隐藏控件属于披露组件，而不是选项卡组。它只需要一个带有 aria-expanded 的按钮，完全不需要 tablist 或 tab 角色。

切换后，请将焦点留在用户刚刚按下的按钮上。不要把焦点强行移入面板，这会让键盘用户感到意外。

由于按钮本身携带状态，屏幕阅读器每次都会说出“已展开”或“已收起”。用户始终知道激活按钮后会发生什么。

您已经学会了：手风琴标题应是一个带有 aria-expanded 的按钮，并且放在标题元素中。切换状态、指向面板，并在关闭时将其隐藏。