ARIA：下拉组合框角色

combobox 角色将元素标识为一个控制另一个元素（例如 listbox 或 grid）的 input，该元素可以动态弹出以帮助用户设置该 input 的值。

描述

combobox 是一个复合小部件，它将一个命名的输入字段与一个弹出窗口相结合，该弹出窗口提供该输入字段的可能值。该小部件的目的是通过帮助用户在无需输入完整值的情况下选择值，并（可选地，根据支持的值是否有限）防止用户输入无效或不支持的值来改善用户体验。

combobox 角色设置为控制另一个元素（例如列表框或网格）的输入，该元素可以动态弹出以帮助用户设置输入的值。

combobox 输入字段可以是支持编辑和键入的单行文本字段，类似于 HTML <input> 以及 <datalist>，或者仅显示下拉组合框当前值的元素。

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> 或 button 角色元素，其 tabindex 为 -1。这样做将使按钮可聚焦，但不会包含在键盘制表符顺序中。它不能是具有角色 combobox 的元素的后代。

为了实现键盘可访问性，必须对下拉列表、树状结构、网格或对话框等弹出式元素中的组合框输入字段元素之间的焦点移动进行键盘支持编程。一种常见的约定是，向下箭头将焦点从输入字段移动到弹出式元素的第一个可获得焦点的后代元素。

可以使用 aria-activedescendant 属性标识组合框弹出式窗口中当前活动的元素，例如弹出式下拉列表中的一个option元素，适用于 DOM 焦点仍然保留在组合框上的实现。如果在调用组合框的弹出式窗口时，DOM 焦点没有保留在组合框上，而是移到了弹出式窗口中，例如对话框，那么可能不需要 aria-activedescendant 属性。

如果组合框元素是 <input> 元素，则组合框的值就是输入字段的值。否则，组合框的值来自其后代元素。

如果组合框支持文本输入并提供自动完成功能，请在组合框元素上设置 aria-autocomplete 属性，使其值为与提供的行为相对应的值：inline、list 或 both。aria-autocomplete 属性表明输入文本将触发对用户为组合框意图值的预测的显示，并指定预测在生成时的呈现方式。

每个组合框都必须有可访问的名称。如果使用 <input> 元素，则可访问的名称应来自关联的 <label> 元素。如果不是这种情况，如果内容中可见一个合适的标签，则通过 aria-labelledby 属性提供名称。换句话说，如果用户界面中存在一个元素用作组合框输入字段的标签，请在具有 combobox 角色的元素上包含 aria-labelledby 属性，并将该属性的值设置为标签元素的 id 属性。如果不存在可见的标签，请使用 aria-label 属性代替。但不能同时使用这两个属性。

关联的 WAI-ARIA 角色、状态和属性

aria-expanded

必需。标识组合框是打开的 (true) 还是关闭的 (false)。

aria-haspopup

隐含。如果省略，默认为 listbox。也支持 tree、grid 或 dialog。标识组合框具有弹出式窗口，并指示其类型。

键盘交互

向下箭头

将焦点移动到下一个选项，如果未选中任何选项，则移动到第一个选项。

Alt + 向下箭头 (可选)

如果弹出式窗口可用但未显示，则显示弹出式窗口，但不会移动焦点。

向上箭头

将焦点移动到上一个选项。如果焦点最初位于最后一个选项上，则将焦点移动到第一个选项。

Alt + 向上箭头 (可选)

如果弹出式窗口获得焦点，则将焦点返回到组合框，否则关闭弹出式窗口。

回车键

如果组合框可编辑，并且在弹出式窗口中选择了自动完成建议，则通过将输入光标放置在组合框中已接受的值的末尾，或通过对该值执行默认操作来接受该建议。例如，在消息传递应用程序中，默认操作可能是将已接受的值添加到消息收件人列表中，然后清除组合框，以便用户可以添加其他收件人。

示例

html
<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
未知规范
未知规范

参见