ARIA：combobox 角色
combobox 角色用于标识一个元素，该元素可以是 input 或 button，它控制另一个可以动态弹出以帮助用户设置值的元素，例如 listbox 或 grid。组合框可以是可编辑的（允许文本输入）或仅选择的（仅允许从弹出列表中选择）。
描述
combobox 是一个复合控件，它将一个命名的输入字段与一个提供该输入字段可能值的弹出窗口相结合。此控件的目的是通过帮助用户选择一个值而不必键入完整值来改善用户体验，并且（取决于支持的值是否有限）还可以防止用户输入无效或其他不支持的值。
combobox 角色可以设置在输入元素（用于可编辑的组合框）或按钮元素（用于仅选择的组合框）上。此元素控制另一个元素，例如列表框或网格，该元素可以动态弹出以帮助用户设置值。
具有 combobox 角色的元素可以是可编辑的单行文本字段（使用 <input> 元素，类似于带有 <datalist> 的元素），或者仅选择的元素（使用 button 元素），该元素仅显示当前值而不允许直接文本输入。
WAI-ARIA 组合框仅需要一个属性：aria-expanded。但是，根据实现情况，通常还需要其他几个属性：aria-haspopup、aria-controls、aria-activedescendant 和 aria-autocomplete。
通常，组合框的初始状态是折叠的，并设置了 aria-expanded="false"。在折叠状态下，只有组合框元素和可选的用于调用弹出窗口的兄弟按钮可见。aria-expanded 属性的值设置为 false，在折叠时是必需的，因为它向辅助技术指示该控件是可展开的。
当显示组合框元素（显示其当前值）及其关联的弹出窗口元素时，组合框处于展开状态。展开时，必须设置 aria-expanded="true"。
与 combobox 关联的弹出窗口元素可以是 listbox、tree、grid 或 dialog 元素。
组合框具有隐式的 aria-haspopup 值 listbox，因此如果弹出窗口是 listbox，则包含此属性是可选的。如果组合框弹出窗口元素是 tree、grid 或 dialog（除了 listbox 之外的任何内容），则 aria-haspopup 属性是必需的。aria-haspopup 的值必须是 tree、grid、dialog 或 listbox 角色之一。请注意，对于此属性，true 意味着 menu，因此请确保该值对应于弹出窗口的角色，而不是布尔值。
当组合框的弹出窗口显示时，请确保组合框元素上的 aria-controls 属性设置为弹出窗口 listbox、tree、grid 或 dialog 元素的 id。这就是指示具有 combobox 角色的元素与其控制的弹出窗口之间的关系的方式。（注意：在旧的 ARIA 规范中，它是 aria-owns 而不是 aria-controls，因此您可能会在旧的组合框实现中看到 aria-owns。代码中的 aria-owns 应更新为 aria-controls！）
如果组合框 UI 包含可见控件（例如图标），该控件允许通过指针和触摸事件控制弹出窗口的可见性，则该控件应为一个 <button>、类型为 button 的 <input>，或一个具有 -1 的 tabindex 的 button 角色元素。这样做将允许按钮可聚焦，但不会包含在键盘的 Tab 键顺序中。它不应是具有 combobox 角色的元素的后代。
为了实现键盘可访问性，必须通过编程实现键盘支持，以在 combobox 元素和弹出窗口 listbox、tree、grid 或 dialog 中包含的元素之间移动焦点。一个常见的约定是 向下箭头 将焦点从输入框移动到弹出窗口元素的可聚焦的第一个后代。
aria-activedescendant 属性可用于标识组合框弹出窗口当前活动的元素，例如弹出窗口 listbox 中的 option，适用于 DOM 焦点保留在组合框上的实现。如果调用弹出窗口时 DOM 焦点没有保留在组合框上，而是 DOM 焦点移动到弹出窗口（例如对话框）中，则可能不需要 aria-activedescendant。
如果组合框实现为可编辑的 <input> 元素，则组合框的值就是输入的该值。对于使用 button 元素实现的仅选择组合框，该值来自弹出窗口中选定的选项。
aria-autocomplete 属性仅适用于支持文本输入的、可编辑的组合框。对于这些组合框，将该属性设置为对应于提供的行为的值：inline、list 或 both。该属性表示输入文本将触发一个或多个用户意图值的预测显示，并指定这些预测将如何呈现。对于使用 button 元素的仅选择组合框，不应使用 aria-autocomplete，因为无法进行文本输入。
每个 combobox 都必须有一个可访问的名称，可以通过以下三种方式之一提供：
- 对于
<input>元素，使用关联的<label>。 - 如果 UI 中存在可见标签，请使用
aria-labelledby引用标签元素的id。 - 如果不存在可见标签，请使用
aria-label。
注意：仅使用其中一种方法；不要组合使用。
关联的 WAI-ARIA 角色、状态和属性
aria-expanded-
必需。标识组合框是打开（
true）还是关闭（false）。 aria-haspopup-
隐含。如果省略，则默认为
listbox。还支持tree、grid或dialog。标识组合框具有弹出窗口，并指示其类型。
键盘交互
- 向下箭头
-
如果组合框关闭，则打开弹出窗口并将焦点移至下一个选项，如果未选择任何选项，则移至第一个选项。
- Alt + 向下箭头（可选）
-
如果弹出窗口可用但未显示，则显示弹出窗口而不移动焦点。
- 向上箭头
-
如果组合框关闭，则打开弹出窗口并将焦点移至上一个选项，如果未选择任何选项，则移至最后一个选项。
- Alt + 向上箭头（可选）
-
如果弹出窗口有焦点，则将焦点返回到组合框；否则，关闭弹出窗口。
- Escape
-
如果组合框打开，则关闭弹出窗口。如果弹出窗口已关闭，则清除可编辑组合框的值。
可编辑组合框键盘交互
- Enter
-
如果在弹出窗口中选择了自动完成建议，则通过更新组合框的值并将其输入光标放在末尾来接受该建议。还可能触发默认操作（例如，在消息应用程序中，将接受的值添加到收件人列表中）。
- 制表符
-
接受当前值并将焦点移至下一个可聚焦的元素。
仅选择组合框键盘交互
- Enter 或 Space
-
当弹出窗口关闭时，打开弹出窗口。当弹出窗口打开且选中了一个选项时，接受所选选项作为组合框的值并关闭弹出窗口。
- 制表符
-
接受当前选择并将焦点移至下一个可聚焦的元素。
- Home 或 End
-
当弹出窗口打开时，分别将焦点移至第一个或最后一个选项。
示例
<label for="jokes">Pick what type of jokes you like</label>
<div class="combo-wrap">
<input
type="text"
id="jokes"
role="combobox"
aria-controls="joketypes"
aria-autocomplete="list"
aria-expanded="false"
data-active-option="item1"
aria-activedescendant="" />
<span aria-hidden="true" data-trigger="multiselect"></span>
<ul id="joketypes" role="listbox" aria-label="Jokes">
<li class="active" role="option" id="item1">Puns</li>
<li class="option" role="option" id="item2">Riddles</li>
<li class="option" role="option" id="item3">Observations</li>
<li class="option" role="option" id="item4">Knock-knock</li>
<li class="option" role="option" id="item5">One liners</li>
</ul>
</div>
规范
| 规范 |
|---|
| 无障碍富互联网应用程序 (WAI-ARIA) # combobox |
| 未知规范 |
另见
- HTML
<label>元素 - HTML
<select>元素 - HTML
<option>元素 - HTML
<input>元素 - ARIA：
listbox角色 - ARIA：
option角色 - ARIA：
list角色 - ARIA：
listitem角色 - ARIA 最佳实践 – 组合框
- Deque 提供的可访问组合框模块示例