From e1e6de758b76416ec620f1807fc95d7e7ecea6ef Mon Sep 17 00:00:00 2001 From: Anthony Shew Date: Wed, 4 Sep 2024 03:02:58 -0600 Subject: [PATCH] fix(useHeadingContent): ignore when `aria-label` is set (#3767) --- CHANGELOG.md | 6 +- .../src/lint/a11y/use_heading_content.rs | 14 +++ .../specs/a11y/useHeadingContent/invalid.jsx | 1 + .../a11y/useHeadingContent/invalid.jsx.snap | 91 +++++++++++-------- .../specs/a11y/useHeadingContent/valid.jsx | 1 + .../a11y/useHeadingContent/valid.jsx.snap | 4 +- 6 files changed, 76 insertions(+), 41 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 22fe5da856d7..1cf1a8b97fcc 100644 --- a/CHANGELOG.md +++ b/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 `` elements that use `role="img"` ([#3728](https://github.com/biomejs/biome/pull/3728)) . Contributed by @anthonyshew +- Fix edge case for `` 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)). diff --git a/crates/biome_js_analyze/src/lint/a11y/use_heading_content.rs b/crates/biome_js_analyze/src/lint/a11y/use_heading_content.rs index 96543c7a59d2..b7b87ac17b24 100644 --- a/crates/biome_js_analyze/src/lint/a11y/use_heading_content.rs +++ b/crates/biome_js_analyze/src/lint/a11y/use_heading_content.rs @@ -21,6 +21,11 @@ declare_lint_rule! { /// ``` /// /// ```jsx,expect_diagnostic + ///

invisible content

+ /// ``` + /// + /// + /// ```jsx,expect_diagnostic ///

/// ``` /// @@ -35,6 +40,10 @@ declare_lint_rule! { /// ``` /// /// ```jsx + ///

+ /// ``` + /// + /// ```jsx ///

/// ``` /// @@ -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; } diff --git a/crates/biome_js_analyze/tests/specs/a11y/useHeadingContent/invalid.jsx b/crates/biome_js_analyze/tests/specs/a11y/useHeadingContent/invalid.jsx index 932f08a07b47..9d3f4bda023d 100644 --- a/crates/biome_js_analyze/tests/specs/a11y/useHeadingContent/invalid.jsx +++ b/crates/biome_js_analyze/tests/specs/a11y/useHeadingContent/invalid.jsx @@ -9,6 +9,7 @@

content

+

invisible content

{undefined}

diff --git a/crates/biome_js_analyze/tests/specs/a11y/useHeadingContent/invalid.jsx.snap b/crates/biome_js_analyze/tests/specs/a11y/useHeadingContent/invalid.jsx.snap index 82478270f7b2..387891e95349 100644 --- a/crates/biome_js_analyze/tests/specs/a11y/useHeadingContent/invalid.jsx.snap +++ b/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

content

+

invisible content

{undefined}

@@ -109,7 +111,7 @@ invalid.jsx:10:2 lint/a11y/useHeadingContent ━━━━━━━━━━━ > 10 │

content

│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 11 │

- 12 │

{undefined}

+ 12 │

invisible content

i All headings on a page should have content that is accessible to screen readers. @@ -125,8 +127,8 @@ invalid.jsx:11:2 lint/a11y/useHeadingContent ━━━━━━━━━━━ 10 │

content

> 11 │

│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ - 12 │

{undefined}

- 13 │

+ 12 │

invisible content

+ 13 │

{undefined}

i All headings on a page should have content that is accessible to screen readers. @@ -134,16 +136,16 @@ invalid.jsx:11:2 lint/a11y/useHeadingContent ━━━━━━━━━━━ ``` ``` -invalid.jsx:12:2 lint/a11y/useHeadingContent ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ +invalid.jsx:12:3 lint/a11y/useHeadingContent ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ! Provide screen reader accessible content when using heading elements. 10 │

content

11 │

- > 12 │

{undefined}

- │ ^^^^^^^^^^^^^^^^^^^^ - 13 │

- 14 │

+ > 12 │

invisible content

+ │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + 13 │

{undefined}

+ 14 │

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 │

- 12 │

{undefined}

- > 13 │

- │ ^^^^^^^^^^^^^^^ - 14 │

- 15 │

+ 12 │

invisible content

+ > 13 │

{undefined}

+ │ ^^^^^^^^^^^^^^^^^^^^ + 14 │

+ 15 │

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 │

{undefined}

- 13 │

- > 14 │

- │ ^^^^^^^^^^^^^^^^^^^^ - 15 │

- 16 │

+ 12 │

invisible content

+ 13 │

{undefined}

+ > 14 │

+ │ ^^^^^^^^^^^^^^^ + 15 │

+ 16 │

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 │

- 14 │

- > 15 │

- │ ^^^^^^^^^^^^^^^^^^^^^^ - 16 │

- 17 │

+ 13 │

{undefined}

+ 14 │

+ > 15 │

+ │ ^^^^^^^^^^^^^^^^^^^^ + 16 │

+ 17 │

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 │

- 15 │

- > 16 │

- │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^ - 17 │

- 18 │ ; + 14 │

+ 15 │

+ > 16 │

+ │ ^^^^^^^^^^^^^^^^^^^^^^ + 17 │

+ 18 │

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 │

- 16 │

- > 17 │

- │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ - 18 │ ; - 19 │ + 15 │

+ 16 │

+ > 17 │

+ │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^ + 18 │

+ 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 │

+ 17 │

+ > 18 │

+ │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + 19 │ ; + 20 │ + + i All headings on a page should have content that is accessible to screen readers. + +``` diff --git a/crates/biome_js_analyze/tests/specs/a11y/useHeadingContent/valid.jsx b/crates/biome_js_analyze/tests/specs/a11y/useHeadingContent/valid.jsx index 526b1497d6bd..66807574b7ef 100644 --- a/crates/biome_js_analyze/tests/specs/a11y/useHeadingContent/valid.jsx +++ b/crates/biome_js_analyze/tests/specs/a11y/useHeadingContent/valid.jsx @@ -34,6 +34,7 @@
visible content

+

diff --git a/crates/biome_js_analyze/tests/specs/a11y/useHeadingContent/valid.jsx.snap b/crates/biome_js_analyze/tests/specs/a11y/useHeadingContent/valid.jsx.snap index ef1026395389..45c3e4faaa5a 100644 --- a/crates/biome_js_analyze/tests/specs/a11y/useHeadingContent/valid.jsx.snap +++ b/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
visible content

+

@@ -55,5 +57,3 @@ expression: valid.jsx ; ``` - -