fix(useHeadingContent): ignore when aria-label is set (#3767)

CHANGELOG.md

@@ -133,12 +133,14 @@ our [guidelines for writing a good changelog entry](https:/biomejs/b
 
 - Migrating from Prettier or ESLint no longer overwrite the `overrides` field from the configuration ([#3544](https:/biomejs/biome/issues/3544)). Contributed by @Conaclos
 
-- Fix JSX expressions for `noAriaHiddenOnFocusable` ([#3708](https:/biomejs/biome/pull/3708)) . Contributed by @anthonyshew
+- Fix JSX expressions for `noAriaHiddenOnFocusable` ([#3708](https:/biomejs/biome/pull/3708)). Contributed by @anthonyshew
 
-- Fix edge case for `<canvas>` elements that use `role="img"` ([#3728](https:/biomejs/biome/pull/3728)) . Contributed by @anthonyshew
+- Fix edge case for `<canvas>` elements that use `role="img"` ([#3728](https:/biomejs/biome/pull/3728)). Contributed by @anthonyshew
 
 - Fix [#3633](https:/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:/biomejs/biome/pull/3767)). Contributed by @anthonyshew
+
 ### Configuration
 
 - Add support for loading configuration from `.editorconfig` files ([#1724](https:/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
 </>;
 
 ```
-
-