touch-ipad-review

触控与 iPad 审查

审查 React + Tailwind 应用在 iPad 和触摸屏上的优先触控交互。跳过通用建议（使用语义化 HTML、适配响应式布局等）——只指出不易察觉的问题。

检查清单： references/tailwind-touch-checklist.md

何时运行

用户提示类似：“审查应用的触控/iPad 使用体验” 或 “结合触控/平板使用场景审查应用”。

审查流程

1. 扫描交互式 UI——按钮、链接、图标按钮、标签页、地图控件、下拉菜单 / 菜单 / Listbox、侧边栏中可内联选择的行、拖动手柄、表单控件、自定义点击目标（非按钮元素上的 onClick）。
2. 逐项检查清单——将列表归类为 Bucket A（Headless UI / Radix）或 Bucket B（自定义 <button> 行）；可使用 grep 搜索（hover:、data-focus:、focus &&、MenuItem、ListboxOption、onClick、cursor-、group-hover）。
3. 在脑海中模拟 iPad 使用场景——分屏视图宽度变化、悬停状态残留、触控高亮（在打开的菜单和内联列表中按下、拖动并松开）、双击缩放、键盘遮挡输入框、拇指触及主要操作的难易程度。
4. 使用下方模板生成报告——每项发现都必须包含位置、问题和具体的 Tailwind/React 修复方案。

不要列出已符合要求的通用做法。合并重复问题（例如“12 个图标按钮缺少 min size”），并列出有代表性的文件。

报告模板

将此结构复制到回复中：

# Touch / iPad review — [app or scope]

## Summary

[2–3 sentences: overall risk, top themes]

## Findings

### Critical

| #   | File / component | Issue | Suggested fix                   |
| --- | ---------------- | ----- | ------------------------------- |
| 1   | `path:line`      | …     | Tailwind classes or code change |

### Warning

| #   | File / component | Issue | Suggested fix |
| --- | ---------------- | ----- | ------------- |

### Nice to have

| #   | File / component | Issue | Suggested fix |
| --- | ---------------- | ----- | ------------- |

## FMC conventions verified

- [ ] All `<a>` and `<button>` (and tappable custom controls) use `cursor-pointer` on desktop
- [ ] Interactive controls use `select-none` where text selection would flash on iPad
- [ ] Hover-only affordances gated with fine-pointer media (see checklist)
- [ ] Menu/list rows: touch-over via `data-focus:` / `focus` (Headless UI) or `data-[highlighted]:` (Radix) — not `hover:` alone
- [ ] Inline sidebar pickers flagged if hover-only (Bucket B)

## Passed (non-obvious)

[Only items you explicitly checked and that are correct — keep short]

严重程度

级别	适用情况
严重	触控操作失效、无法点按访问、功能被隐藏、主要流程存在误触风险
警告	体验不佳但仍可用；悬停状态残留；点击目标略小；缺少反馈
可有可无	一致性、拇指热区优化；网页上的触觉反馈不适用

FMC 默认规则（始终检查）

每次审查都要检查以下内容：

规则	Tailwind / 代码
链接和按钮的桌面指针样式	在 <a>、<button> 和可点按的自定义控件上使用 cursor-pointer
控件上不出现 iOS 文本选择闪烁	对用作控件的按钮、图标按钮、标签页、标签使用 select-none
仅对精细指针启用悬停效果	不要对必要 UI 使用裸 hover:；改用 [@media(hover:hover)_and_(pointer:fine)]:hover:…（或项目自定义变体——参见检查清单）

快速 grep 搜索提示

# Hover without fine-pointer guard (manual triage)
rg 'hover:' --glob '*.{tsx,jsx}'

# Small tap targets
rg '<(button|a)[^>]*(size-[0-9]|h-[0-9]|w-[0-9])' --glob '*.tsx'

# Div click traps
rg 'onClick' --glob '*.tsx' | rg -v '<button|<a '

# Missing cursor on interactives (heuristic)
rg '<(button|a) ' --glob '*.tsx' | rg -v 'cursor-pointer'

# Headless UI menus: hover without touch-over styling
rg 'MenuItem|ListboxOption|menuItemClasses' --glob '*.tsx'
rg 'hover:bg' --glob '*Menu*.tsx' --glob '*Listbox*.tsx' --glob '*Dropdown*.tsx'

# Inline sidebar rows: hover-only selection feedback
rg "hover:bg.*onClick|onClick.*hover:bg" --glob '*.tsx'

外部参考资料

• Apple HIG — 无障碍功能（44×44 pt 点击目标）
• Apple HIG — iPadOS 设计指南
• WCAG 2.2 — 目标尺寸（2.5.8）
• 触控目标实践（Capi Product）
• 触控设计（Design+Code / iOS 手册）
• 移动应用设计最佳实践（RapidNative）