组件 · 设置
列表 List
一列可点的行：标题、说明、右侧操作；当前项用 aria-current。
演示
- 一篇长文
- 另一篇
<ul class="xxd-list" data-interactive>
<li class="xxd-list__item"><div class="xxd-list__main"><div class="xxd-list__title">一篇长文</div><div class="xxd-list__meta">今天 14:02</div></div></li>
<li class="xxd-list__item" aria-current="true"><div class="xxd-list__main"><div class="xxd-list__title">另一篇</div></div></li>
</ul>属性与类名
| 属性 / 类名 | 说明 |
|---|---|
| data-interactive | 行可点（hover 底色） |
| aria-selected | 选中行：一层淡色 |
| 类名 | xxd-list xxd-list__item xxd-list__main xxd-list__title xxd-list__meta |
键盘与读屏
- 选中的那一行写 aria-current="true"（不是 aria-selected——那是给 listbox 选项用的）
- 整行可点时用一个链接 / 按钮包住主区域，其余操作单独可聚焦
规则
- 只在行之间画线，第一行上、最后一行下不画
- 选中是淡色，不加彩色边或竖条