开发工具CLILint格式化静态分析代码质量构建工具【免费下载链接】toolsUnified developer tools for JavaScript, TypeScript, and the web项目地址https://gitcode.com/gh_mirrors/to/tools点击查看免费下载RomeUnified developer tools for JavaScript, TypeScript, and the web内置的a11y/noDistractingElements规则用于在 JSX 代码中拦截marquee、blink等视觉干扰性元素。这类元素会持续滚动或闪烁对弱视、认知障碍用户构成严重的可访问性Accessibility问题且均已从现代 HTML 标准中废弃。本文以官方文档为骨架结合 Rome 仓库源码与测试用例完整讲解该规则的匹配逻辑、诊断输出、自动修复、配置方式与 WCAG 关联帮助你直接在项目中启用并落实这条开箱即用的推荐规则。规则概述什么是distracting elementsnoDistractingElements规则自 Rome v11.0.0 起提供的核心职责是强制要求 JSX 代码中不得使用会干扰用户视觉注意力的 HTML 元素。根据 website/src/pages/lint/rules/noDistractingElements.md 的说明视觉上具有干扰性的元素会给弱视用户带来可访问性问题这类元素大多已被弃用deprecated应当避免使用默认被判定为视觉干扰的元素为marquee和blink。marquee滚动字幕与blink闪烁文字是早期浏览器时代的遗留元素前者内容会不断横向/纵向滚动后者文字会周期性闪烁。二者都无法被用户轻易暂停且在现代 HTML 规范中已不再被推荐。规则在crates/rome_js_analyze/src/analyzers/a11y.rs中被注册为a11y组的成员之一声明如下pub(crate) mod no_distracting_elements; // ... declare_group! { pub (crate) A11y { name : a11y , rules : [ // ... self :: no_distracting_elements :: NoDistractingElements , // ... ] } }规则元信息在 no_distracting_elements.rs 的declare_rule!宏中可以看到该规则的注册元数据pub(crate) NoDistractingElements { version: 11.0.0, name: noDistractingElements, recommended: true, }字段值说明规则 IDa11y/noDistractingElements完整的 lint 规则标识引入版本11.0.0自该版本起可用recommendedtrue属于推荐规则集开启recommended即自动生效所属分组a11y无障碍相关规则组匹配与诊断源码中的实现细节查询类型与匹配逻辑该规则基于 Rome 的规则框架实现crates/rome_analyze其Ruletrait 实现位于 no_distracting_elements.rsimpl Rule for NoDistractingElements { type Query AstAnyJsxElement; type State JsSyntaxToken; type Signals OptionSelf::State; type Options (); fn run(ctx: RuleContextSelf) - Self::Signals { let element ctx.query(); let name element.name_value_token()?; match name.text_trimmed() { marquee | blink Some(name), _ None, } } // ... }实现要点查询目标AstAnyJsxElement即规则只作用于 JSX 元素节点对普通 JavaScript 字符串、HTML 文件不生效匹配方式取出元素的名称 token通过text_trimmed()与字面量字符串marquee、blink精确比较大小写敏感JSX 标签名本就区分大小写无配置选项type Options ()意味着该规则不接受额外配置参数启用与否就是全部控制手段。诊断信息命中后规则产生如下诊断与官网文档中展示的输出一致a11y/noDistractingElements.js:1:1 lint/a11y/noDistractingElements FIXABLE ━━━━━━━━━━━━ ✖ Dont use the marquee element. 1 │ marquee / │ ^^^^^^^^^^^ ℹ Visually distracting elements can cause accessibility issues and should be avoided. ℹ Suggested fix: Remove the marquee element.诊断消息由源码中的RuleDiagnostic构造let diagnostic RuleDiagnostic::new( rule_category!(), element.range(), markup! {Dont use the {name.text_trimmed()} element.}.to_owned(), ) .note(markup! { Visually distracting elements can cause accessibility issues and should be avoided. });即错误标题为Dont use the 元素名 element.补充说明为视觉干扰元素会导致可访问性问题应当避免。这与文档中的FIXABLE标记相呼应——该诊断附带自动修复能力。自动修复Quick Fix 的实现机制文档中给出的两个非法示例marquee /与blink /在 CLI 输出中均带有FIXABLE标记其修复动作由action方法提供fn action(ctx: RuleContextSelf, name: Self::State) - OptionJsRuleAction { let element ctx.query(); let mut mutation ctx.root().begin(); mutation.remove_node(element.clone()); Some(JsRuleAction { category: ActionCategory::QuickFix, applicability: Applicability::MaybeIncorrect, message: markup! { Remove the {name.text_trimmed()} element. }.to_owned(), mutation, }) }修复逻辑解读通过BatchMutationExt的remove_node将整个违规 JSX 元素节点从语法树中删除修复分类为QuickFix即可以使用rome check --fix或编辑器内的快速修复一键应用applicability为MaybeIncorrect语义上表明该修复是移除整个元素的激进操作Rome 判定其可能不完全符合用户意图例如元素内若还有子内容也会一并删除因此不会作为--apply-unsafe之外的默认自动应用——在 CLI 中通常需要通过不安全修复通道应用或由用户手动接受。建议的修复消息为Remove the 元素名 element.即直接删除该元素这与文档 Suggested fix: Remove the marquee element. 完全一致。配置指南如何启用、关闭与调整规则推荐规则集自动启用由于recommended: true只要配置文件中开启了推荐规则集即可自动启用{ linter: { enabled: true, rules: { recommended: true } } }这与仓库根目录的 rome.json 配置方式一致{ linter: { enabled: true, rules: { recommended: true, style: { noNonNullAssertion: off } } } }单独控制该规则在rome.json的linter.rules.a11y分组下可单独调整{ linter: { rules: { a11y: { noDistractingElements: error } } } }可选值及对应源码类型见 linter/mod.rs 的RuleConfiguration枚举配置值效果对应变体off完全关闭该规则Plain(Off)warn命中时输出警告不阻断Plain(Warn)error命中时输出错误默认级别Plain(Error){ level: ..., options: {...} }带选项形式该规则无可用选项WithOptions(...)源码中RuleConfiguration::is_disabled()判断Off、is_enabled()、is_err()等辅助方法决定了配置级别如何映射到最终的诊断严重程度默认值为Errorimpl Default for RuleConfiguration返回Self::Plain(RulePlainConfiguration::Error)。关闭规则的其他方式按行禁用在代码上方使用// rome-ignore lint/a11y/noDistractingElements: 原因注释对应文档 Disable a rule 一节整个文件忽略通过linter.ignore配置或在文件头部添加相应 suppression 注释完全关闭 linter将linter.enabled设为false不推荐。由于该规则没有Options文档中的 Rule options 小节对本规则不适用——它不接受如level之外的任何参数配置对象中传入未知字段会被deny_unknown_fields拒绝见RuleConfiguration的 serde 属性。实例演示非法与合法代码非法会触发诊断marquee / blink /对应官网文档中两个带FIXABLE标记的示例输出// 输入 marquee / // 诊断Dont use the marquee element. // 建议修复Remove the marquee element.删除该元素 blink / // 诊断Dont use the blink element. // 建议修复Remove the blink element.删除该元素合法不会触发诊断div /div不属于干扰性元素因此合法。更一般地除marquee、blink外的其他 JSX 元素都不会命中该规则——匹配逻辑是白名单式的精确比较match name.text_trimmed() { marquee | blink ... }。测试用例验证仓库中的快照测试 invalid.jsx 与 invalid.jsx.snap 完整验证了上述行为。测试输入div div / marquee / blink / /div快照输出确认marquee /第 3 行命中lint/a11y/noDistractingElements标记FIXABLEblink /第 4 行同样命中并标记FIXABLE外层div与内部div /均不产生任何诊断每个诊断都附带Visually distracting elements can cause accessibility issues and should be avoided.说明与Remove the 元素名 element.修复建议。这份快照同时证明了诊断定位行列号、消息文案与修复提示与官方文档展示完全一致是规则行为的可执行说明书。无障碍准则依据该规则对应 WCAG 2.2.2Pause, Stop, Hide即暂停、停止、隐藏准则该准则要求对于自动移动、闪烁、滚动或自动更新的信息必须提供暂停、停止或隐藏的机制否则会阻碍用户阅读与操作。marquee自动滚动与blink自动闪烁正是违反该准则的典型元素。相关说明见文档 Accessibility guidelines 一节。作为对比Rome 的a11y组还包含use_media_caption、use_alt_text、use_iframe_title等其他可访问性规则共同构成完整的 JSX 无障碍检查体系完整清单见 a11y.rs。使用场景与落地建议noDistractingElements适用于所有基于 JSX 的前端项目React、Preact、Solid 等。落地建议保持推荐规则集开启recommended: true即可覆盖本规则无需额外配置处理存量代码运行rome check查看全部命中点评估后批量移除marquee、blink对确实无法立即修改的代码用// rome-ignore lint/a11y/noDistractingElements: 原因说明理由后临时豁免警惕自动修复的语义修复会删除整个元素remove_node若元素内含子内容或事件处理器请确认删除不会引入功能损失必要时改为手动替换为无障碍等价实现如用 CSS 动画并配暂停开关代替marquee纳入 CI在持续集成中运行rome check将a11y/noDistractingElements作为错误级别把关防止回归。小结a11y/noDistractingElements是 Rome 在无障碍方向上的一条小而实用的推荐规则它精确锁定marquee、blink两个已废弃的干扰性元素提供清晰的诊断文案与删除元素的快速修复并通过recommended: true随推荐规则集默认开启。从 no_distracting_elements.rs 的run/diagnostic/action三段式实现到 invalid.jsx.snap 的端到端快照验证再到 rules.rs 中no_distracting_elements字段的配置解析整条链路清晰可查。在你的项目中启用它即可从工具链层面杜绝这两类视觉干扰元素向 WCAG 2.2.2 准则迈出扎实一步。赞分享开发工具CLILint格式化静态分析代码质量构建工具【免费下载链接】toolsUnified developer tools for JavaScript, TypeScript, and the web项目地址https://gitcode.com/gh_mirrors/to/tools点击查看免费下载相关推荐Agent-E深度解析基于LLM的智能网页自动化框架完整指南Agent E深度解析基于LLM的智能网页自动化框架完整指南 Agent E是一款开源的AI驱动网页自动化框架通过大语言模型LLM技术实现智能化的网页交Kibana 前端无障碍规范EuiToolTip / EuiIconTip 内容中禁止交互元素的原理、写法与 ESLint 强制落地Kibana 前端无障碍规范EuiToolTip / EuiIconTip 内容中禁止交互元素的原理、写法与 ESLint 强制落地 本文基于 Kibana前端数据可视化数据分析后端可观测性Front-End-Checklist 无障碍规则解析禁止在 body 上使用 aria-hiddenaria-hidden-bodyFront End Checklist 无障碍规则解析禁止在 body 上使用 aria hidden aria hidden body 本篇指南聚焦上一篇Filament 文件上传字段FileUpload完整实战指南存储、图片编辑、校验与安全防护下一篇Hutool项目中Snowflake算法动态配置WorkerId的最佳实践创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考