checkbox / radio / select

整个 label 都能点（input 透明铺满了它），但视觉方框只有 20px——触摸目标是 44px。

.choice__hint 是解释，不是标签的一部分： 它排在标签下方、和文字左对齐，并且用 aria-describedby 关联 —— 读屏念"订阅月度报告，复选框"，再补一句说明。 （写进 label 里会变成名字的一部分，念起来像"订阅月度报告每月1日发一封可随时退订"。）

"全选"框初始是半选（横线），因为下面只选了 2 个。 不做这个态，"全选"复选框就无法正确表达中间状态。

用 ↑↓ 在组内移动， 移动即选中——这是原生 radio 行为，<div> 模拟不出来。
fieldset + legend 让屏幕阅读器播报"第几组、共几项、当前选中第几项"。 换成 <div>+<span> 这些信息全丢。

用原生 select，不做自定义下拉。 移动端会弹出系统带 wheel 的原生选择器、语言跟随系统、无障碍由系统保证。 换成 <div> 模拟，这些全部要重写且必然漏一部分。
这里只改了外观（appearance:none + 自绘箭头）， ↑↓ 选择、Enter 确认、Esc 关闭全部保留。 箭头写了 pointer-events:none，否则它会吃掉点击。

.select__control--auto：固定 44px 高度遇到换行文字会把第二行裁掉， 所以多选列表 / 长选项要把高度放开（height:auto + min-height:44px）。 这是原生 select，箭头就不需要了 —— 它本来就不是"点开下拉"的交互。

不用 opacity，用明确的低对比色组（对比度会变成不可控的随机数）。 disabled 之后 hover 不能有任何变化，否则看着像还能点。