反馈
ErrorState - 错误状态
一个没能显示出来的页面。
用法
import { ErrorState } from '@misoto22/folio'说明
一个无法显示的页面。
状态码排在字号阶梯的最顶端，并标了 aria-hidden——念出来的话，在解释它的那句话之前先来一个“404”只是噪音，而紧随其后的标题已经用文字说了同一件事。
结构
| 部件 | 说明 |
|---|---|
| 屏必填 | 一个至少一屏高的 section，自己铺 --paper 底色，并给页头留出 96px 的净空。它是一个页面，不是一个区块。 |
| 状态码必填 | code，坐在字号阶梯的最顶端，aria-hidden。它是屏幕上最大的东西，也是读屏用户唯一永远听不到的东西。 |
| 标题必填 | heading，经由 Heading 以 --fs-heading 渲染，也是第一句被念出来的话。level 默认是 1，因为它顶替的是整个页面；字号是固定的，所以被降成 h2 的错误状态，看上去还是原来那么大。 |
| 说明必填 | message，行长为 --measure-record，「发生了什么」的解释写在这里。 |
| 操作必填 | 回去的路。它是必填而不是可选的，也是这一屏上唯一可聚焦的东西。 |
实践建议
推荐
- 用它顶替页面，而不是放进页面里。它是一整屏，自带底色和顶部净空，所以嵌在一个已经有页头的布局里，它会在首屏之下再添一屏空白。
- 客户端失败时要播报它，或者把焦点移进去。这里没有 role、也没有 live region，所以一条把整屏换成它的路由，改掉了看得见的读者眼前的一切，却什么也没说。
- action 要指向一个真实的目的地，而不是浏览历史。读者常常是冷启动、或者顺着一个链接到达错误页的，所以返回会把他送回刚刚失败的那个页面，或者送回什么都没有的地方。
避免
- 在一个已经有 h1 的应用外壳里，不要把 level 留在 1。一份文档上两个 h1，会让标题列表再也说不清哪一个才是这个页面——渲染进外壳、而不是顶替外壳的状态，要传 level={2}。
- 不要把请求 id、调用链或者一整句话塞进 code。它是 --fs-title 加 leading-none，而且 aria-hidden，所以任何长内容都会变成页面上最大的一块，同时又对最可能需要复述它的那位读者完全不可见。
- 只有一个面板失败、页面其余部分还能用时，不要用它。换掉整屏就把读者赖以脱身的导航一起扔了；把 Alert 放进那个面板里，错误和绕过它的路才都还在。
示例
not found
那个显示不出来的页面。要用它代替这个页面来渲染，而不是渲染在页面里面：它是一整屏视口，自带底色和顶部净空，所以嵌进一个已经有页头的布局里，会在首屏以下再加一屏空白——这里的例子传了 min-h-0 来适配画布，也传了 level={2}，因为本页自己的 h1 就在它们上面。code 位于字号梯子的顶端，而且是 aria-hidden 的，所以紧随其后的标题必须用文字把同一件事再说一遍。这里也没有实时区域，所以一个把整屏换成它的路由，改掉了看得见的读者能看见的一切，却什么都没说。
a way back
action 是必填而不是可选，因为它是这一屏上唯一可聚焦的东西——而且它必须指向一个真实的目的地，而不是指向历史记录。一个读者从冷启动、或者从别人给的链接到达一个错误页的次数，至少和从应用内部到达一样多，所以「返回」会把他送回刚刚失败的那个页面，或者送到什么都没有的地方。两条链接差不多就是它该承载的上限：回家的路，以及那个能说明「是不是只有我这样」的页面。
Something went wrong at our end
The request reached us and failed while it was being handled. Nothing you sent was lost.
the trace id
那串编号该去哪里：写进消息里，绝不写进 code。code 是按 --fs-title 配 leading-none 排的，而且是 aria-hidden 的，所以一个放在那儿的 request id 会成为整页上最大的物体，同时又对那个最可能要在电话里念出它的读者完全隐形。那个槽位的尺寸是照着三个字符定的；编号属于句子里，在那儿它可被选中、可被复制，也会和其余的解释一起被念出来。
We could not load this deploy
The build service timed out. Quote req_8f31c0 if you report it — it identifies this request.
再导出
ERROR_ACTION_CLASS = 'text-sm text-(--ink) underline decoration-(--rule-2) underline-offset-4 transition-colors duration-(--duration-fast) hover:decoration-(--ink)'恢复入口的样子，导出出来，好让每个错误页提供的都是同一个，而不是各自发明一种链接样式。
无障碍
- 巨大的状态码是 aria-hidden 的；紧随其后的标题用文字说了同一件事。