按功能与层级组织 · 同一组件提供多框架代码,复制即用
输入即过滤、↑↓ 移动、回车确认、Esc 关闭。焦点始终留在输入框,选中项用 aria-activedescendant 指出去——一旦把焦点移到列表项上,读屏用户每按一次方向键都会听到整个列表被重读。分组标题不参与键盘循环,跳过的逻辑放在拍平后的一维数组里做,不在渲染时判断。
光标停在卡上时,一层径向光斑跟着走,同时按光标在卡内的相对位置给 ±6° 的倾斜。两个量都写成 CSS 变量,由 requestAnimationFrame 节流后直接写进 style,不触发 React 重渲染——用 state 存坐标的话,鼠标每移动一像素就重渲染一次子树,长列表里会直接掉帧。触屏上不启用倾斜,卡片就是一张静态卡。
一次性扫过的高光,不是循环呼吸。按钮底色固定、只有高光色跟着参数走——这两件事分开,才不会出现「拖了半天整颗按钮变色、那道光纹丝不动」的假参数。扫动用 ::before 的位移实现,不额外挂 DOM 节点,也不干扰 :active 的按压反馈。