diff --git a/crates/oxc_linter/src/rules/jsx_a11y/img_redundant_alt.rs b/crates/oxc_linter/src/rules/jsx_a11y/img_redundant_alt.rs index e86edc55d032e..44dfe80597c8f 100644 --- a/crates/oxc_linter/src/rules/jsx_a11y/img_redundant_alt.rs +++ b/crates/oxc_linter/src/rules/jsx_a11y/img_redundant_alt.rs @@ -20,9 +20,10 @@ use crate::{ }, }; +// TODO: Update this diagnostic message to actually include the custom words from the config. fn img_redundant_alt_diagnostic(span: Span) -> OxcDiagnostic { OxcDiagnostic::warn("Redundant `alt` attribute.") - .with_help("Provide no redundant alt text for image. Screen-readers already announce `img` tags as an image. You don't need to use the words `image`, `photo,` or `picture` (or any specified custom words) in the `alt` prop.").with_label(span) + .with_help("Provide no redundant alt text for image. Screen-readers already announce `img` tags as an image. You don't need to use the words `image`, `photo`, or `picture` (or any specified custom words) in the `alt` prop.").with_label(span) } #[derive(Debug, Default, Clone)] @@ -33,9 +34,9 @@ pub struct ImgRedundantAlt(Box); pub struct ImgRedundantAltConfig { /// JSX element types to validate (component names) where the rule applies. /// For example, `["img", "Image"]`. - types_to_validate: Vec, + components: Vec, /// Words considered redundant in alt text that should trigger a warning. - redundant_words: Vec>, + words: Vec>, } impl std::ops::Deref for ImgRedundantAlt { @@ -51,16 +52,17 @@ const REDUNDANT_WORDS: [&str; 3] = ["image", "photo", "picture"]; impl Default for ImgRedundantAltConfig { fn default() -> Self { Self { - types_to_validate: vec![CompactStr::new("img")], - redundant_words: vec!["image".into(), "photo".into(), "picture".into()], + components: vec![CompactStr::new("img")], + words: vec!["image".into(), "photo".into(), "picture".into()], } } } impl ImgRedundantAltConfig { - fn new(types_to_validate: Vec<&str>, redundant_words: &[&str]) -> Self { + fn new(components: Vec<&str>, words: &[&str]) -> Self { Self { - types_to_validate: types_to_validate.into_iter().map(Into::into).collect(), - redundant_words: redundant_words + components: components.into_iter().map(Into::into).collect(), + // Using cow_to_ascii_lowercase means you cannot use non-ASCII characters (e.g. Japanese, Chinese, etc.). We should consider changing this? + words: words .iter() .map(|w| Cow::Owned(w.cow_to_ascii_lowercase().to_string())) .collect::>(), @@ -131,7 +133,7 @@ impl Rule for ImgRedundantAlt { let element_type = get_element_type(ctx, jsx_el); - if !self.types_to_validate.iter().any(|comp| comp == &element_type) { + if !self.components.iter().any(|comp| comp == &element_type) { return; } @@ -193,7 +195,7 @@ impl ImgRedundantAlt { #[inline] fn is_redundant_alt_text(&self, alt_text: &str) -> bool { let alt_text = alt_text.cow_to_ascii_lowercase(); - for word in &self.redundant_words { + for word in &self.words { if let Some(index) = alt_text.find(word.as_ref()) { // check if followed by space or is whole text if index + word.len() == alt_text.len() @@ -211,7 +213,7 @@ impl ImgRedundantAlt { fn test() { use crate::tester::Tester; - fn array() -> serde_json::Value { + fn config_array() -> serde_json::Value { serde_json::json!([{ "components": ["Image"], "words": ["Word1", "Word2"] @@ -268,6 +270,22 @@ fn test() { (r"Photo of friend.;", None, None), (r"Picture of friend.;", None, None), (r"Image of friend.;", None, None), + ( + r"thing not to say;", + Some(serde_json::json!([{ "words": ["not to say"] }])), + None, + ), + ( + r";", + Some(serde_json::json!([{ "components": ["PicVersionThree"] }])), + None, + ), + // TODO: if there is a period immediately after the banned word, it does not get recognized by the current logic. + // ( + // r";", + // Some(serde_json::json!([{ "components": ["PicVersionThree"] }])), + // None, + // ), (r"PhOtO of friend.;", None, None), (r"{'photo'};", None, None), (r"piCTUre of friend.;", None, None), @@ -284,12 +302,16 @@ fn test() { (r"{`picture", None, None), (r"{`photo", None, None), (r"{`image", None, None), + (r"Photo of a friend", Some(config_array()), None), (r"Photo of a friend", None, Some(settings())), // TESTS FOR ARRAY OPTION TESTS - (r"Word1;", Some(array()), None), - (r"Word2;", Some(array()), None), - (r"Word1;", Some(array()), None), - (r"Word2;", Some(array()), None), + (r"Word1;", Some(config_array()), None), + (r"Word2;", Some(config_array()), None), + (r"Word1;", Some(config_array()), None), + (r"Word2;", Some(config_array()), None), + // non-english tests, they need to be enabled after we fix the code. + // (r"イメージ", Some(serde_json::json!([{ "words": ["イメージ"] }])), None), + // (r"イメージです", Some(serde_json::json!([{ "words": ["イメージ"] }])), None), ]; Tester::new(ImgRedundantAlt::NAME, ImgRedundantAlt::PLUGIN, pass, fail).test_and_snapshot(); diff --git a/crates/oxc_linter/src/snapshots/jsx_a11y_img_redundant_alt.snap b/crates/oxc_linter/src/snapshots/jsx_a11y_img_redundant_alt.snap index 827e3719392a3..aa05e3fb4e829 100644 --- a/crates/oxc_linter/src/snapshots/jsx_a11y_img_redundant_alt.snap +++ b/crates/oxc_linter/src/snapshots/jsx_a11y_img_redundant_alt.snap @@ -6,165 +6,186 @@ source: crates/oxc_linter/src/tester.rs 1 │ Photo of friend.; · ─── ╰──── - help: Provide no redundant alt text for image. Screen-readers already announce `img` tags as an image. You don't need to use the words `image`, `photo,` or `picture` (or any specified custom words) in the `alt` prop. + help: Provide no redundant alt text for image. Screen-readers already announce `img` tags as an image. You don't need to use the words `image`, `photo`, or `picture` (or any specified custom words) in the `alt` prop. ⚠ eslint-plugin-jsx-a11y(img-redundant-alt): Redundant `alt` attribute. ╭─[img_redundant_alt.tsx:1:6] 1 │ Picture of friend.; · ─── ╰──── - help: Provide no redundant alt text for image. Screen-readers already announce `img` tags as an image. You don't need to use the words `image`, `photo,` or `picture` (or any specified custom words) in the `alt` prop. + help: Provide no redundant alt text for image. Screen-readers already announce `img` tags as an image. You don't need to use the words `image`, `photo`, or `picture` (or any specified custom words) in the `alt` prop. ⚠ eslint-plugin-jsx-a11y(img-redundant-alt): Redundant `alt` attribute. ╭─[img_redundant_alt.tsx:1:6] 1 │ Image of friend.; · ─── ╰──── - help: Provide no redundant alt text for image. Screen-readers already announce `img` tags as an image. You don't need to use the words `image`, `photo,` or `picture` (or any specified custom words) in the `alt` prop. + help: Provide no redundant alt text for image. Screen-readers already announce `img` tags as an image. You don't need to use the words `image`, `photo`, or `picture` (or any specified custom words) in the `alt` prop. + + ⚠ eslint-plugin-jsx-a11y(img-redundant-alt): Redundant `alt` attribute. + ╭─[img_redundant_alt.tsx:1:6] + 1 │ thing not to say; + · ─── + ╰──── + help: Provide no redundant alt text for image. Screen-readers already announce `img` tags as an image. You don't need to use the words `image`, `photo`, or `picture` (or any specified custom words) in the `alt` prop. + + ⚠ eslint-plugin-jsx-a11y(img-redundant-alt): Redundant `alt` attribute. + ╭─[img_redundant_alt.tsx:1:18] + 1 │ ; + · ─── + ╰──── + help: Provide no redundant alt text for image. Screen-readers already announce `img` tags as an image. You don't need to use the words `image`, `photo`, or `picture` (or any specified custom words) in the `alt` prop. ⚠ eslint-plugin-jsx-a11y(img-redundant-alt): Redundant `alt` attribute. ╭─[img_redundant_alt.tsx:1:6] 1 │ PhOtO of friend.; · ─── ╰──── - help: Provide no redundant alt text for image. Screen-readers already announce `img` tags as an image. You don't need to use the words `image`, `photo,` or `picture` (or any specified custom words) in the `alt` prop. + help: Provide no redundant alt text for image. Screen-readers already announce `img` tags as an image. You don't need to use the words `image`, `photo`, or `picture` (or any specified custom words) in the `alt` prop. ⚠ eslint-plugin-jsx-a11y(img-redundant-alt): Redundant `alt` attribute. ╭─[img_redundant_alt.tsx:1:6] 1 │ {'photo'}; · ─── ╰──── - help: Provide no redundant alt text for image. Screen-readers already announce `img` tags as an image. You don't need to use the words `image`, `photo,` or `picture` (or any specified custom words) in the `alt` prop. + help: Provide no redundant alt text for image. Screen-readers already announce `img` tags as an image. You don't need to use the words `image`, `photo`, or `picture` (or any specified custom words) in the `alt` prop. ⚠ eslint-plugin-jsx-a11y(img-redundant-alt): Redundant `alt` attribute. ╭─[img_redundant_alt.tsx:1:6] 1 │ piCTUre of friend.; · ─── ╰──── - help: Provide no redundant alt text for image. Screen-readers already announce `img` tags as an image. You don't need to use the words `image`, `photo,` or `picture` (or any specified custom words) in the `alt` prop. + help: Provide no redundant alt text for image. Screen-readers already announce `img` tags as an image. You don't need to use the words `image`, `photo`, or `picture` (or any specified custom words) in the `alt` prop. ⚠ eslint-plugin-jsx-a11y(img-redundant-alt): Redundant `alt` attribute. ╭─[img_redundant_alt.tsx:1:6] 1 │ imAGE of friend.; · ─── ╰──── - help: Provide no redundant alt text for image. Screen-readers already announce `img` tags as an image. You don't need to use the words `image`, `photo,` or `picture` (or any specified custom words) in the `alt` prop. + help: Provide no redundant alt text for image. Screen-readers already announce `img` tags as an image. You don't need to use the words `image`, `photo`, or `picture` (or any specified custom words) in the `alt` prop. ⚠ eslint-plugin-jsx-a11y(img-redundant-alt): Redundant `alt` attribute. ╭─[img_redundant_alt.tsx:1:6] 1 │ photo of cool person · ─── ╰──── - help: Provide no redundant alt text for image. Screen-readers already announce `img` tags as an image. You don't need to use the words `image`, `photo,` or `picture` (or any specified custom words) in the `alt` prop. + help: Provide no redundant alt text for image. Screen-readers already announce `img` tags as an image. You don't need to use the words `image`, `photo`, or `picture` (or any specified custom words) in the `alt` prop. ⚠ eslint-plugin-jsx-a11y(img-redundant-alt): Redundant `alt` attribute. ╭─[img_redundant_alt.tsx:1:6] 1 │ picture of cool person · ─── ╰──── - help: Provide no redundant alt text for image. Screen-readers already announce `img` tags as an image. You don't need to use the words `image`, `photo,` or `picture` (or any specified custom words) in the `alt` prop. + help: Provide no redundant alt text for image. Screen-readers already announce `img` tags as an image. You don't need to use the words `image`, `photo`, or `picture` (or any specified custom words) in the `alt` prop. ⚠ eslint-plugin-jsx-a11y(img-redundant-alt): Redundant `alt` attribute. ╭─[img_redundant_alt.tsx:1:6] 1 │ image of cool person · ─── ╰──── - help: Provide no redundant alt text for image. Screen-readers already announce `img` tags as an image. You don't need to use the words `image`, `photo,` or `picture` (or any specified custom words) in the `alt` prop. + help: Provide no redundant alt text for image. Screen-readers already announce `img` tags as an image. You don't need to use the words `image`, `photo`, or `picture` (or any specified custom words) in the `alt` prop. ⚠ eslint-plugin-jsx-a11y(img-redundant-alt): Redundant `alt` attribute. ╭─[img_redundant_alt.tsx:1:6] 1 │ photo · ─── ╰──── - help: Provide no redundant alt text for image. Screen-readers already announce `img` tags as an image. You don't need to use the words `image`, `photo,` or `picture` (or any specified custom words) in the `alt` prop. + help: Provide no redundant alt text for image. Screen-readers already announce `img` tags as an image. You don't need to use the words `image`, `photo`, or `picture` (or any specified custom words) in the `alt` prop. ⚠ eslint-plugin-jsx-a11y(img-redundant-alt): Redundant `alt` attribute. ╭─[img_redundant_alt.tsx:1:6] 1 │ image · ─── ╰──── - help: Provide no redundant alt text for image. Screen-readers already announce `img` tags as an image. You don't need to use the words `image`, `photo,` or `picture` (or any specified custom words) in the `alt` prop. + help: Provide no redundant alt text for image. Screen-readers already announce `img` tags as an image. You don't need to use the words `image`, `photo`, or `picture` (or any specified custom words) in the `alt` prop. ⚠ eslint-plugin-jsx-a11y(img-redundant-alt): Redundant `alt` attribute. ╭─[img_redundant_alt.tsx:1:6] 1 │ picture · ─── ╰──── - help: Provide no redundant alt text for image. Screen-readers already announce `img` tags as an image. You don't need to use the words `image`, `photo,` or `picture` (or any specified custom words) in the `alt` prop. + help: Provide no redundant alt text for image. Screen-readers already announce `img` tags as an image. You don't need to use the words `image`, `photo`, or `picture` (or any specified custom words) in the `alt` prop. ⚠ eslint-plugin-jsx-a11y(img-redundant-alt): Redundant `alt` attribute. ╭─[img_redundant_alt.tsx:1:6] 1 │ {`picture · ─── ╰──── - help: Provide no redundant alt text for image. Screen-readers already announce `img` tags as an image. You don't need to use the words `image`, `photo,` or `picture` (or any specified custom words) in the `alt` prop. + help: Provide no redundant alt text for image. Screen-readers already announce `img` tags as an image. You don't need to use the words `image`, `photo`, or `picture` (or any specified custom words) in the `alt` prop. ⚠ eslint-plugin-jsx-a11y(img-redundant-alt): Redundant `alt` attribute. ╭─[img_redundant_alt.tsx:1:6] 1 │ {`photo · ─── ╰──── - help: Provide no redundant alt text for image. Screen-readers already announce `img` tags as an image. You don't need to use the words `image`, `photo,` or `picture` (or any specified custom words) in the `alt` prop. + help: Provide no redundant alt text for image. Screen-readers already announce `img` tags as an image. You don't need to use the words `image`, `photo`, or `picture` (or any specified custom words) in the `alt` prop. ⚠ eslint-plugin-jsx-a11y(img-redundant-alt): Redundant `alt` attribute. ╭─[img_redundant_alt.tsx:1:6] 1 │ {`image · ─── ╰──── - help: Provide no redundant alt text for image. Screen-readers already announce `img` tags as an image. You don't need to use the words `image`, `photo,` or `picture` (or any specified custom words) in the `alt` prop. + help: Provide no redundant alt text for image. Screen-readers already announce `img` tags as an image. You don't need to use the words `image`, `photo`, or `picture` (or any specified custom words) in the `alt` prop. ⚠ eslint-plugin-jsx-a11y(img-redundant-alt): Redundant `alt` attribute. ╭─[img_redundant_alt.tsx:1:6] 1 │ {`picture · ─── ╰──── - help: Provide no redundant alt text for image. Screen-readers already announce `img` tags as an image. You don't need to use the words `image`, `photo,` or `picture` (or any specified custom words) in the `alt` prop. + help: Provide no redundant alt text for image. Screen-readers already announce `img` tags as an image. You don't need to use the words `image`, `photo`, or `picture` (or any specified custom words) in the `alt` prop. ⚠ eslint-plugin-jsx-a11y(img-redundant-alt): Redundant `alt` attribute. ╭─[img_redundant_alt.tsx:1:6] 1 │ {`photo · ─── ╰──── - help: Provide no redundant alt text for image. Screen-readers already announce `img` tags as an image. You don't need to use the words `image`, `photo,` or `picture` (or any specified custom words) in the `alt` prop. + help: Provide no redundant alt text for image. Screen-readers already announce `img` tags as an image. You don't need to use the words `image`, `photo`, or `picture` (or any specified custom words) in the `alt` prop. ⚠ eslint-plugin-jsx-a11y(img-redundant-alt): Redundant `alt` attribute. ╭─[img_redundant_alt.tsx:1:6] 1 │ {`image · ─── ╰──── - help: Provide no redundant alt text for image. Screen-readers already announce `img` tags as an image. You don't need to use the words `image`, `photo,` or `picture` (or any specified custom words) in the `alt` prop. + help: Provide no redundant alt text for image. Screen-readers already announce `img` tags as an image. You don't need to use the words `image`, `photo`, or `picture` (or any specified custom words) in the `alt` prop. + + ⚠ eslint-plugin-jsx-a11y(img-redundant-alt): Redundant `alt` attribute. + ╭─[img_redundant_alt.tsx:1:8] + 1 │ Photo of a friend + · ─── + ╰──── + help: Provide no redundant alt text for image. Screen-readers already announce `img` tags as an image. You don't need to use the words `image`, `photo`, or `picture` (or any specified custom words) in the `alt` prop. ⚠ eslint-plugin-jsx-a11y(img-redundant-alt): Redundant `alt` attribute. ╭─[img_redundant_alt.tsx:1:8] 1 │ Photo of a friend · ─── ╰──── - help: Provide no redundant alt text for image. Screen-readers already announce `img` tags as an image. You don't need to use the words `image`, `photo,` or `picture` (or any specified custom words) in the `alt` prop. + help: Provide no redundant alt text for image. Screen-readers already announce `img` tags as an image. You don't need to use the words `image`, `photo`, or `picture` (or any specified custom words) in the `alt` prop. ⚠ eslint-plugin-jsx-a11y(img-redundant-alt): Redundant `alt` attribute. ╭─[img_redundant_alt.tsx:1:6] 1 │ Word1; · ─── ╰──── - help: Provide no redundant alt text for image. Screen-readers already announce `img` tags as an image. You don't need to use the words `image`, `photo,` or `picture` (or any specified custom words) in the `alt` prop. + help: Provide no redundant alt text for image. Screen-readers already announce `img` tags as an image. You don't need to use the words `image`, `photo`, or `picture` (or any specified custom words) in the `alt` prop. ⚠ eslint-plugin-jsx-a11y(img-redundant-alt): Redundant `alt` attribute. ╭─[img_redundant_alt.tsx:1:6] 1 │ Word2; · ─── ╰──── - help: Provide no redundant alt text for image. Screen-readers already announce `img` tags as an image. You don't need to use the words `image`, `photo,` or `picture` (or any specified custom words) in the `alt` prop. + help: Provide no redundant alt text for image. Screen-readers already announce `img` tags as an image. You don't need to use the words `image`, `photo`, or `picture` (or any specified custom words) in the `alt` prop. ⚠ eslint-plugin-jsx-a11y(img-redundant-alt): Redundant `alt` attribute. ╭─[img_redundant_alt.tsx:1:8] 1 │ Word1; · ─── ╰──── - help: Provide no redundant alt text for image. Screen-readers already announce `img` tags as an image. You don't need to use the words `image`, `photo,` or `picture` (or any specified custom words) in the `alt` prop. + help: Provide no redundant alt text for image. Screen-readers already announce `img` tags as an image. You don't need to use the words `image`, `photo`, or `picture` (or any specified custom words) in the `alt` prop. ⚠ eslint-plugin-jsx-a11y(img-redundant-alt): Redundant `alt` attribute. ╭─[img_redundant_alt.tsx:1:8] 1 │ Word2; · ─── ╰──── - help: Provide no redundant alt text for image. Screen-readers already announce `img` tags as an image. You don't need to use the words `image`, `photo,` or `picture` (or any specified custom words) in the `alt` prop. + help: Provide no redundant alt text for image. Screen-readers already announce `img` tags as an image. You don't need to use the words `image`, `photo`, or `picture` (or any specified custom words) in the `alt` prop.