refactor(lint): a11y utils to reduce duplicate function definitions (#5405)

Author: unvalley

crates/biome_aria/src/roles.rs

@@ -270,4 +270,18 @@ impl AriaRoles {
             },
         }
     }
+
+    /// Check if the element's implicit ARIA semantics have been removed.
+    ///
+    /// Ref:
+    /// - https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/presentation_role
+    /// - https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/v6.10.0/src/util/isPresentationRole.js
+    pub fn is_presentation_role(&self, element: &impl Element) -> bool {
+        if let Some(attribute) = element.find_attribute_by_name(|n| n == "role") {
+            if let Some(value) = attribute.value() {
+                return matches!(value.as_ref(), "presentation" | "none");
+            }
+        }
+        false
+    }
 }

crates/biome_js_analyze/src/a11y.rs

@@ -0,0 +1,39 @@
+use biome_js_syntax::jsx_ext::AnyJsxElement;
+
+/// Check the element is hidden from screen reader.
+///
+/// Ref:
+/// - https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-hidden
+/// - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/hidden
+/// - https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/v6.10.0/src/util/isHiddenFromScreenReader.js
+pub(crate) fn is_hidden_from_screen_reader(element: &AnyJsxElement) -> bool {
+    let is_aria_hidden = element.has_truthy_attribute("aria-hidden");
+    if is_aria_hidden {
+        return true;
+    }
+
+    match element.name_value_token().ok() {
+        Some(name) if name.text_trimmed() == "input" => {
+            let is_input_hidden = element
+                .find_attribute_by_name("type")
+                .and_then(|attribute| attribute.as_static_value())
+                .and_then(|value| value.as_string_constant().map(|value| value == "hidden"))
+                .unwrap_or_default();
+            is_input_hidden
+        }
+        _ => false,
+    }
+}
+
+/// Check if the element is `contentEditable`
+///
+/// Ref:
+/// - https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/contenteditable
+/// - https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/v6.10.0/src/util/isContentEditable.js
+pub(crate) fn is_content_editable(element: &AnyJsxElement) -> bool {
+    element
+        .find_attribute_by_name("contentEditable")
+        .and_then(|attribute| attribute.as_static_value())
+        .and_then(|value| value.as_string_constant().map(|value| value == "true"))
+        .unwrap_or_default()
+}

crates/biome_js_analyze/src/lib.rs

@@ -16,6 +16,7 @@ use biome_suppression::{SuppressionDiagnostic, parse_suppression_comment};
 use std::ops::Deref;
 use std::sync::{Arc, LazyLock};
 
+mod a11y;
 pub mod assist;
 mod ast_utils;
 pub mod globals;

crates/biome_js_analyze/src/lint/nursery/no_noninteractive_element_interactions.rs

@@ -1,4 +1,7 @@
-use crate::services::aria::Aria;
+use crate::{
+    a11y::{is_content_editable, is_hidden_from_screen_reader},
+    services::aria::Aria,
+};
 use biome_analyze::{Rule, RuleDiagnostic, RuleSource, context::RuleContext, declare_lint_rule};
 use biome_console::markup;
 use biome_js_syntax::jsx_ext::AnyJsxElement;
@@ -96,8 +99,8 @@ impl Rule for NoNoninteractiveElementInteractions {
 
         if !has_handler_props(element)
             || is_content_editable(element)
-            || has_presentation_role(element)
-            || is_hidden_from_screen_reader(element)?
+            || aria_roles.is_presentation_role(element)
+            || is_hidden_from_screen_reader(element)
             || has_interactive_role
         {
             return None;
@@ -163,53 +166,3 @@ fn has_handler_props(element: &AnyJsxElement) -> bool {
         .iter()
         .any(|handler| element.find_attribute_by_name(handler).is_some())
 }
-
-/// Check if the element's implicit ARIA semantics have been removed.
-/// See https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/presentation_role
-///
-/// Ref: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/v6.10.0/src/util/isPresentationRole.js
-fn has_presentation_role(element: &AnyJsxElement) -> bool {
-    if let Some(attribute) = element.find_attribute_by_name("role") {
-        let value = attribute.as_static_value();
-        if let Some(value) = value {
-            return matches!(value.as_string_constant(), Some("presentation" | "none"));
-        }
-    }
-    false
-}
-
-/// Check the element is hidden from screen reader.
-/// See
-/// - https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-hidden
-/// - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/hidden
-///
-/// Ref: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/v6.10.0/src/util/isHiddenFromScreenReader.js
-fn is_hidden_from_screen_reader(element_name: &AnyJsxElement) -> Option<bool> {
-    let is_aria_hidden = element_name.has_truthy_attribute("aria-hidden");
-
-    let name = element_name.name_value_token().ok()?;
-
-    let is_input_hidden = if name.text_trimmed() == "input" {
-        element_name
-            .find_attribute_by_name("type")
-            .and_then(|attribute| attribute.as_static_value())
-            .and_then(|value| value.as_string_constant().map(|value| value == "hidden"))
-            .unwrap_or_default()
-    } else {
-        false
-    };
-
-    Some(is_aria_hidden || is_input_hidden)
-}
-
-/// Check if the element is `contentEditable`
-/// See https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/contenteditable
-///
-/// Ref: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/v6.10.0/src/util/isContentEditable.js
-fn is_content_editable(element: &AnyJsxElement) -> bool {
-    element
-        .find_attribute_by_name("contentEditable")
-        .and_then(|attribute| attribute.as_static_value())
-        .and_then(|value| value.as_string_constant().map(|value| value == "true"))
-        .unwrap_or_default()
-}

crates/biome_js_analyze/src/lint/nursery/no_static_element_interactions.rs

@@ -1,3 +1,4 @@
+use crate::a11y::is_hidden_from_screen_reader;
 use crate::services::aria::Aria;
 use biome_analyze::context::RuleContext;
 use biome_analyze::{Rule, RuleDiagnostic, RuleSource, declare_lint_rule};
@@ -42,6 +43,11 @@ declare_lint_rule! {
     /// </>
     /// ```
     ///
+    /// Custom components are not checked.
+    /// ```jsx
+    /// <TestComponent onClick={doFoo} />
+    /// ```
+    ///
     pub NoStaticElementInteractions {
         version: "1.9.0",
         name: "noStaticElementInteractions",
@@ -91,11 +97,13 @@ impl Rule for NoStaticElementInteractions {
 
     fn run(ctx: &RuleContext<Self>) -> Self::Signals {
         let node = ctx.query();
-        let element_name = node.name().ok()?.as_jsx_name()?.value_token().ok()?;
-        let element_name = element_name.text_trimmed();
 
-        // Check if the element is hidden from screen readers.
-        if is_hidden_from_screen_reader(node, element_name) {
+        // Custom components are not checked because we do not know what DOM will be used.
+        if node.is_custom_component() {
+            return None;
+        }
+
+        if is_hidden_from_screen_reader(node) {
             return None;
         }
 
@@ -140,24 +148,3 @@ impl Rule for NoStaticElementInteractions {
         ))
     }
 }
-
-/**
- * Returns boolean indicating that the aria-hidden prop
- * is present or the value is true. Will also return true if
- * there is an input with type='hidden'.
- *
- * <div aria-hidden /> is equivalent to the DOM as <div aria-hidden=true />.
- * ref: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/src/util/isHiddenFromScreenReader.js
- */
-fn is_hidden_from_screen_reader(node: &AnyJsxElement, element_name: &str) -> bool {
-    node.find_attribute_by_name("aria-hidden")
-        .is_some_and(|attr| {
-            attr.as_static_value()
-                .is_none_or(|val| val.text() == "true")
-        })// <div aria-hidden />
-        || (element_name == "input"
-            && node.find_attribute_by_name("type").is_some_and(|attr| {
-                attr.as_static_value()
-                    .is_some_and(|val| val.text() == "hidden")
-            })) // <input type="hidden" />
-}