fix(lint): useSemanticElements self-closing elements (#7044)

Author: ematipico

.changeset/floppy-dragons-yell.md

@@ -0,0 +1,5 @@
+---
+"@biomejs/biome": patch
+---
+
+Fixed [#6622](https://github.com/biomejs/biome/issues/6622), now the rule `useSemanticElements` works for JSX self-closing elements too.

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

@@ -5,8 +5,8 @@ use biome_aria_metadata::AriaRole;
 use biome_console::markup;
 use biome_deserialize::TextRange;
 use biome_diagnostics::Severity;
-use biome_js_syntax::{JsxAttribute, JsxOpeningElement};
-use biome_rowan::AstNode;
+use biome_js_syntax::{JsxAttribute, JsxOpeningElement, JsxSelfClosingElement};
+use biome_rowan::{AstNode, declare_node_union};
 use biome_rule_options::use_semantic_elements::UseSemanticElementsOptions;
 
 declare_lint_rule! {
@@ -27,6 +27,14 @@ declare_lint_rule! {
     /// <div role="separator"></div>
     /// ```
     ///
+    /// ```jsx,expect_diagnostic
+    /// <div role="checkbox" />
+    /// ```
+    ///
+    /// ```jsx,expect_diagnostic
+    /// <div role="separator" />
+    /// ```
+    ///
     /// ### Valid
     ///
     /// ```jsx
@@ -53,15 +61,24 @@ declare_lint_rule! {
     }
 }
 
+declare_node_union! {
+    pub AnyOpeningElement = JsxOpeningElement | JsxSelfClosingElement
+}
+
 impl Rule for UseSemanticElements {
-    type Query = Ast<JsxOpeningElement>;
+    type Query = Ast<AnyOpeningElement>;
     type State = JsxAttribute;
     type Signals = Option<Self::State>;
     type Options = UseSemanticElementsOptions;
 
     fn run(ctx: &RuleContext<Self>) -> Self::Signals {
         let node = ctx.query();
-        let role_attribute = node.find_attribute_by_name("role")?;
+        let role_attribute = match node {
+            AnyOpeningElement::JsxOpeningElement(node) => node.find_attribute_by_name("role")?,
+            AnyOpeningElement::JsxSelfClosingElement(node) => {
+                node.find_attribute_by_name("role")?
+            }
+        };
         let role_value = role_attribute.as_static_value()?;
         let role_value = role_value.as_string_constant()?;
 

crates/biome_js_analyze/tests/specs/a11y/useSemanticElements/invalid.jsx

@@ -1,3 +1,4 @@
+// should generate diagnostics
 <>
     <div role="checkbox" ></div>
     <div role="radio" ></div>