反馈
Alert - 提示条
关于这个页面的一条消息，就地显示。
用法
什么时候用它
import { Alert } from '@misoto22/folio'说明
关于当前页面的一条消息，就地显示。
danger 语气带 role="alert"，其余带 role="status"，这是“打断读者”和“等一个停顿”的区别。把这两个弄反是这里最常见的无障碍事故：一条“已保存”提示在别人说到一半时插话，或者一个支付错误压根没被念出来。
语气表示消息的严重程度，不是装饰。颜色由图标和文字各说一遍，所以在黑白打印和色盲眼里，意思都还在。
结构
| 部件 | 说明 |
|---|---|
| 区域必填 | 外层容器，带着由 tone 决定的 role 和 aria-live，以及那个 tone 的底色。它不可聚焦、也不是地标，所以它是为已经在这里的读者、以及为那次播报而存在的。 |
| 标记 | 18px 的 Remix Icon 字形，按 tone 取——RiInformationLine、RiCheckboxCircleLine、RiAlertLine 或 RiCloseCircleLine——aria-hidden，所以它只为看得见的读者把颜色再说一遍。hideIcon 会去掉它。 |
| 标题 | title，一个 --ink 色、中等字重的段落。是 p 而不是标题元素，所以它永远不会出现在读屏软件的标题列表里。 |
| 正文 | children，--ink-2 色、宽松行距，只有真的有标题时才和标题拉开间距。 |
| 操作 | action，在正文下方、区域之内——所以它的标签是跟着这条消息一起被念出来的，而不是要读者自己去找的东西。 |
实践建议
推荐
- 有话说的时候把 Alert 挂上，没话说的时候卸掉。一个常驻在页面里的区域只在文字变化时播报，所以第二次提交失败若带着同一句话，就是对谁都没播报。
- 提交失败后要移动焦点——移到 Alert 上，或者移到它点名的那个字段上。这个组件播报完就待在原地，所以键盘用户是站在原处听到那条错误的，之后没有任何路径回到它。
- 重试、链接或者出口要放进 action，不要在正文里描述它。它在 live region 里面，这就是「播报告诉读者该做什么」和「播报只告诉读者出事了」之间的差别。
避免
- hideIcon 拿掉的是给颜色做双保险的两样东西之一，而那些带色底只是纸面上 13–16% 的透明度。标记一没，严重程度就只剩一层读者可能根本分辨不出来的淡色，所以文字必须把它直说出来。
- info 是默认值，也是唯一一个有边框、没有色底的 tone——一条 --rule-2 细线里包着 --paper-2，那就是一张卡片。所以不写 tone 的 Alert 看起来像页面陈设，不像一条通知。
- 不要把 Alert 摞成一份流水日志。每一个都是自己的 live region，所以一页五个就是五条播报在抢同一个语音队列；其中若有一个 danger，它的 assertive 足以打断那四条正在解释它的话。
示例
tones
四种 tone，按它们升级的顺序排开。tone 是这条消息的严重程度，不是它的装饰：danger 带的是 role alert，会打断读屏软件正在念的任何内容，因为读者手上的事已经在失败了，而另外三种带的是 role status，会等一个停顿。颜色被图标和文字各重复了一遍，所以含义在单色打印和色觉障碍下都还活着——而这正是 hideIcon 拿走的东西，只把严重程度留在一层 13% 到 16% 透明度的淡色上。不要把它们当成一份滚动日志堆起来：一页五条，就是五个实时区域在抢同一条语音队列，而其中那条 danger 会把解释它的另外四条切掉。
Read-only mode
Deployed
Token expires in 6 days
Upload failed
a failed submit
一个必须留在页面上的错误，出路就在它里面。把重试放进 action，而不是在正文里描述它：action 坐在实时区域内部，而这正是「播报告诉读者该做什么」和「只告诉他们出了点事」之间的差别。有话要说时把 Alert 挂上，没话说时把它卸掉——一个长期留在页面里的区域，只有在它的文字变化时才会播报，所以第二次提交失败、消息还是同一条的话，播报给了空气。把焦点移到它上面，或者移到它点名的那个字段：它播报完就待着不动，所以用键盘的读者是站在原地听到这条错误的。
We could not send the invitation
Enter an address we can deliver to.
inside the panel
一块面板失败了；页面其余部分还能用。这正是一个全屏 ErrorState 会搞错的场景——把整个视图换掉，等于把读者用来脱身所需要的导航一并丢掉，而面板里的一条 Alert，既留住了错误、也留住了绕过它的路。只有当页面本身就无法显示时，才拿页面尺寸的那种状态。这里的 tone 是 warning 而不是 danger，理由相同：读者做的事没有失败，而 danger 强势到足以打断他们正在页面别处读的东西。
Deploy history
History is unavailable
类型
export type AlertTone = 'info' | 'success' | 'warning' | 'danger'无障碍
- danger 是 role="alert"，会打断；其余三种是 role="status"，等读屏说完这句话。
- 颜色由图标和文字双重表达。