Mantine ComboboxTarget组件可访问性问题分析与修复方案

问题背景

在Mantine UI库的ComboboxTarget组件中，存在一个潜在的可访问性问题。该组件是组合框(Combobox)的触发元素，负责控制下拉列表的显示与隐藏。当前实现中，无论下拉列表是否可见，组件始终保留着指向下拉列表的aria-controls属性。

技术细节分析

aria-controls是WAI-ARIA规范中的一个重要属性，用于建立元素间的控制关系。在Combobox模式中，触发按钮(ComboboxTarget)应该控制下拉列表(ComboboxDropdown)的显示状态。

当前实现的问题在于：

1. 即使下拉列表被隐藏(DOM中不存在)，aria-controls属性仍然指向一个不存在的元素ID
2. 这会导致屏幕阅读器等辅助工具无法正确理解控件关系
3. 现代无障碍检查工具(如Storybook中的a11y插件)会报告警告

问题影响

这种实现方式会对以下用户群体造成困扰：

1. 使用屏幕阅读器的视障用户 - 可能会接收到不一致的控件状态信息
2. 依赖键盘导航的用户 - 控件关系不明确会影响操作预期
3. 开发者 - 会收到不必要的可访问性警告，影响开发体验

解决方案

最佳实践是动态管理aria-controls属性：

1. 当下拉列表可见时，设置aria-controls指向列表ID
2. 当下拉列表隐藏时，完全移除该属性

具体实现可参考以下伪代码：

'aria-controls': isDropdownOpen ? dropdownId : undefined

实现建议

在Mantine的ComboboxTarget组件中，应该：

1. 监听下拉列表的打开状态(store.dropdownOpened)
2. 根据状态动态设置aria-controls属性
3. 确保与aria-expanded等状态属性保持同步

总结

正确处理ARIA属性是构建无障碍Web应用的关键。对于Combobox这类复杂控件，动态管理aria-controls属性不仅能消除工具警告，更能为所有用户提供一致的操作体验。这个修复方案简单有效，完全符合WAI-ARIA规范要求。