101 lines
4.2 KiB
JSON
101 lines
4.2 KiB
JSON
{
|
||
"slug": "popover",
|
||
"end": "html",
|
||
"curated": true,
|
||
"summary": "原生弹出框：按钮 aria-expanded 与面板 hidden 同步切换，Escape 未处理。",
|
||
"usage": [
|
||
"结构是 .kole-popover-popover-wrap 包一个按钮与一个面板，面板用 id（#kole-popover-pop）与按钮的 aria-controls 对应。",
|
||
"打开与关闭是同一句：pop.hidden = !pop.hidden，按钮的 aria-expanded 用 String(!pop.hidden) 同步写回。",
|
||
"初始态双写：按钮 aria-expanded=\"false\"，面板 hidden，两处必须一致。",
|
||
"面板带 role=\"dialog\"（内容可含表单与操作），按钮叠加 .kole-popover-primary 表示主操作样式。",
|
||
"点外关闭与 Escape 都没实现：示例只在 data-pop 的 click 上切 .kole-popover-popover 的 hidden 属性。"
|
||
],
|
||
"bestPractices": [
|
||
"点页面其它位置不会关面板，接真实场景要自己补 document 上的 click 加 contains 判断。",
|
||
"Escape 关闭也没有，键盘用户只能再按一次按钮，建议补 keydown。",
|
||
"aria-expanded 是手动同步的字符串，改显隐逻辑时别漏掉这一行，否则读屏状态与视觉不一致。"
|
||
],
|
||
"a11y": [
|
||
"aria-expanded 与 aria-controls 成对出现且指向真实 id，这是本页做对的地方。",
|
||
"面板 role=\"dialog\" 但没有 aria-modal、没有 aria-label 或 aria-labelledby，读屏进入后不知道这个对话框叫什么。",
|
||
"没有焦点管理：打开后焦点仍在按钮上，Tab 会走到后面的内容而不是进面板。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "attrs",
|
||
"note": "H5 端用类名加单个 data-* ：.kole-popover-popover-wrap 包裹层、按钮带 aria-expanded / aria-controls 与 data-pop 钩子、面板 .kole-popover-popover 用 hidden 属性控显隐，切换全在一段页内脚本里。",
|
||
"table": [
|
||
{
|
||
"name": "demo",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/Popover.html:5）。"
|
||
},
|
||
{
|
||
"name": "demo-block",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/Popover.html:5）。"
|
||
},
|
||
{
|
||
"name": "demo-note",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/Popover.html:5）。"
|
||
},
|
||
{
|
||
"name": "kole-popover",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/Popover.html:6）。"
|
||
},
|
||
{
|
||
"name": "kole-popover-button",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/Popover.html:6）。"
|
||
},
|
||
{
|
||
"name": "kole-popover-desc",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/Popover.html:6）。"
|
||
},
|
||
{
|
||
"name": "kole-popover-popover",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/Popover.html:6）。"
|
||
},
|
||
{
|
||
"name": "kole-popover-popover-wrap",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/Popover.html:6）。"
|
||
},
|
||
{
|
||
"name": "kole-popover-primary",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/Popover.html:6）。"
|
||
},
|
||
{
|
||
"name": "kole-popover-surface",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/Popover.html:6）。"
|
||
}
|
||
]
|
||
},
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/Popover.html",
|
||
"kind": "H5 原生",
|
||
"desc": "该端实现（本页 API 与用法的唯一权威来源）。"
|
||
},
|
||
{
|
||
"file": "frameworks/Popover.css",
|
||
"kind": "样式",
|
||
"desc": "该组件的样式文件，类名口径以它为准。"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"popover-ex-1",
|
||
"popover-ex-2"
|
||
],
|
||
"notes": [
|
||
"包裹层与按钮 aria 属性见（frameworks/Popover.html:6），面板 id 与 hidden 同在这一行。",
|
||
"显隐与 aria-expanded 同步见（frameworks/Popover.html:6）的内联脚本（pop.hidden = !pop.hidden 与 setAttribute）。",
|
||
"未实现点外与 Escape 关闭：该页脚本只有按钮的 click 监听（frameworks/Popover.html:6）。"
|
||
]
|
||
}
|