From 56f033c55660dca6f4738a8fb3266c19043e1501 Mon Sep 17 00:00:00 2001 From: DonIsaac <22823424+DonIsaac@users.noreply.github.com> Date: Tue, 13 Aug 2024 03:31:29 +0000 Subject: [PATCH] refactor(linter): improve diagnostics for several jsx-a11y rules (#4853) --- .../oxc_linter/src/rules/jsx_a11y/alt_text.rs | 8 ++++---- .../aria_activedescendant_has_tabindex.rs | 15 +++++++------- .../src/rules/jsx_a11y/aria_props.rs | 2 ++ .../jsx_a11y/aria_unsupported_elements.rs | 5 ++++- crates/oxc_linter/src/snapshots/alt_text.snap | 20 +++++++++---------- .../aria_activedescendant_has_tabindex.snap | 8 ++++---- .../oxc_linter/src/snapshots/aria_props.snap | 2 ++ 7 files changed, 34 insertions(+), 26 deletions(-) diff --git a/crates/oxc_linter/src/rules/jsx_a11y/alt_text.rs b/crates/oxc_linter/src/rules/jsx_a11y/alt_text.rs index 6d65d68b917a9..984609e9cfac4 100644 --- a/crates/oxc_linter/src/rules/jsx_a11y/alt_text.rs +++ b/crates/oxc_linter/src/rules/jsx_a11y/alt_text.rs @@ -31,14 +31,14 @@ fn missing_alt_value(span0: Span) -> OxcDiagnostic { } fn aria_label_value(span0: Span) -> OxcDiagnostic { - OxcDiagnostic::warn("Missing value for aria-label attribute.") - .with_help("The aria-label attribute must have a value. The alt attribute is preferred over aria-label for images.") + OxcDiagnostic::warn("Missing value for `aria-label` attribute.") + .with_help("Give `aria-label` a meaningful value. Prever the `alt` attribute over `aria-label` for images.") .with_label(span0) } fn aria_labelled_by_value(span0: Span) -> OxcDiagnostic { - OxcDiagnostic::warn("Missing value for aria-labelledby attribute.") - .with_help("The alt attribute is preferred over aria-labelledby for images.") + OxcDiagnostic::warn("Missing value for `aria-labelledby` attribute.") + .with_help("Give `aria-labelledby` an ID to a label element. Prefer the `alt` attribute over `aria-labelledby` for images.") .with_label(span0) } diff --git a/crates/oxc_linter/src/rules/jsx_a11y/aria_activedescendant_has_tabindex.rs b/crates/oxc_linter/src/rules/jsx_a11y/aria_activedescendant_has_tabindex.rs index 0ccaef174e63a..f4e7d011973eb 100644 --- a/crates/oxc_linter/src/rules/jsx_a11y/aria_activedescendant_has_tabindex.rs +++ b/crates/oxc_linter/src/rules/jsx_a11y/aria_activedescendant_has_tabindex.rs @@ -14,12 +14,10 @@ use crate::{ AstNode, }; -fn aria_activedescendant_has_tabindex_diagnostic(span0: Span) -> OxcDiagnostic { - OxcDiagnostic::warn("Enforce elements with aria-activedescendant are tabbable.") - .with_help( - "An element that manages focus with `aria-activedescendant` must have a tabindex.", - ) - .with_label(span0) +fn aria_activedescendant_has_tabindex_diagnostic(span: Span, el_name: &str) -> OxcDiagnostic { + OxcDiagnostic::warn("Elements with `aria-activedescendant` must be tabbable.") + .with_help(format!("Add a `tabindex` attribute to this {el_name}.")) + .with_label(span) } #[derive(Debug, Default, Clone)] @@ -88,7 +86,10 @@ impl Rule for AriaActivedescendantHasTabindex { return; }; - ctx.diagnostic(aria_activedescendant_has_tabindex_diagnostic(identifier.span)); + ctx.diagnostic(aria_activedescendant_has_tabindex_diagnostic( + identifier.span, + identifier.name.as_str(), + )); } } diff --git a/crates/oxc_linter/src/rules/jsx_a11y/aria_props.rs b/crates/oxc_linter/src/rules/jsx_a11y/aria_props.rs index de5256653031f..3c4671eef32be 100644 --- a/crates/oxc_linter/src/rules/jsx_a11y/aria_props.rs +++ b/crates/oxc_linter/src/rules/jsx_a11y/aria_props.rs @@ -13,6 +13,8 @@ fn aria_props_diagnostic(span: Span, prop_name: &str, suggestion: Option<&str>) if let Some(suggestion) = suggestion { err = err.with_help(format!("Did you mean '{suggestion}'?")); + } else { + err = err.with_help("You can find a list of valid ARIA attributes at https://www.w3.org/TR/wai-aria-1.1/#state_prop_def"); } err.with_label(span) diff --git a/crates/oxc_linter/src/rules/jsx_a11y/aria_unsupported_elements.rs b/crates/oxc_linter/src/rules/jsx_a11y/aria_unsupported_elements.rs index 82eb06fac7e5e..267ece6742bdd 100644 --- a/crates/oxc_linter/src/rules/jsx_a11y/aria_unsupported_elements.rs +++ b/crates/oxc_linter/src/rules/jsx_a11y/aria_unsupported_elements.rs @@ -14,7 +14,10 @@ use crate::{ declare_oxc_lint! { /// ### What it does /// - /// Certain reserved DOM elements do not support ARIA roles, states and properties. This is often because they are not visible, for example `meta`, `html`, `script`, `style`. This rule enforces that these DOM elements do not contain the `role` and/or `aria-*` props. + /// Certain reserved DOM elements do not support ARIA roles, states and + /// properties. This is often because they are not visible, for example + /// `meta`, `html`, `script`, `style`. This rule enforces that these DOM + /// elements do not contain the `role` and/or `aria-*` props. /// /// ### Example /// diff --git a/crates/oxc_linter/src/snapshots/alt_text.snap b/crates/oxc_linter/src/snapshots/alt_text.snap index 31b05e5f61c4a..8abd61a0da3b7 100644 --- a/crates/oxc_linter/src/snapshots/alt_text.snap +++ b/crates/oxc_linter/src/snapshots/alt_text.snap @@ -71,40 +71,40 @@ source: crates/oxc_linter/src/tester.rs ╰──── help: Prefer alt="" over presentational role. Native HTML attributes should be preferred for accessibility before resorting to ARIA attributes. - ⚠ eslint-plugin-jsx-a11y(alt-text): Missing value for aria-label attribute. + ⚠ eslint-plugin-jsx-a11y(alt-text): Missing value for `aria-label` attribute. ╭─[alt_text.tsx:1:1] 1 │ · ────────────────────────────── ╰──── - help: The aria-label attribute must have a value. The alt attribute is preferred over aria-label for images. + help: Give `aria-label` a meaningful value. Prever the `alt` attribute over `aria-label` for images. - ⚠ eslint-plugin-jsx-a11y(alt-text): Missing value for aria-labelledby attribute. + ⚠ eslint-plugin-jsx-a11y(alt-text): Missing value for `aria-labelledby` attribute. ╭─[alt_text.tsx:1:1] 1 │ · ─────────────────────────────────── ╰──── - help: The alt attribute is preferred over aria-labelledby for images. + help: Give `aria-labelledby` an ID to a label element. Prefer the `alt` attribute over `aria-labelledby` for images. - ⚠ eslint-plugin-jsx-a11y(alt-text): Missing value for aria-label attribute. + ⚠ eslint-plugin-jsx-a11y(alt-text): Missing value for `aria-label` attribute. ╭─[alt_text.tsx:1:1] 1 │ · ───────────────────── ╰──── - help: The aria-label attribute must have a value. The alt attribute is preferred over aria-label for images. + help: Give `aria-label` a meaningful value. Prever the `alt` attribute over `aria-label` for images. - ⚠ eslint-plugin-jsx-a11y(alt-text): Missing value for aria-labelledby attribute. + ⚠ eslint-plugin-jsx-a11y(alt-text): Missing value for `aria-labelledby` attribute. ╭─[alt_text.tsx:1:1] 1 │ · ────────────────────────── ╰──── - help: The alt attribute is preferred over aria-labelledby for images. + help: Give `aria-labelledby` an ID to a label element. Prefer the `alt` attribute over `aria-labelledby` for images. - ⚠ eslint-plugin-jsx-a11y(alt-text): Missing value for aria-label attribute. + ⚠ eslint-plugin-jsx-a11y(alt-text): Missing value for `aria-label` attribute. ╭─[alt_text.tsx:1:1] 1 │ · ──────────────────────────────────────── ╰──── - help: The aria-label attribute must have a value. The alt attribute is preferred over aria-label for images. + help: Give `aria-label` a meaningful value. Prever the `alt` attribute over `aria-label` for images. ⚠ eslint-plugin-jsx-a11y(alt-text): Missing alternative text. ╭─[alt_text.tsx:1:1] diff --git a/crates/oxc_linter/src/snapshots/aria_activedescendant_has_tabindex.snap b/crates/oxc_linter/src/snapshots/aria_activedescendant_has_tabindex.snap index aa7d119ef95f5..2a2e9f693ee82 100644 --- a/crates/oxc_linter/src/snapshots/aria_activedescendant_has_tabindex.snap +++ b/crates/oxc_linter/src/snapshots/aria_activedescendant_has_tabindex.snap @@ -1,16 +1,16 @@ --- source: crates/oxc_linter/src/tester.rs --- - ⚠ eslint-plugin-jsx-a11y(aria-activedescendant-has-tabindex): Enforce elements with aria-activedescendant are tabbable. + ⚠ eslint-plugin-jsx-a11y(aria-activedescendant-has-tabindex): Elements with `aria-activedescendant` must be tabbable. ╭─[aria_activedescendant_has_tabindex.tsx:1:2] 1 │
; · ─── ╰──── - help: An element that manages focus with `aria-activedescendant` must have a tabindex. + help: Add a `tabindex` attribute to this div. - ⚠ eslint-plugin-jsx-a11y(aria-activedescendant-has-tabindex): Enforce elements with aria-activedescendant are tabbable. + ⚠ eslint-plugin-jsx-a11y(aria-activedescendant-has-tabindex): Elements with `aria-activedescendant` must be tabbable. ╭─[aria_activedescendant_has_tabindex.tsx:1:2] 1 │ ; · ─────────────── ╰──── - help: An element that manages focus with `aria-activedescendant` must have a tabindex. + help: Add a `tabindex` attribute to this CustomComponent. diff --git a/crates/oxc_linter/src/snapshots/aria_props.snap b/crates/oxc_linter/src/snapshots/aria_props.snap index 296fd390fe353..2b7a97035c20f 100644 --- a/crates/oxc_linter/src/snapshots/aria_props.snap +++ b/crates/oxc_linter/src/snapshots/aria_props.snap @@ -6,6 +6,7 @@ source: crates/oxc_linter/src/tester.rs 1 │
· ────────────── ╰──── + help: You can find a list of valid ARIA attributes at https://www.w3.org/TR/wai-aria-1.1/#state_prop_def ⚠ eslint-plugin-jsx-a11y(aria-props): 'aria-labeledby' is not a valid ARIA attribute. ╭─[aria_props.tsx:1:6] @@ -19,3 +20,4 @@ source: crates/oxc_linter/src/tester.rs 1 │
· ─────────────────────────────── ╰──── + help: You can find a list of valid ARIA attributes at https://www.w3.org/TR/wai-aria-1.1/#state_prop_def