ARIA combobox 弹层打开后 aria-expanded 为什么还应保持同步

如果候选弹层已经出现在页面上，但辅助技术仍把组合框读成“已收起”，通常不是 CSS 的问题，而是控制器的 ARIA 状态没有跟着同一份展开状态更新。aria-expanded 描述的是控制元素所对应弹层当前是否展开；因此它必须和弹层的可见状态同时变化，不能只在初始化时写死。

combobox 收起时保持 aria-expanded="false"，弹层真正可见时改为 "true"；同时用 aria-controls 指向弹层的唯一 id。状态更新应集中在一个函数，打开、关闭、无匹配结果和 Escape 都调用它。

本文围绕一个可编辑的文本型 combobox 展开，重点是 aria-expanded、aria-controls 与弹层可见性的一致性，不讨论颜色、动画或具体视觉样式。

先确认 aria-expanded 的语义边界

combobox 是一个控制弹出内容的输入控件，弹层可以是 listbox、grid、tree 或 dialog。对最常见的列表建议场景，控制器通常是带 role="combobox" 的 input，弹层是带唯一 role="listbox" 的元素。

aria-expanded 不是“用户有没有输入内容”，也不是“组件是否允许展开”的配置项，而是当前展开状态：弹层隐藏时为 false，弹层可见时为 true。如果只切换了 display、高度或 CSS 类，却没有更新这个属性，视觉层和可访问名称层就会分叉。

用 aria-controls 把控制器和弹层连起来

控制器和弹层应有稳定的关系。aria-controls 的值必须等于弹层的 id，不要把 CSS 选择器、动态生成的类名或多个不相关元素放进去。弹层显示后，这个关系让辅助技术知道“哪个组合框控制哪块内容”。

城市

初始化时弹层被 hidden 隐藏，所以 aria-expanded 为 false。输入框的角色和列表框的角色分别表达“我可以控制一个弹层”和“这是被控制的候选集合”，不要把 aria-expanded 写在普通的装饰图标上。

让所有状态变化经过同一个更新函数

最容易出现不同步的写法，是打开时修改 CSS 类，关闭时才修改 ARIA 属性，或者在异步过滤完成后只更新列表项。可以把“当前是否展开”作为组件状态，统一同步控制器属性和弹层的 hidden 状态：

const input = document.querySelector('#city-input');
const list = document.querySelector('#city-list');

function setPopupOpen(open) {
  // 同一份状态同时驱动语义属性和原生隐藏状态，避免视觉与辅助技术分叉。
  input.setAttribute('aria-expanded', String(open));
  list.hidden = !open;
}

function showMatches(items) {
  // 没有候选项时关闭弹层，避免 aria-expanded=true 却没有可读内容。
  renderOptions(list, items);
  setPopupOpen(items.length > 0);
}

input.addEventListener('keydown', (event) => {
  // Escape 只负责收起候选层，不清空用户已经输入的文字。
  if (event.key === 'Escape') {
    setPopupOpen(false);
  }
});

示例里的 renderOptions 代表已有的候选项渲染函数。关键不在函数名称，而在于所有入口都调用 setPopupOpen：点击打开按钮、输入过滤、异步结果返回、选择一项、失焦以及 Escape 都不能各自维护一套布尔值。

为什么“弹层打开了”仍可能是错误状态

排查时不要只看页面上有没有候选项，可以把下面四个条件放在一起看：

• 控制器确实带有 role="combobox"，并且 aria-expanded 是当前状态，而不是固定字符串。
• aria-controls 的值能找到唯一弹层元素，弹层的角色和实现类型相匹配。
• aria-expanded="true" 时弹层没有被 hidden 隐藏，也没有因无匹配结果变成空容器。
• 关闭动作会同时恢复 aria-expanded="false" 和弹层隐藏状态，选择结果不会遗留一个“开放”的语义状态。

常见错误包括把 aria-controls 指向已经销毁的旧列表、异步请求返回后覆盖了新状态，以及只监听鼠标点击而没有处理键盘 Escape。它们的共同原因是把“是否显示”散落在多个事件处理器中。

小结与相关问题

修复这类问题的核心不是给输入框再加一个 ARIA 属性，而是建立清晰的状态契约：aria-expanded 表示当前展开状态，aria-controls 指向唯一弹层，hidden 或等价可见性状态与二者一起更新。先统一状态来源，再补齐键盘和异步分支，通常就能消除“看起来打开、读起来收起”的差异。

aria-expanded 可以省略吗？

对 combobox，收起状态应明确表达为 false，打开状态表达为 true。不要把省略当作“未知”或“默认关闭”的替代方案，尤其是在组件会动态展开时。

aria-controls 和 aria-owns 该选哪个？

新实现通常使用 aria-controls 表达控制关系。旧代码可能仍有 aria-owns，迁移时应结合实际 DOM 归属关系检查，不要为了改名而破坏弹层的唯一标识和状态同步。