dan/oxc
1
0
Fork 0
mirror of https://github.com/danbulant/oxc synced 2026-05-19 12:19:15 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

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

Browse source
This commit is contained in:
DonIsaac 2024-08-13 03:31:29 +00:00
parent a6195a6a77
commit 56f033c556
7 changed files with 34 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
crates/oxc_linter/src/rules/jsx_a11y/alt_text.rs
View file

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

15
crates/oxc_linter/src/rules/jsx_a11y/aria_activedescendant_has_tabindex.rs
View file

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

2
crates/oxc_linter/src/rules/jsx_a11y/aria_props.rs
View file

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

5
crates/oxc_linter/src/rules/jsx_a11y/aria_unsupported_elements.rs
View file

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

20
crates/oxc_linter/src/snapshots/alt_text.snap
View file

@ -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]

8
crates/oxc_linter/src/snapshots/aria_activedescendant_has_tabindex.snap
View file

@ -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.

2
crates/oxc_linter/src/snapshots/aria_props.snap
View file

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