触发含单选组对话框的组件：ARIA无障碍模式选型咨询

结论：优先选择将触发元素视为带aria-haspopup="dialog"的按钮（视觉可模拟只读输入框），对话框内使用标准表单单选组，原因如下：

为什么combobox角色不合适 #

combobox的核心语义是「单个输入控件关联单一下拉选项集合，用于选择单个值或补全输入」，完全匹配单列表选择的交互模型。但你的组件是跨两个独立类别选择值，弹出的是两个独立单选组而非单列表，强行套用role="combobox"会让屏幕阅读器等辅助技术误解交互逻辑——用户预期combobox是选单个值，结果弹出多组选项，反而造成认知混淆，不符合WAI-ARIA的角色定义规范。

按钮+对话框方案的无障碍优势 #

1. 语义清晰明确：触发元素用按钮（视觉可通过CSS模拟只读输入框样式），添加aria-haspopup="dialog"，直接告诉辅助技术「点击此元素会弹出一个对话框」，交互意图无歧义。
2. 表单控件原生无障碍：对话框内的两个单选组使用标准HTML表单元素：
   • 每个单选组用<fieldset>包裹，搭配<legend>标注类别名称，辅助技术能识别分组逻辑；
   • 每个单选按钮<input type="radio">关联对应的<label>，确保点击标签可选中选项，屏幕阅读器能读出选项内容。
3. 状态同步无障碍：当用户在对话框内完成选择后，将组合生成的文本摘要同步到触发按钮的内容（或补充aria-label增强朗读清晰度），确保辅助技术能实时获取当前选中的组合状态。

额外细节优化 #

• 如果视觉要求必须是输入框外观，不要用<input readonly>（输入框语义是「可输入」，即使只读也会误导辅助技术），而是用按钮模拟输入框样式，保持按钮的核心语义。
• 对话框需添加role="dialog"和aria-modal="true"，确保模态交互的无障碍性：聚焦被限制在对话框内，关闭后自动回到触发按钮。

内容的提问来源于stack exchange，提问作者cppstudy