@devframes/plugin-a11y (英语)
实验 这个devframe是实验性的,可能会在不发生重大版本突起的情况下改变,直到 它稳定.
一名无障碍视察员利用 副总裁它运行 轴核 针对用户应用程序和 显示在 a 固态 面板 :
- 了解路线的跟踪: 桶内违规
location.pathname和音轨 在您浏览用户应用程序( 历史- API 补丁、 框架中立) 时, 它们会持续 内sessionStorage因此历史在标签会话中继续重载. - 盘子+分组违规: 一个 Dashboard 标签( 总数、 严重性) 分类、每行盘点、扫描控制)和违规标签列表 每个有轨电车路线, 分组, 并标出活动路线 .
- 选择 + 突出显示: 徘徊预览违法元素;勾选
变量的复选框选择它,使牌具有不同的状态并绘制
全球数字徽章覆盖了页面中的所有元素.
<html>编号 :<body>目标得到一个角通知 而不是一个取景器填充环. - 生成固定提示: 一个导航按钮收集选定的违反(规则) 元数据、 WCAG 标记、 文档以及每个元素的选取/标记/失败摘要, 按路由分组) 在一个对话框中组合成一个已粘贴准备的 AI 提示 .
- 恒定扫描: 一个DOM
MutationObserver加减 鼠标/键盘/touch recans,从Dash板可切换. - WCAG 2.0-2.2 + 最佳做法: 扩展轴标签集,并有最佳做法 规则标记和可过滤.
- 控制台记录:新发生的侵犯事件被记录(daddup)到 浏览器控制台.
扫描 + 突出显示环路的工作原理相同 服务器或作为烤制的静态构建.
如何运作
3个,其中2个是浏览器侧:
| 块 | 运行在 | 作用 |
|---|---|---|
页面脚本 (单位:千美元)src/inject(中文(简体) ) | 用户应用程序的页面 | 运行轴核、 轨迹路径、 拥有聚合状态、 绘制预览 + 被绑定的环 |
小组讨论会 (单位:千美元)src/spa(中文(简体) ) | 脱衣舞女 | 实心SPA: Dashboard + 分组违规,火灾预览/pin/rescan |
节点 (单位:千美元)src/index.ts, (中文(简体) ), src/node, (中文(简体) ), src/rpc(中文(简体) ) | 节点侧 | get-config RPC(影响分类学+运行时配置):活于dev中,在静态建筑中烘烤 |
页面脚本和面板在 deframe 的页面内聊天
(单位:千美元)devframe/in-page-channel, (中文(简体) ),
合同 src/shared/protocol.ts),而不是编剧
RPC后端. 就是这个让直播循环继续运转 两种模式: 无
一半需要服务器才能到达另一半, 只有同一来源的握手在同一个
选项卡。 页面脚本拥有权威路由 ~ 报告映射作为频道的
共享状态, 它被重放到后加入面板中, 并在每个面板上作为补丁流出
改变,所以面板保持 它的纯质。 副总裁
RPC在顶上搭载了数据模型; get-config 是一个 static 函数,所以
解决 WebSocket in dev 和从静态建筑中烤起的垃圾堆
面板将其运行时配置切片转发到频道上的页面脚本,保留
页面脚本本身没有RPC依赖性.
devframe 故意不提供用户应用程序的 DOM 访问权限,所以
页面脚本是作者提供的桥接进入用户应用程序的页面. 在一个中心
页面脚本是 a11y 的码头 客户端脚本,定义通过
因此,枢纽服务 相同的来源和 devframes: ['@devframes/plugin-a11y']
工作时没有主机接线。 枢纽的客户端运行时间( E)createDevframeClientRuntime
从 @devframes/hub/client)然后将其导入主机页面并调用默认值
以客户端字符上下文导出。 一个主机也可以为模块本身服务(例如.
通过 /@fs/… 以附加方式 a11yClientScriptBundlePath 作为每个峰值
clientScript。由此推导,页脚本也
将活动路线扫描镜像到中心 消息种子: 一个摘要条目
通过装载 + 闲置的生命周期 + 每个违反规则的条目,
带有撞击图级、作为标签的WCAG标签和首个违法者
元素的选择器和边框(由 @devframes/plugin-messages 何时
中心将它挂起。 每个条目还附有 导航动作: 点击它
在信件面板中激活 a11y 码头(hub:docks:activate) 深相联
到规则+路由(或Dashboard,用于摘要)。 两个最小的枢纽实例
完全这样。 在中心外,一个
<script type="module"> 用于同一捆绑的工作; 下面的演示
显示它( 没有中枢上下文, 因此种子镜只保留 ) .
配置
将选项传递到 createA11yDevframe() (从地面穿过) get-config所以他们
到达面板和页脚本:
createA11yDevframe({
autoScan: true, // rescan on debounced interaction (default true)
logIssues: true, // log new violations to the console (default true)
defaultHighlight: false, // auto-pin a route's violations on first scan (default false)
axe: {
tags: [
'wcag2a',
'wcag2aa',
'wcag21aa',
'wcag22aa',
'best-practice'
],
runOptions: {}, // extra axe `run` options merged over the defaults
},
})
运行演示
演示为有意中断的主机页面和面板服务 一个 来源 所以他们分享频道.
pnpm -C plugins/a11y build # build the panel + the page-script bundle
pnpm -C plugins/a11y demo # dev: live WebSocket RPC → http://localhost:4477/
pnpm -C plugins/a11y cli:build # bake the static deploy (dist/static)
pnpm -C plugins/a11y demo:build # static: baked RPC dump, no server
打开 URL, 然后在面板中任意一行徘徊, 并在页面中显示匹配元素
获得焦点环(并滚动到屏幕外的视图). 两种演示模式
行为一致; 面板 websocket 编号 : static 标记是唯一的告诉.
独立, 没有用户应用程序 :
pnpx @devframes/plugin-a11y # the published package, panel only, at /__devframes_plugin_a11y/
pnpm -C plugins/a11y dev # from source: same, at /__devframes_plugin_a11y/
文件地图
| 路径 | 导出 | 目的 |
|---|---|---|
src/index.ts | . | createA11yDevframe() (同时也是默认导出),宣布页面脚本为它的码头客户端脚本; a11yClientScriptBundlePath 是那个模块吗 |
src/node/index.ts | /node | setupA11y(ctx, options?) 用运行时配置注册 RPC 函数 |
src/cli.ts | /cli | createA11yCli() 备份 devframes_plugin_a11y 选项 |
src/client/index.ts | /client | connectA11y(),一个已键入的浏览器 RPC 客户端包 |
src/rpc/ | 内部 | get-config 静态 RPC + 类型安全客户登记册 |
src/shared/protocol.ts | 内部 | 页面脚本 qq 面板在页面中的频道合同 (A11yChannelProtocol(中文(简体) ) |
src/inject/ | 内部 | 页面脚本(轴扫描、突出显示、中枢信息镜像) ~ dist/inject/inject.js |
src/spa/ | 内部 | 硬面板 SPA − assets-pkg/dist (船舶在 @devframes/plugin-a11y--assets(中文(简体) ) |
demo/ | 内部 | 同源主机页面+服务器(dev+静态模式) |
tests/ | 内部 | dev-server RPC + 静态建设垃圾堆 |