refactor(linter): improve diagnostics for several jsx-a11y rules

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)
 }
 

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(),
+        ));
     }
 }
 

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)

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
     ///

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 │ <img aria-label={undefined} />
    · ──────────────────────────────
    ╰────
-  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 │ <img aria-labelledby={undefined} />
    · ───────────────────────────────────
    ╰────
-  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 │ <img aria-label="" />
    · ─────────────────────
    ╰────
-  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 │ <img aria-labelledby="" />
    · ──────────────────────────
    ╰────
-  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 │ <SomeComponent as="img" aria-label="" />
    · ────────────────────────────────────────
    ╰────
-  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]

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 │ <div aria-activedescendant={someID} />;
    ·  ───
    ╰────
-  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 │ <CustomComponent aria-activedescendant={someID} />;
    ·  ───────────────
    ╰────
-  help: An element that manages focus with `aria-activedescendant` must have a tabindex.
+  help: Add a `tabindex` attribute to this CustomComponent.

crates/oxc_linter/src/snapshots/aria_props.snap

@@ -6,6 +6,7 @@ source: crates/oxc_linter/src/tester.rs
  1 │ <div aria-="foobar" />
    ·      ──────────────
    ╰────
+  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 │ <div aria-skldjfaria-klajsd="foobar" />
    ·      ───────────────────────────────
    ╰────
+  help: You can find a list of valid ARIA attributes at https://www.w3.org/TR/wai-aria-1.1/#state_prop_def