fix(lint): ignore custom elements in noInteractiveElementToNoninteractiveRole (#10766)

JamBalaya56562 · web-flow · commit 7aff4c119005 · 2026-07-01T08:32:35.000+01:00
diff --git a/.changeset/fix-no-interactive-role-custom-element.md b/.changeset/fix-no-interactive-role-custom-element.md
@@ -0,0 +1,5 @@
+---
+"@biomejs/biome": patch
+---
+
+Fixed [#2862](https://github.com/biomejs/biome/issues/2862): [`noInteractiveElementToNoninteractiveRole`](https://biomejs.dev/linter/rules/no-interactive-element-to-noninteractive-role/) no longer reports custom elements (a tag name containing a dash, e.g. `<my-button role="img" />`). Per the [W3C HTML-ARIA specification](https://www.w3.org/TR/html-aria/#el-autonomous-custom-element), a custom element may be given any role or none.
diff --git a/crates/biome_js_analyze/src/lint/a11y/no_interactive_element_to_noninteractive_role.rs b/crates/biome_js_analyze/src/lint/a11y/no_interactive_element_to_noninteractive_role.rs
@@ -38,6 +38,14 @@ declare_lint_rule! {
     /// <canvas role="img" />;
     /// ```
     ///
+    /// Custom elements (a tag name containing a dash) may be given any role or none:
+    ///
+    /// ```jsx
+    /// <>
+    ///     <my-button role="img" />
+    /// </>;
+    /// ```
+    ///
     pub NoInteractiveElementToNoninteractiveRole {
         version: "1.3.0",
         name: "noInteractiveElementToNoninteractiveRole",
@@ -60,6 +68,11 @@ impl Rule for NoInteractiveElementToNoninteractiveRole {
         if !node.is_element() {
             return None;
         }
+
+        if node.is_custom_element() {
+            return None;
+        }
+
         let role_attribute = node.find_attribute_by_name("role")?;
         let role_attribute_static_value = role_attribute.as_static_value()?;
         let role_attribute_value = role_attribute_static_value.text();
diff --git a/crates/biome_js_analyze/tests/specs/a11y/noInteractiveElementToNoninteractiveRole/valid.jsx b/crates/biome_js_analyze/tests/specs/a11y/noInteractiveElementToNoninteractiveRole/valid.jsx
@@ -276,4 +276,10 @@
     src={'/assets/head.png'}
     alt='An ASCII-style headshot'
   />
-</picture>
+</picture>;
+/* Custom elements can have any role or none (https://www.w3.org/TR/html-aria/#el-autonomous-custom-element) */
+<>
+	<my-button role="img" />
+	<my-element role="listitem" />
+	<custom-card role="button" />
+</>;
diff --git a/crates/biome_js_analyze/tests/specs/a11y/noInteractiveElementToNoninteractiveRole/valid.jsx.snap b/crates/biome_js_analyze/tests/specs/a11y/noInteractiveElementToNoninteractiveRole/valid.jsx.snap
@@ -282,6 +282,12 @@ expression: valid.jsx
     src={'/assets/head.png'}
     alt='An ASCII-style headshot'
   />
-</picture>
+</picture>;
+/* Custom elements can have any role or none (https://www.w3.org/TR/html-aria/#el-autonomous-custom-element) */
+<>
+	<my-button role="img" />
+	<my-element role="listitem" />
+	<custom-card role="button" />
+</>;
 
 ```

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"@biomejs/biome": patch
 +---
++
 +Fixed [#2862](https://github.com/biomejs/biome/issues/2862): [`noInteractiveElementToNoninteractiveRole`](https://biomejs.dev/linter/rules/no-interactive-element-to-noninteractive-role/) no longer reports custom elements (a tag name containing a dash, e.g. `<my-button role="img" />`). Per the [W3C HTML-ARIA specification](https://www.w3.org/TR/html-aria/#el-autonomous-custom-element), a custom element may be given any role or none.