Orbit Components 21.0.0 版本发布：全面增强可访问性

Orbit Components 是 Kiwi.com 开发的一套 React UI 组件库，专注于为旅行行业提供高质量的界面元素。21.0.0 版本带来了多项重大改进，主要集中在可访问性(A11y)方面的增强，同时也包含了一些破坏性变更。

核心改进与特性

可访问性全面升级

本次版本对多个组件的可访问性进行了深度优化：

1. Card 组件重构：现在标题默认渲染为 DIV 元素，更符合语义化 HTML 结构。这一变化使得屏幕阅读器能够更准确地识别卡片内容结构。

2. ChoiceGroup 改进：

   • 修复了 aria-labelledby 在没有标签时错误设置的问题
   • 标签现在默认渲染为 div 元素，提升了语义化程度

3. Collapse 组件增强：

   • 当标签为空时不再渲染空按钮
   • 新增了 expandButtonLabel 和 collapseButtonLabel 两个必需属性，为切换按钮提供更清晰的辅助技术描述

4. Drawer 侧边栏优化：

   • 添加了 ariaLabel 属性
   • 修复了 onClose 在不显示时也会被调用的问题
   • 重构了整体可访问性实现

5. InputField 和 Textarea：

   • 移除了重复的标签内容，减少屏幕阅读器的冗余信息
   • 新增了 ariaLabelledby 属性
   • 优化了工具提示的显示逻辑

图标系统更新

图标库进行了全面更新，部分图标名称发生了变化。开发者需要参考迁移指南来更新代码中对图标的引用。这一变化是为了保持与设计系统的一致性，并确保图标命名的清晰性。

组件行为变更

1. Accordion 折叠面板：

   • 不再默认渲染"Open"按钮，需要通过 actions 属性显式提供
   • 新增 ariaControls 属性，更好地关联控制元素

2. Alert 警告框：

   • 当 closable 为 true 时，现在必须提供 labelClose 属性
   • 这一变更确保了关闭按钮有适当的无障碍标签

3. ButtonMobileStore 应用商店按钮：

   • 新增 title 属性
   • alt 属性现在变为必需，确保图像有适当的替代文本

破坏性变更说明

1. Collapse 组件：

   • label 属性现在只接受字符串类型，不再接受 React 元素
   • 新增了 collapseButtonLabel 和 expandButtonLabel 两个必需属性

2. Drawer 组件：

   • title 属性现在只接受字符串类型

3. Alert 组件：

   • 当 closable 为 true 时，必须提供 labelClose 属性

4. ButtonMobileStore 组件：

   • alt 属性现在变为必需

5. 图标系统：

   • 部分图标名称发生了变化，需要更新引用

升级建议

对于正在使用 Orbit Components 的项目，升级到 21.0.0 版本需要特别注意以下几点：

1. 检查所有使用 Collapse 和 Drawer 组件的地方，确保传递的是字符串而非 React 元素
2. 为所有可关闭的 Alert 组件添加 labelClose 属性
3. 为所有 ButtonMobileStore 组件添加 alt 属性
4. 更新图标引用，确保使用新的图标名称
5. 为 Collapse 组件添加必要的按钮标签属性

这次更新虽然包含了一些破坏性变更，但大幅提升了组件的可访问性，使得应用能够更好地服务于所有用户，包括使用辅助技术的用户。建议开发团队预留足够的时间进行升级和测试。