combobox · 组合框 / 标签输入
依据 APG Combobox with List Autocomplete。三条最容易漏:
① 焦点始终在 input 上(靠 aria-activedescendant 告知读屏)
—— ⚠️ 与树(roving tabindex)正好相反,用错会出现"点选项后输入框失焦"
② Backspace 在空输入时删最后一个标签
③ Enter 加当前高亮项
另:命中片段会高亮,让你知道为什么这条匹配
1 · 板块多选(最多 3 个)
(已选标签会显示在这里,也会写进 hidden input)
2 · 单个(可清除)
对比:错写法 vs 本库写法
❌ 常见写法:结果不高亮
输入"半导体"之后三条都留下了,但三条长得一模一样 —— 用户说不出凭什么是这三条,只会觉得"顺序乱了"。
✅ 本库:命中片段高亮
高亮用的是本库的 combo__opt mark:accent 色 + 下划线,不用浏览器默认的黄底 —— 黄底与文字的对比度不可控,深色主题下更糟。