fix(lint/noInteractiveElementToNoninteractiveRole): fix <source /> er…

…ror case (#4300)

Co-authored-by: Emanuele Stoppa <my.burning@gmail.com>

CHANGELOG.md

@@ -17,6 +17,7 @@ our [guidelines for writing a good changelog entry](https://github.com/biomejs/b
 
 - Improved the message for unused suppression comments. Contributed by @dyc3
 
+- Fix [#4228](https://github.com/biomejs/biome/issues/4228), where the rule `a11y/noInteractiveElementToNoninteractiveRole` incorrectlly reports a `role` for non interactive elements. Contributed by @eryue0220
 - Catch suspicious semicolon in react fragment in `noSuspiciousSemicolonInJsx`. Contributed by @vasucp1207
 
 ### CLI

crates/biome_js_analyze/src/lint/a11y/no_interactive_element_to_noninteractive_role.rs

@@ -68,7 +68,7 @@ impl Rule for NoInteractiveElementToNoninteractiveRole {
             {
                 // <div> and <span> are considered neither interactive nor non-interactive, depending on the presence or absence of the role attribute.
                 // We don't report <div> and <span> here, because we cannot determine whether they are interactive or non-interactive.
-                let role_sensitive_elements = ["div", "span"];
+                let role_sensitive_elements = ["div", "span", "source"];
                 if role_sensitive_elements.contains(&element_name.text_trimmed()) {
                     return None;
                 }

crates/biome_js_analyze/tests/specs/a11y/noInteractiveElementToNoninteractiveRole/valid.jsx

@@ -264,4 +264,15 @@
 <Link href="http://x.y.z" role="img" />;
 <Link href="http://x.y.z" />;
 <Button onClick={doFoo} />;
+<picture>
+  <source
+    srcSet={'/assets/head.webp'}
+    role='img'
+    type='image/webp'
+  />
+  <img
+    src={'/assets/head.png'}
+    alt='An ASCII-style headshot'
+  />
+</picture>
 

crates/biome_js_analyze/tests/specs/a11y/noInteractiveElementToNoninteractiveRole/valid.jsx.snap

@@ -271,6 +271,17 @@ expression: valid.jsx
 <Link href="http://x.y.z" role="img" />;
 <Link href="http://x.y.z" />;
 <Button onClick={doFoo} />;
+<picture>
+  <source
+    srcSet={'/assets/head.webp'}
+    role='img'
+    type='image/webp'
+  />
+  <img
+    src={'/assets/head.png'}
+    alt='An ASCII-style headshot'
+  />
+</picture>
 
 
 ```