From 4442b5118feb06904c2b0f5fb1b45dd095e51238 Mon Sep 17 00:00:00 2001
From: eryue0220 <eryue0220@gmail.com>
Date: Wed, 16 Oct 2024 23:04:30 +0800
Subject: [PATCH] fix(lint/noInteractiveElementToNoninteractiveRole): fix
 <source /> error case (#4300)

Co-authored-by: Emanuele Stoppa <my.burning@gmail.com>
---
 CHANGELOG.md                                          |  1 +
 .../no_interactive_element_to_noninteractive_role.rs  |  2 +-
 .../valid.jsx                                         | 11 +++++++++++
 .../valid.jsx.snap                                    | 11 +++++++++++
 4 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e5903d8a6b8f..d229393bcb84 100644
--- a/CHANGELOG.md
+++ b/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
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
index d20f08d48b4b..80c40dd70fb9 100644
--- 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
@@ -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;
                 }
diff --git a/crates/biome_js_analyze/tests/specs/a11y/noInteractiveElementToNoninteractiveRole/valid.jsx b/crates/biome_js_analyze/tests/specs/a11y/noInteractiveElementToNoninteractiveRole/valid.jsx
index 5dd44d80f188..0cea6685e138 100644
--- a/crates/biome_js_analyze/tests/specs/a11y/noInteractiveElementToNoninteractiveRole/valid.jsx
+++ b/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>
 
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
index 020483682fba..671434ecb4f3 100644
--- a/crates/biome_js_analyze/tests/specs/a11y/noInteractiveElementToNoninteractiveRole/valid.jsx.snap
+++ b/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>
 
 
 ```