按功能与层级组织 · 同一组件提供多框架代码,复制即用
左右拖动分割线看改造前后。两层都是真 DOM,不是两张图拼的——所以右边那层照样能交互、能读屏。分割用 clip-path 而不是宽度,拖动时不触发重排;指针用 setPointerCapture 接管,手滑出容器也不会中断。滑块本身是 role="slider",方向键微调、Home/End 到两端,键盘用户不需要鼠标。
输入即过滤、↑↓ 移动、回车确认、Esc 关闭。焦点始终留在输入框,选中项用 aria-activedescendant 指出去——一旦把焦点移到列表项上,读屏用户每按一次方向键都会听到整个列表被重读。分组标题不参与键盘循环,跳过的逻辑放在拍平后的一维数组里做,不在渲染时判断。