fix: let aria-label be valid for useHeadingContent.

CHANGELOG.md

@@ -133,12 +133,14 @@ our [guidelines for writing a good changelog entry](https://github.com/biomejs/b
 
 - Migrating from Prettier or ESLint no longer overwrite the `overrides` field from the configuration ([#3544](https://github.com/biomejs/biome/issues/3544)). Contributed by @Conaclos
 
-- Fix JSX expressions for `noAriaHiddenOnFocusable` ([#3708](https://github.com/biomejs/biome/pull/3708)) . Contributed by @anthonyshew
+- 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 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
 
+- Allow `aria-label` on heading to prevent `useHeadingContent` diagnostic ([#3767](https://github.com/biomejs/biome/pull/3767)). Contributed by @anthonyshew
+
 ### Configuration
 
 - Add support for loading configuration from `.editorconfig` files ([#1724](https://github.com/biomejs/biome/issues/1724)).

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

@@ -21,6 +21,11 @@ declare_lint_rule! {
     /// ```
     ///
     /// ```jsx,expect_diagnostic
+    /// <h1 aria-label="Screen reader content" aria-hidden>invisible content</h1>
+    /// ```
+    ///
+    ///
+    /// ```jsx,expect_diagnostic
     /// <h1></h1>
     /// ```
     ///
@@ -35,6 +40,10 @@ declare_lint_rule! {
     /// ```
     ///
     /// ```jsx
+    /// <h1 aria-label="Screen reader content"><div aria-hidden="true">invisible content</div></h1>
+    /// ```
+    ///
+    /// ```jsx
     /// <h1 dangerouslySetInnerHTML={{ __html: "heading" }} />
     /// ```
     ///
@@ -72,6 +81,11 @@ impl Rule for UseHeadingContent {
                 return Some(());
             }
 
+            // When node has `aria-label` (and doesn't have `aria-hidden`), the label will be read by screen readers
+            if node.has_truthy_attribute("aria-label") {
+                return None;
+            }
+
             if has_valid_heading_content(node) {
                 return None;
             }

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

@@ -9,6 +9,7 @@
 	</h1>
 	<h1 aria-hidden="true">content</h1>
 	<h1 aria-hidden="true" dangerouslySetInnerHTML={{ __html: "heading" }} />
+  <h1 aria-label="Screen reader content" aria-hidden>invisible content</h1>
 	<h1>{undefined}</h1>
 	<h1 children />
 	<h1 children={""} />

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

@@ -1,5 +1,6 @@
 ---
 source: crates/biome_js_analyze/tests/spec_tests.rs
+assertion_line: 86
 expression: invalid.jsx
 ---
 # Input
@@ -15,6 +16,7 @@ expression: invalid.jsx
 	</h1>
 	<h1 aria-hidden="true">content</h1>
 	<h1 aria-hidden="true" dangerouslySetInnerHTML={{ __html: "heading" }} />
+  <h1 aria-label="Screen reader content" aria-hidden>invisible content</h1>
 	<h1>{undefined}</h1>
 	<h1 children />
 	<h1 children={""} />
@@ -109,7 +111,7 @@ invalid.jsx:10:2 lint/a11y/useHeadingContent ━━━━━━━━━━━
   > 10 │ 	<h1 aria-hidden="true">content</h1>
        │ 	^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
     11 │ 	<h1 aria-hidden="true" dangerouslySetInnerHTML={{ __html: "heading" }} />
-    12 │ 	<h1>{undefined}</h1>
+    12 │   <h1 aria-label="Screen reader content" aria-hidden>invisible content</h1>
 
   i All headings on a page should have content that is accessible to screen readers.
 
@@ -125,25 +127,25 @@ invalid.jsx:11:2 lint/a11y/useHeadingContent ━━━━━━━━━━━
     10 │ 	<h1 aria-hidden="true">content</h1>
   > 11 │ 	<h1 aria-hidden="true" dangerouslySetInnerHTML={{ __html: "heading" }} />
        │ 	^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
-    12 │ 	<h1>{undefined}</h1>
-    13 │ 	<h1 children />
+    12 │   <h1 aria-label="Screen reader content" aria-hidden>invisible content</h1>
+    13 │ 	<h1>{undefined}</h1>
 
   i All headings on a page should have content that is accessible to screen readers.
 
 
 ```
 
 ```
-invalid.jsx:12:2 lint/a11y/useHeadingContent ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+invalid.jsx:12:3 lint/a11y/useHeadingContent ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
   ! Provide screen reader accessible content when using heading  elements.
 
     10 │ 	<h1 aria-hidden="true">content</h1>
     11 │ 	<h1 aria-hidden="true" dangerouslySetInnerHTML={{ __html: "heading" }} />
-  > 12 │ 	<h1>{undefined}</h1>
-       │ 	^^^^^^^^^^^^^^^^^^^^
-    13 │ 	<h1 children />
-    14 │ 	<h1 children={""} />
+  > 12 │   <h1 aria-label="Screen reader content" aria-hidden>invisible content</h1>
+       │   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+    13 │ 	<h1>{undefined}</h1>
+    14 │ 	<h1 children />
 
   i All headings on a page should have content that is accessible to screen readers.
 
@@ -156,11 +158,11 @@ invalid.jsx:13:2 lint/a11y/useHeadingContent ━━━━━━━━━━━
   ! Provide screen reader accessible content when using heading  elements.
 
     11 │ 	<h1 aria-hidden="true" dangerouslySetInnerHTML={{ __html: "heading" }} />
-    12 │ 	<h1>{undefined}</h1>
-  > 13 │ 	<h1 children />
-       │ 	^^^^^^^^^^^^^^^
-    14 │ 	<h1 children={""} />
-    15 │ 	<h1 children={null} />
+    12 │   <h1 aria-label="Screen reader content" aria-hidden>invisible content</h1>
+  > 13 │ 	<h1>{undefined}</h1>
+       │ 	^^^^^^^^^^^^^^^^^^^^
+    14 │ 	<h1 children />
+    15 │ 	<h1 children={""} />
 
   i All headings on a page should have content that is accessible to screen readers.
 
@@ -172,12 +174,12 @@ invalid.jsx:14:2 lint/a11y/useHeadingContent ━━━━━━━━━━━
 
   ! Provide screen reader accessible content when using heading  elements.
 
-    12 │ 	<h1>{undefined}</h1>
-    13 │ 	<h1 children />
-  > 14 │ 	<h1 children={""} />
-       │ 	^^^^^^^^^^^^^^^^^^^^
-    15 │ 	<h1 children={null} />
-    16 │ 	<h1 children={undefined} />
+    12 │   <h1 aria-label="Screen reader content" aria-hidden>invisible content</h1>
+    13 │ 	<h1>{undefined}</h1>
+  > 14 │ 	<h1 children />
+       │ 	^^^^^^^^^^^^^^^
+    15 │ 	<h1 children={""} />
+    16 │ 	<h1 children={null} />
 
   i All headings on a page should have content that is accessible to screen readers.
 
@@ -189,12 +191,12 @@ invalid.jsx:15:2 lint/a11y/useHeadingContent ━━━━━━━━━━━
 
   ! Provide screen reader accessible content when using heading  elements.
 
-    13 │ 	<h1 children />
-    14 │ 	<h1 children={""} />
-  > 15 │ 	<h1 children={null} />
-       │ 	^^^^^^^^^^^^^^^^^^^^^^
-    16 │ 	<h1 children={undefined} />
-    17 │ 	<h1 {...props} aria-hidden="true" />
+    13 │ 	<h1>{undefined}</h1>
+    14 │ 	<h1 children />
+  > 15 │ 	<h1 children={""} />
+       │ 	^^^^^^^^^^^^^^^^^^^^
+    16 │ 	<h1 children={null} />
+    17 │ 	<h1 children={undefined} />
 
   i All headings on a page should have content that is accessible to screen readers.
 
@@ -206,12 +208,12 @@ invalid.jsx:16:2 lint/a11y/useHeadingContent ━━━━━━━━━━━
 
   ! Provide screen reader accessible content when using heading  elements.
 
-    14 │ 	<h1 children={""} />
-    15 │ 	<h1 children={null} />
-  > 16 │ 	<h1 children={undefined} />
-       │ 	^^^^^^^^^^^^^^^^^^^^^^^^^^^
-    17 │ 	<h1 {...props} aria-hidden="true" />
-    18 │ </>;
+    14 │ 	<h1 children />
+    15 │ 	<h1 children={""} />
+  > 16 │ 	<h1 children={null} />
+       │ 	^^^^^^^^^^^^^^^^^^^^^^
+    17 │ 	<h1 children={undefined} />
+    18 │ 	<h1 {...props} aria-hidden="true" />
 
   i All headings on a page should have content that is accessible to screen readers.
 
@@ -223,16 +225,31 @@ invalid.jsx:17:2 lint/a11y/useHeadingContent ━━━━━━━━━━━
 
   ! Provide screen reader accessible content when using heading  elements.
 
-    15 │ 	<h1 children={null} />
-    16 │ 	<h1 children={undefined} />
-  > 17 │ 	<h1 {...props} aria-hidden="true" />
-       │ 	^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
-    18 │ </>;
-    19 │ 
+    15 │ 	<h1 children={""} />
+    16 │ 	<h1 children={null} />
+  > 17 │ 	<h1 children={undefined} />
+       │ 	^^^^^^^^^^^^^^^^^^^^^^^^^^^
+    18 │ 	<h1 {...props} aria-hidden="true" />
+    19 │ </>;
 
   i All headings on a page should have content that is accessible to screen readers.
 
 
 ```
 
+```
+invalid.jsx:18:2 lint/a11y/useHeadingContent ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+  ! Provide screen reader accessible content when using heading  elements.
+
+    16 │ 	<h1 children={null} />
+    17 │ 	<h1 children={undefined} />
+  > 18 │ 	<h1 {...props} aria-hidden="true" />
+       │ 	^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+    19 │ </>;
+    20 │ 
+
+  i All headings on a page should have content that is accessible to screen readers.
+
 
+```

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

@@ -34,6 +34,7 @@
 		<div aria-hidden />
 		visible content
 	</h1>
+  <h1 aria-label="Screen reader content"><div aria-hidden="true">invisible content</div></h1>
 	<h1 dangerouslySetInnerHTML={{ __html: "heading" }}></h1>
 	<h1 children={children} />
 	<h1 children={"heading"} />

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

@@ -1,5 +1,6 @@
 ---
 source: crates/biome_js_analyze/tests/spec_tests.rs
+assertion_line: 86
 expression: valid.jsx
 ---
 # Input
@@ -40,6 +41,7 @@ expression: valid.jsx
 		<div aria-hidden />
 		visible content
 	</h1>
+  <h1 aria-label="Screen reader content"><div aria-hidden="true">invisible content</div></h1>
 	<h1 dangerouslySetInnerHTML={{ __html: "heading" }}></h1>
 	<h1 children={children} />
 	<h1 children={"heading"} />
@@ -55,5 +57,3 @@ expression: valid.jsx
 </>;
 
 ```
-
-