分页
。依据 W3C APG +
USWDS + MDN + Component Gallery + Mironsoft（5 个来源口径一致）。
1 · 基本用法
共 248 条，每页 20 条 ⇒ 13 页。
键盘试试：Tab 聚焦到分页后，← → 翻页，
Home End 跳首末。
🔴 读屏播报区（aria-live）的内容：
（翻页后会更新）
2 · 结构：六条硬要求
| 要求 | 为什么 |
|---|---|
包在 <nav aria-label> 里 |
页面常有多个 nav（主导航/面包屑/分页），
没有 aria-label 读屏器分不清 |
用 <ul>+<li>，不用松散的 <a> |
列表能传达"共几项""当前在第几项" |
当前页 aria-current="page" |
⛔ 不用 aria-selected
—— 那是给 tab/option/row 用的 |
页码 aria-label="第 4 页" |
孤零零的数字脱离上下文没有意义 |
首/末页用 disabled |
看着能点却不工作是最糟的 |
翻页有 aria-live="polite" |
只改文字变化的话，视觉变化对读屏器是静默的 |
⛔ 常见错误：把 role="navigation" 直接放在 <ul> 上
—— 那会覆盖 ul 的列表语义（Component Gallery 明确点出）。
3 · 当前页仍然是按钮（不是纯文字）
USWDS 的说明听起来反直觉：当前页也要是链接/按钮，
只是用 aria-current 标记 + 视觉高亮。
理由：读屏器无论用户是浏览还是Tab 焦点，都能播报当前页。
4 · 槽位固定 7 个（USWDS 的规定）
永远显示：首页 · 当前页 · 最后一页 · 当前页两侧各一页。
有遗漏就显示省略号，且总数固定 —— 翻页时按钮位置不跳。
试试拖到第 5 页、第 11 页看槽位怎么变。
5 · 命中区
每个按钮 44×44px，走 --sz-touch 令牌
（WCAG 2.5.5 Level AAA 的要求；AA 级的 2.5.8 只要 24px，本库按 AAA 做）。
⚠️ 槽位间距只用 2px —— USWDS 明确说
过大的水平间距会让视力/行动受限的用户"扫不到"而跳过元素。
6 · 窄屏
页码窗口会换行，状态文本另起一行 ⇒ 不产生横向溢出。
7 · 表格页脚里的精简分页（不占一行位置）
数据表底部通常只有一两行的空间：状态文字可以省，播报区不能省。
做法是把 data-pg-live 挂在一个 .pagination__sr 上 ——
视觉上不占位，读屏照常播报（用 clip 裁掉，不是 display:none；
后者会把整块移出无障碍树，播报就没了）。
⚠️ 省略 data-pg-status 是允许的（JS 里有判空）；
省略 data-pg-live 则等于"翻页了但不告诉读屏"。
对比：错写法 vs 本库写法
❌ 常见写法：页码全铺开
12 个页码硬塞进一行，窄屏上要么换行、要么每个都挤到点不中。而 4~10 页其实是读者最不会去点的区间。
✅ 本库：7 个槽位封顶 + 省略号
USWDS 的上限是 7 个槽位：首尾两页 + 当前页邻域，中间用 pagination__ellipsis 收掉。省略号不是装饰，是"这里还有页"的承诺 —— 所以没跳过页码时不许显示它。