fix: edge case in noInteractiveToNonInteractiveRole for <canvas>. (…

…#3728)
biomejs · Aug 28, 2024 · 102ceeb · 102ceeb
1 parent 2d590ea
commit 102ceeb
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 2 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -131,6 +131,8 @@ our [guidelines for writing a good changelog entry](https://github.com/biomejs/b
 
 - Fix JSX expressions for `noAriaHiddenOnFocusable` ([#3708](https://github.com/biomejs/biome/pull/3708)) . Contributed by @anthonyshew
 
+- Fix edge case for `<canvas>` elements that use `role="img"` ([#3728](https://github.com/biomejs/biome/pull/3728)) . Contributed by @anthonyshew
+
 - Fix [#3633](https://github.com/biomejs/biome/issues/3633), where diagnostics where incorrectly printed if the code has errors. Contributed by @ematipico
 
 ### Configuration

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
@@ -32,6 +32,10 @@ declare_lint_rule! {
     /// <input role="button" />;
     /// ```
     ///
+    /// ```jsx
+    /// <canvas role="img" />;
+    /// ```
+    ///
     pub NoInteractiveElementToNoninteractiveRole {
         version: "1.3.0",
         name: "noInteractiveElementToNoninteractiveRole",
@@ -69,6 +73,11 @@ impl Rule for NoInteractiveElementToNoninteractiveRole {
                     return None;
                 }
 
+                // A <canvas> element can be given an "img" to make it non-interactive for a11y reasons.
+                if element_name.text_trimmed() == "canvas" && role_attribute_value == "img" {
+                    return None;
+                }
+
                 // a tag without href is considered non-interactive
                 if element_name.text_trimmed() == "a"
                     && node.find_attribute_by_name("href").is_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
@@ -55,6 +55,7 @@
 <body role="button" />;
 <br role="button" />;
 <canvas role="button" />;
+<canvas role="img" />;
 <caption role="button" />;
 <center role="button" />;
 <cite role="button" />;

diff --git a/...biome_js_analyze/tests/specs/a11y/noInteractiveElementToNoninteractiveRole/valid.jsx.snap b/...biome_js_analyze/tests/specs/a11y/noInteractiveElementToNoninteractiveRole/valid.jsx.snap
@@ -1,5 +1,6 @@
 ---
 source: crates/biome_js_analyze/tests/spec_tests.rs
+assertion_line: 86
 expression: valid.jsx
 ---
 # Input
@@ -61,6 +62,7 @@ expression: valid.jsx
 <body role="button" />;
 <br role="button" />;
 <canvas role="button" />;
+<canvas role="img" />;
 <caption role="button" />;
 <center role="button" />;
 <cite role="button" />;
@@ -272,5 +274,3 @@ expression: valid.jsx
 
 
 ```
-
-