Rome 无障碍 lint 规则 noAriaUnsupportedElements：阻止在 meta、html、script、style 元素上使用 role 与 aria-* 属性

Rome 无障碍 lint 规则 noAriaUnsupportedElements阻止在 meta、html、script、style 元素上使用 role 与 aria-* 属性【免费下载链接】toolsUnified developer tools for JavaScript, TypeScript, and the web项目地址: https://gitcode.com/gh_mirrors/to/toolsnoAriaUnsupportedElements是 Rome本项目tools仓库即 Rome 统一开发者工具链内置的 JSX/无障碍a11ylint 规则用于强制要求不支持 ARIA 角色role、状态state与属性property的 HTML 元素不得携带这些 ARIA 相关属性。阅读本文后你将掌握该规则的完整触发场景与放行规则、它在 Rome 源码中的判定实现细节、在rome.json中的推荐配置与手动开关方法以及如何借助仓库内的快照测试用例验证规则行为。规则概述该规则自v12.1.0起可用见 源码声明所属 lint 规则组为nursery试验性规则组见 nursery.rs规则标识符为noAriaUnsupportedElements。规则面向 JSX 代码当meta、html、script、style这四个元素被显式加上role属性或任何aria-*属性时会产生诊断信息。其设计初衷与 eslint-plugin-jsx-a11y 的aria-unsupported-elements规则一致源码注释中明确标注了对应上游文档链接核心理由是在这些元素上使用role或aria-*属性不会给辅助技术如屏幕阅读器带来任何可访问性收益反而可能干扰其解析结果、造成误导因此属于应被消除的冗余/错误用法。触发与放行规则Invalid会被报告的代码规则把以下四个元素名固定写入一个常量数组no_aria_unsupported_elements.rsconst ARIA_UNSUPPORTED_ELEMENTS: [str; 4] [meta, html, script, style];只要元素名命中该列表并且其属性中出现了属性名以aria-开头、且该属性名确实是rome_aria元数据中登记的有效 ARIA 属性判定依赖aria_properties.get_property(...)见下文“源码实现”一节或属性名精确等于role即触发诊断。典型非法示例meta charsetUTF-8 rolemeta /html aria-requiredtrue /运行 Rome 后输出如下形式的诊断信息以第一条为例nursery/noAriaUnsupportedElements.js:1:1 lint/nursery/noAriaUnsupportedElements ━━━━━━━━━━━━━━ ✖ Avoid the role attribute and aria-* attributes when using meta, html, script, and style elements. 1 │ meta charsetUTF-8 rolemeta / │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ℹ Using role on elements that do not support them can cause issues with screen readers.诊断信息包含两部分主消息统一提示“避免在meta、html、script、style元素上使用role与aria-*属性”附注则按实际命中的属性类别区分措辞——命中的是role时提示Using role on elements ...命中aria-*时提示Using aria-* on elements ...对应源码中的AttributeKind枚举见 no_aria_unsupported_elements.rs。Valid不会被报告的代码不带任何role/aria-*属性的合法写法不会产生诊断meta charsetUTF-8 /html/html值得注意的边界是规则只匹配“有效的 ARIA 属性”。因此形如mariatext、parole这类只是恰好包含aria子串、但并非真实 ARIA 属性的名称不会被误报详见下方测试用例。源码实现判定逻辑与依赖的 ARIA 元数据规则主流程规则的完整实现位于 crates/rome_js_analyze/src/aria_analyzers/nursery/no_aria_unsupported_elements.rs其核心run函数逻辑如下通过ctx.query()拿到当前匹配的AnyJsxElement节点规则的Query类型为AriaAnyJsxElement由 aria_services.rs 提供工作阶段为Phases::Syntax读取元素名判断是否属于ARIA_UNSUPPORTED_ELEMENTS常量数组遍历该元素的属性列表node.attributes()对每个JsxAttribute若属性名以aria-开头并且aria_properties.get_property(属性名)能查找到该属性即该属性存在于rome_aria的 ARIA 属性元数据表中则判定为AttributeKind::Aria若属性名恰好为role则判定为AttributeKind::Role只要命中任意一个就返回带属性类别的RuleState供diagnostic阶段生成诊断。ARIA 元数据服务规则对aria-*属性的“有效性”判定并非硬编码而是查询rome_ariacrate 提供的AriaProperties元数据表。AriaServices见 aria_services.rs同时装载AriaRoles与AriaProperties两份元数据并从ServiceBag中按rule_key.rule_name()解析所需服务。这意味着只要某个aria-*属性不在 ARIA 规范元数据中如拼写错误的aria-lable、或纯属巧合包含aria子串的自定义属性规则就不会误报。规则注册与推荐状态规则通过declare_rule!宏声明其中recommended: true表明它属于推荐启用集合no_aria_unsupported_elements.rs并在 nursery.rs 中注册进nursery规则组。对应地rules.rs 中生成了no_aria_unsupported_elements: OptionRuleConfiguration配置字段用于在rome.json中对该规则做细粒度开关。在 rome.json 中配置该规则由于规则位于nursery组默认推荐配置recommended不会自动启用 nursery 组的规则相关配置注释见 rules.rs。若要在项目中启用可在rome.json的linter.rules中显式声明{ linter: { rules: { nursery: { noAriaUnsupportedElements: warn } } } }各取值含义取值行为error将违反该规则提升为错误阻塞通过warn仅输出警告不阻塞off关闭该规则配置对象例如{ level: warn, fix: ... }可进一步控制修复行为从源码看rome_service在 rules.rs 中通过字符串noAriaUnsupportedElements完成配置名到规则对象的映射并支持通过get_rule_configuration读取单条规则配置rules.rs。需要了解更完整的配置语法时可参考仓库内的 rome.json 示例以及 linter 文档关闭单条规则与规则选项的通用说明见 linter 页面 的 “Disable a rule” 与 “Rule options” 章节。测试用例与可验证依据仓库为规则提供了专门的规范测试spec test位于 crates/rome_js_analyze/tests/specs/nursery/noAriaUnsupportedElements/invalid.jsx查看覆盖了全部 4 个禁用元素 ×role/aria-*两种属性类别的组合 meta charsetUTF-8 aria-hiddenfalse / meta charsetUTF-8 rolemeta / html aria-requiredtrue / html rolehtml/html script aria-labelscript/script script rolescript/script style aria-labelledby/style style rolestyle/style /;对应的 invalid.jsx.snap 快照确认8 行代码产生 8 条诊断每条都包含统一主消息与按属性类别区分的附注。valid.jsx查看则验证了放行场景——尤其包括两个关键边界用例 meta charsetUTF-8 / html mariatext/html script/script style parole/style /;其中mariatext与parole这两个“形似但并非” ARIA 的属性名不会触发诊断对应的 valid.jsx.snap 快照确认输出为空。这直接印证了前文所述“仅匹配rome_aria元数据中的真实 ARIA 属性”的实现细节。最佳实践建议直接在 JSX 中省略meta、html、script、style元素本身不具备语义角色删除其上的role与aria-*属性即可修复无需任何替代写法全项目统一启用由于该规则recommended: true建议在rome.json中显式将nursery.noAriaUnsupportedElements设为error或warn在 CI 阶段拦截这类无障碍反模式关注属性拼写规则依赖rome_aria元数据判定aria-*属性有效性拼写错误的属性如aria-lable不会命中本规则——这类问题应由同组的useAriaPropTypes等规则另行覆盖与同组规则协同nursery组还包含noNoninteractiveTabindex、noRedundantRoles、useAriaPropTypes见 nursery.rs与noAriaUnsupportedElements共同构成 Rome 对 ARIA 用法的系统性检查建议一并评估启用。【免费下载链接】toolsUnified developer tools for JavaScript, TypeScript, and the web项目地址: https://gitcode.com/gh_mirrors/to/tools创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考