正确构建组合框与自动完成

组合框是与建议弹出框配对的输入框。可以把它想象成搜索框：您输入时，它会下拉显示匹配的结果。🔍

组合框包含一个供用户输入的文本输入框，以及一个单独的选项弹出列表。ARIA 将两者连接起来，让屏幕阅读器能够识别它们的关系。

请将 role="combobox" 添加到文本输入框本身。这会告诉辅助技术：在这里输入内容将显示一个选项列表。

在输入框上使用 aria-controls，并将其设置为弹出框的 id。这样就能将字段与它打开和关闭的列表框关联起来。

列表显示时将 aria-expanded 切换为 true，隐藏时切换为 false。屏幕阅读器会根据该属性播报弹出框的状态。

建议项容器使用 role="listbox"，每条建议使用 role="option"。这样用户就能使用熟悉且可导航的列表。

关键在于：键盘焦点不会离开输入框。用户可以继续输入，同时使用箭头键在选项之间移动高亮显示。

将输入框上的 aria-activedescendant 指向高亮选项的 id。这样屏幕阅读器就能读出当前选项，而无需移动真实焦点。

向下和向上箭头键在选项之间移动，Enter 选择当前选项，Escape 关闭弹出框。这些按键的行为直接来自 APG。

将 aria-selected="true" 设置在高亮选项上，其余选项设置为 false。在单选组合框中，同一时间只能选择一个选项。

使用 aria-autocomplete 描述建议的显示方式：经过筛选的菜单使用“list”，文本也会在输入框中直接补全时使用“both”。

用户正在通过箭头键浏览组合框中的建议。哪个属性会告诉屏幕阅读器当前激活的是哪一项？

组合框由输入框和列表框组成：使用 aria-controls 和 aria-expanded 将它们关联起来，让焦点留在字段中，并使用 aria-activedescendant 跟踪当前选项。✅