fix(a11y/useAnchorContent): don't flag <a> elements used as render props (#10220)

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

Author: theBGuy

.changeset/thick-shoes-jog.md

@@ -0,0 +1,5 @@
+---
+"@biomejs/biome": patch
+---
+
+Fixed [`useAnchorContent`](https://biomejs.dev/linter/rules/use-anchor-content/) false positive for `<a>` elements used as render prop values (e.g. `render={<a href="..." />}`), a pattern where the receiving component renders its children inside the anchor element.

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

@@ -2,7 +2,12 @@ use biome_analyze::context::RuleContext;
 use biome_analyze::{Ast, FixKind, Rule, RuleDiagnostic, RuleSource, declare_lint_rule};
 use biome_console::markup;
 use biome_diagnostics::Severity;
+use biome_js_syntax::JsxAttribute;
+use biome_js_syntax::JsxAttributeInitializerClause;
+use biome_js_syntax::JsxAttributeList;
 use biome_js_syntax::JsxElement;
+use biome_js_syntax::JsxExpressionAttributeValue;
+use biome_js_syntax::JsSyntaxKind;
 use biome_js_syntax::jsx_ext::AnyJsxElement;
 use biome_rowan::{AstNode, BatchMutationExt};
 use biome_rule_options::use_anchor_content::UseAnchorContentOptions;
@@ -60,6 +65,14 @@ declare_lint_rule! {
     /// <a><div aria-hidden="true"></div>content</a>
     /// ```
     ///
+    /// The following is valid because `<a>` is used as a JSX attribute value on a custom
+    /// component. The rule is suppressed for any such prop on a custom component, as the
+    /// component may render the anchor as a content wrapper whose children supply the link text.
+    ///
+    /// ```jsx
+    /// <Button render={<a href="/home" aria-label="Home" />}>Home</Button>
+    /// ```
+    ///
     /// ## Accessibility guidelines
     ///
     /// - [WCAG 2.4.4](https://www.w3.org/WAI/WCAG21/Understanding/link-purpose-in-context)
@@ -95,6 +108,10 @@ impl Rule for UseAnchorContent {
                 return None;
             }
 
+            if is_jsx_attribute_anchor(node) {
+                return None;
+            }
+
             match node {
                 AnyJsxElement::JsxOpeningElement(opening_element) => {
                     if !opening_element.has_accessible_child() {
@@ -173,3 +190,42 @@ fn has_valid_anchor_content(node: &AnyJsxElement) -> bool {
             })
         || node.has_spread_prop()
 }
+
+/// Returns true when the `<a>` element is the value of a JSX attribute on a custom component.
+///
+/// A custom component may use the anchor as a content wrapper, injecting its own children into
+/// it, so the final DOM can contain both the anchor's attributes and visible text — making the
+/// lint check a false positive.
+///
+/// Handles self-closing (`<a />`), open/close (`<a></a>`), and parenthesized
+/// (`render={(<a />)}`) forms. Native HTML elements are not exempted.
+fn is_jsx_attribute_anchor(node: &AnyJsxElement) -> bool {
+    for ancestor in node.syntax().ancestors().skip(1) {
+        if let Some(attr_value) = JsxExpressionAttributeValue::cast(ancestor.clone()) {
+            return is_component_attribute(&attr_value).unwrap_or(false);
+        }
+        match ancestor.kind() {
+            // Walk up through transparent wrapper nodes:
+            // - JsxElement wraps JsxOpeningElement
+            // - JsxTagExpression wraps JSX elements used as JS expressions
+            // - JsParenthesizedExpression for render={(<a />)}
+            JsSyntaxKind::JSX_ELEMENT
+            | JsSyntaxKind::JSX_TAG_EXPRESSION
+            | JsSyntaxKind::JS_PARENTHESIZED_EXPRESSION => {}
+            _ => return false,
+        }
+    }
+    false
+}
+
+/// Returns `Some(true)` when `attr_value` is an attribute of a custom JSX component (i.e. an
+/// uppercase or member-expression name), `Some(false)` for native HTML elements, and `None`
+/// when the surrounding tree is malformed.
+fn is_component_attribute(attr_value: &JsxExpressionAttributeValue) -> Option<bool> {
+    let initializer = JsxAttributeInitializerClause::cast(attr_value.syntax().parent()?)?;
+    let attribute = JsxAttribute::cast(initializer.syntax().parent()?)?;
+    let element = attribute
+        .parent::<JsxAttributeList>()
+        .and_then(|list| list.parent::<AnyJsxElement>())?;
+    Some(element.is_custom_component())
+}

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

@@ -11,4 +11,5 @@
 	<a><span aria-hidden={"true"}>content</span></a>
 	<a><span aria-hidden={`true`}>content</span></a>
 	<a><span aria-hidden={`${true}`}>content</span></a>
+	<my-button render={<a />} />
 </>

crates/biome_js_analyze/tests/specs/a11y/useAnchorContent/invalid.jsx.snap

@@ -17,6 +17,7 @@ expression: invalid.jsx
 	<a><span aria-hidden={"true"}>content</span></a>
 	<a><span aria-hidden={`true`}>content</span></a>
 	<a><span aria-hidden={`${true}`}>content</span></a>
+	<my-button render={<a />} />
 </>
 
 ```
@@ -243,7 +244,7 @@ invalid.jsx:12:2 lint/a11y/useAnchorContent ━━━━━━━━━━━━
   > 12 │ 	<a><span aria-hidden={`true`}>content</span></a>
        │ 	^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
     13 │ 	<a><span aria-hidden={`${true}`}>content</span></a>
-    14 │ </>
+    14 │ 	<my-button render={<a />} />
   
   i All links on a page should have content that is accessible to screen readers.
   
@@ -265,8 +266,31 @@ invalid.jsx:13:2 lint/a11y/useAnchorContent ━━━━━━━━━━━━
     12 │ 	<a><span aria-hidden={`true`}>content</span></a>
   > 13 │ 	<a><span aria-hidden={`${true}`}>content</span></a>
        │ 	^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
-    14 │ </>
-    15 │ 
+    14 │ 	<my-button render={<a />} />
+    15 │ </>
+  
+  i All links on a page should have content that is accessible to screen readers.
+  
+  i Accessible content refers to digital content that is designed and structured in a way that makes it easy for people with disabilities to access, understand, and interact with using assistive technologies.
+  
+  i Follow these links for more information,
+     WCAG 2.4.4
+     WCAG 4.1.2
+  
+
+```
+
+```
+invalid.jsx:14:21 lint/a11y/useAnchorContent ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+  × Provide screen reader accessible content when using `a` elements.
+  
+    12 │ 	<a><span aria-hidden={`true`}>content</span></a>
+    13 │ 	<a><span aria-hidden={`${true}`}>content</span></a>
+  > 14 │ 	<my-button render={<a />} />
+       │ 	                   ^^^^^
+    15 │ </>
+    16 │ 
   
   i All links on a page should have content that is accessible to screen readers.
   

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

@@ -11,4 +11,7 @@
     <a><span aria-hidden="false">content</span></a>
     <a>{content}</a>
     <a children={children} />
+    <Button render={<a href="/home" aria-label="Home" />}>Home</Button>
+    <Button render={<a href="/home" aria-label="Home"></a>}>Home</Button>
+    <Button render={(<a href="/home" aria-label="Home" />)}>Home</Button>
 </>

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

@@ -17,6 +17,9 @@ expression: valid.jsx
     <a><span aria-hidden="false">content</span></a>
     <a>{content}</a>
     <a children={children} />
+    <Button render={<a href="/home" aria-label="Home" />}>Home</Button>
+    <Button render={<a href="/home" aria-label="Home"></a>}>Home</Button>
+    <Button render={(<a href="/home" aria-label="Home" />)}>Home</Button>
 </>
 
 ```