实用教程
用 Claude Opus 5.5 修复商品轮播的键盘导航
把轮播的 DOM、交互代码和明确的状态规则交给 Claude Opus 5.5，让它一起检查焦点和自动轮播。只给箭头加键盘监听，解决不了隐藏链接仍能获得焦点，也解决不了用户正在阅读时轮播自行恢复的问题。
把轮播的 DOM、交互代码和明确的状态规则交给 Claude Opus 5.5，让它一起检查焦点和自动轮播。只给箭头加键盘监听，解决不了隐藏链接仍能获得焦点，也解决不了用户正在阅读时轮播自行恢复的问题。
先观察故障，再改组件
一则 2016 年的开发者提问描述了箭头只能用鼠标操作的轮播。这是旧库的具体问题，不是今天推荐的修补方案。当前行为应参考 W3C 轮播模式：保留常规 Tab 导航，尽可能使用原生控件，并把轮播启停控制放在滚动内容之前。
| 症状 | 修复边界 | 验收 |
|---|---|---|
| Tab 走到看不见的购买链接 | 非当前幻灯片的可操作性 | 只有当前内容进入正常 Tab 顺序 |
| 下一张按钮把焦点移入图片 | 控件激活行为 | 焦点留在下一张按钮 |
| 焦点离开后自动恢复轮播 | 自动播放状态 | 必须由用户明确重新启动 |
| 鼠标悬停暂停，键盘进入却不停 | 暂停触发条件 | 两种交互都停止轮播 |
不要在整页劫持所有方向键。普通上一张／下一张轮播，与用标签页选择幻灯片的组件，键盘规则不同。生成补丁前，先确定实际采用哪一种。
让暂停状态保持下来
假设图库有四张幻灯片，每张两个链接。仅把其中三张移到屏幕外，可能在 Tab 顺序里留下六个看不见的链接。这是虚构布局的数量计算，不是线上商店审计。视觉隐藏或单独添加 `aria-hidden` 都不构成完整的焦点修复。应采用合适的渲染或非激活状态处理，让隐藏控件退出键盘导航，并正确暴露当前幻灯片。
定义 `activeIndex` 和轮播是否运行。焦点进入轮播时停止自动切换；按下一张只改变索引，不迁移焦点；离开轮播也不自动恢复。用户明确点击开始后，可按控件设计恢复；后续再次从外部进入焦点时停止。也要处理鼠标悬停暂停。本例另外选择让偏好减少动态效果的用户默认不自动播放，这不能替代启停按钮。
完整的实现复核提示词
复核提供的商品轮播DOM、CSS和状态处理代码。采用普通上一张/下一张模式，除非现有设计确实需要标签页选择器。保留幻灯片顺序、链接、产品ID和已选规格。
列出当前及非当前幻灯片的全部可聚焦控件。教学案例有4张、每张2个链接，指出不应留在正常Tab顺序中的6个非当前链接。不要把单独设置aria-hidden当作键盘修复。
上一张、下一张、开始/停止使用原生按钮，激活后焦点留在原控件。焦点进入或鼠标悬停时停止轮播；焦点离开后不得自行重启，必须明确点击开始。本设计在减少动态效果偏好下默认关闭自动轮播。
输出最小补丁、状态转换表和测试。覆盖正反Tab、按钮Enter/Space、连续下一张、首尾循环、焦点暂停、明确重启和减少动态效果下的初始状态。区分实际浏览器检查与计划测试，不宣称全站无障碍认证。这是按官方提示指南限定范围的假设 Opus 任务。本地的小型状态样例可以验证预定转换，却不能证明真实 DOM、屏幕阅读器或定时器已经正确工作。
验收交付组件
从轮播外开始，正反向按 Tab，检查焦点清晰可见、按钮名称有意义。连续按下一张，确认焦点不会消失。在较长的商品说明处暂停，等待超过正常轮播间隔，再单独测试明确重启。用减少动态效果设置和真实小屏布局重复检查。记录浏览器与实际操作顺序，不能只有一张“看起来正常”的截图。
**每张幻灯片都必须支持方向键吗？** 不必。遵循所选模式，原生按钮已有常规激活方式。
**非当前页链接能继续保留 `tabindex=0` 吗？** 如果内容在屏幕外且不可用，就不该如此。视觉可用状态和键盘暴露状态应一致。
可在 Panelly Studio准备幻灯片图片，再单独测试真实轮播。触控间距检查处理按钮尺寸，不能证明键盘行为正确。这里不假定 Panelly 已集成 Opus。
