diff --git a/crates/rome_js_analyze/src/analyzers/a11y/use_alt_text.rs b/crates/rome_js_analyze/src/analyzers/a11y/use_alt_text.rs index b6a46feeadc..6f959d7e712 100644 --- a/crates/rome_js_analyze/src/analyzers/a11y/use_alt_text.rs +++ b/crates/rome_js_analyze/src/analyzers/a11y/use_alt_text.rs @@ -50,9 +50,16 @@ declare_rule! { } } +pub enum ValidatedElement { + Object, + Img, + Area, + Input, +} + impl Rule for UseAltText { type Query = Ast; - type State = TextRange; + type State = (ValidatedElement, TextRange); type Signals = Option; type Options = (); @@ -74,18 +81,26 @@ impl Rule for UseAltText { match element { AnyJsxElement::JsxOpeningElement(opening_element) => { if !opening_element.has_accessible_child() { - return Some(element.syntax().text_range()); + return Some(( + ValidatedElement::Object, + element.syntax().text_range(), + )); } } AnyJsxElement::JsxSelfClosingElement(_) => { - return Some(element.syntax().text_range()); + return Some((ValidatedElement::Object, element.syntax().text_range())); } } } } - "img" | "area" => { + "img" => { + if !has_alt && !has_aria_label && !has_aria_labelledby { + return Some((ValidatedElement::Img, element.syntax().text_range())); + } + } + "area" => { if !has_alt && !has_aria_label && !has_aria_labelledby { - return Some(element.syntax().text_range()); + return Some((ValidatedElement::Area, element.syntax().text_range())); } } "input" => { @@ -94,7 +109,7 @@ impl Rule for UseAltText { && !has_aria_label && !has_aria_labelledby { - return Some(element.syntax().text_range()); + return Some((ValidatedElement::Input, element.syntax().text_range())); } } _ => {} @@ -104,15 +119,17 @@ impl Rule for UseAltText { } fn diagnostic(_ctx: &RuleContext, state: &Self::State) -> Option { - if state.is_empty() { - return None; - } - let message = markup!( - "Provide the attribute ""alt"" when using ""img"", ""area"" or ""input type='image'""" - ).to_owned(); - + let (validate_element, range) = state; + let message = match validate_element { + ValidatedElement::Object => markup!( + "Provide a text alternative through the ""title"", ""aria-label"" or ""aria-labelledby"" attribute" + ).to_owned(), + _ => markup!( + "Provide a text alternative through the ""alt"", ""aria-label"" or ""aria-labelledby"" attribute" + ).to_owned(), + }; Some( - RuleDiagnostic::new(rule_category!(), state, message).note(markup! { + RuleDiagnostic::new(rule_category!(), range, message).note(markup! { "Meaningful alternative text on elements helps users relying on screen readers to understand content's purpose within a page." }), ) diff --git a/crates/rome_js_analyze/tests/specs/a11y/useAltText/area.jsx.snap b/crates/rome_js_analyze/tests/specs/a11y/useAltText/area.jsx.snap index 1b165b138d1..8eb3b0a7bf2 100644 --- a/crates/rome_js_analyze/tests/specs/a11y/useAltText/area.jsx.snap +++ b/crates/rome_js_analyze/tests/specs/a11y/useAltText/area.jsx.snap @@ -35,7 +35,7 @@ expression: area.jsx ``` area.jsx:4:2 lint/a11y/useAltText ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - ! Provide the attribute alt when using img, area or input type='image' + ! Provide a text alternative through the alt, aria-label or aria-labelledby attribute 3 │ <> > 4 │ @@ -51,7 +51,7 @@ area.jsx:4:2 lint/a11y/useAltText ━━━━━━━━━━━━━━━ ``` area.jsx:5:3 lint/a11y/useAltText ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - ! Provide the attribute alt when using img, area or input type='image' + ! Provide a text alternative through the alt, aria-label or aria-labelledby attribute 3 │ <> 4 │ @@ -68,7 +68,7 @@ area.jsx:5:3 lint/a11y/useAltText ━━━━━━━━━━━━━━━ ``` area.jsx:6:3 lint/a11y/useAltText ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - ! Provide the attribute alt when using img, area or input type='image' + ! Provide a text alternative through the alt, aria-label or aria-labelledby attribute 4 │ 5 │ @@ -85,7 +85,7 @@ area.jsx:6:3 lint/a11y/useAltText ━━━━━━━━━━━━━━━ ``` area.jsx:7:3 lint/a11y/useAltText ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - ! Provide the attribute alt when using img, area or input type='image' + ! Provide a text alternative through the alt, aria-label or aria-labelledby attribute 5 │ 6 │ {undefined} @@ -102,7 +102,7 @@ area.jsx:7:3 lint/a11y/useAltText ━━━━━━━━━━━━━━━ ``` area.jsx:8:3 lint/a11y/useAltText ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - ! Provide the attribute alt when using img, area or input type='image' + ! Provide a text alternative through the alt, aria-label or aria-labelledby attribute 6 │ {undefined} 7 │ @@ -119,7 +119,7 @@ area.jsx:8:3 lint/a11y/useAltText ━━━━━━━━━━━━━━━ ``` area.jsx:9:3 lint/a11y/useAltText ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - ! Provide the attribute alt when using img, area or input type='image' + ! Provide a text alternative through the alt, aria-label or aria-labelledby attribute 7 │ 8 │ @@ -136,7 +136,7 @@ area.jsx:9:3 lint/a11y/useAltText ━━━━━━━━━━━━━━━ ``` area.jsx:10:3 lint/a11y/useAltText ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - ! Provide the attribute alt when using img, area or input type='image' + ! Provide a text alternative through the alt, aria-label or aria-labelledby attribute 8 │ 9 │ @@ -153,7 +153,7 @@ area.jsx:10:3 lint/a11y/useAltText ━━━━━━━━━━━━━━━ ``` area.jsx:11:3 lint/a11y/useAltText ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - ! Provide the attribute alt when using img, area or input type='image' + ! Provide a text alternative through the alt, aria-label or aria-labelledby attribute 9 │ 10 │ @@ -170,7 +170,7 @@ area.jsx:11:3 lint/a11y/useAltText ━━━━━━━━━━━━━━━ ``` area.jsx:12:3 lint/a11y/useAltText ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - ! Provide the attribute alt when using img, area or input type='image' + ! Provide a text alternative through the alt, aria-label or aria-labelledby attribute 10 │ 11 │ diff --git a/crates/rome_js_analyze/tests/specs/a11y/useAltText/img.jsx.snap b/crates/rome_js_analyze/tests/specs/a11y/useAltText/img.jsx.snap index 0b8178768fa..feecdde220c 100644 --- a/crates/rome_js_analyze/tests/specs/a11y/useAltText/img.jsx.snap +++ b/crates/rome_js_analyze/tests/specs/a11y/useAltText/img.jsx.snap @@ -64,7 +64,7 @@ expression: img.jsx ``` img.jsx:3:3 lint/a11y/useAltText ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - ! Provide the attribute alt when using img, area or input type='image' + ! Provide a text alternative through the alt, aria-label or aria-labelledby attribute 1 │ // invalid 2 │ <> @@ -81,7 +81,7 @@ img.jsx:3:3 lint/a11y/useAltText ━━━━━━━━━━━━━━━ ``` img.jsx:4:3 lint/a11y/useAltText ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - ! Provide the attribute alt when using img, area or input type='image' + ! Provide a text alternative through the alt, aria-label or aria-labelledby attribute 2 │ <> 3 │ @@ -98,7 +98,7 @@ img.jsx:4:3 lint/a11y/useAltText ━━━━━━━━━━━━━━━ ``` img.jsx:5:3 lint/a11y/useAltText ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - ! Provide the attribute alt when using img, area or input type='image' + ! Provide a text alternative through the alt, aria-label or aria-labelledby attribute 3 │ 4 │ @@ -115,7 +115,7 @@ img.jsx:5:3 lint/a11y/useAltText ━━━━━━━━━━━━━━━ ``` img.jsx:6:3 lint/a11y/useAltText ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - ! Provide the attribute alt when using img, area or input type='image' + ! Provide a text alternative through the alt, aria-label or aria-labelledby attribute 4 │ 5 │ {undefined} @@ -132,7 +132,7 @@ img.jsx:6:3 lint/a11y/useAltText ━━━━━━━━━━━━━━━ ``` img.jsx:7:3 lint/a11y/useAltText ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - ! Provide the attribute alt when using img, area or input type='image' + ! Provide a text alternative through the alt, aria-label or aria-labelledby attribute 5 │ {undefined} 6 │ @@ -149,7 +149,7 @@ img.jsx:7:3 lint/a11y/useAltText ━━━━━━━━━━━━━━━ ``` img.jsx:8:3 lint/a11y/useAltText ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - ! Provide the attribute alt when using img, area or input type='image' + ! Provide a text alternative through the alt, aria-label or aria-labelledby attribute 6 │ 7 │ @@ -166,7 +166,7 @@ img.jsx:8:3 lint/a11y/useAltText ━━━━━━━━━━━━━━━ ``` img.jsx:9:3 lint/a11y/useAltText ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - ! Provide the attribute alt when using img, area or input type='image' + ! Provide a text alternative through the alt, aria-label or aria-labelledby attribute 7 │ 8 │ @@ -183,7 +183,7 @@ img.jsx:9:3 lint/a11y/useAltText ━━━━━━━━━━━━━━━ ``` img.jsx:10:3 lint/a11y/useAltText ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - ! Provide the attribute alt when using img, area or input type='image' + ! Provide a text alternative through the alt, aria-label or aria-labelledby attribute 8 │ 9 │ {undefined} @@ -200,7 +200,7 @@ img.jsx:10:3 lint/a11y/useAltText ━━━━━━━━━━━━━━━ ``` img.jsx:11:3 lint/a11y/useAltText ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - ! Provide the attribute alt when using img, area or input type='image' + ! Provide a text alternative through the alt, aria-label or aria-labelledby attribute 9 │ {undefined} 10 │ @@ -217,7 +217,7 @@ img.jsx:11:3 lint/a11y/useAltText ━━━━━━━━━━━━━━━ ``` img.jsx:12:3 lint/a11y/useAltText ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - ! Provide the attribute alt when using img, area or input type='image' + ! Provide a text alternative through the alt, aria-label or aria-labelledby attribute 10 │ 11 │ @@ -234,7 +234,7 @@ img.jsx:12:3 lint/a11y/useAltText ━━━━━━━━━━━━━━━ ``` img.jsx:13:3 lint/a11y/useAltText ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - ! Provide the attribute alt when using img, area or input type='image' + ! Provide a text alternative through the alt, aria-label or aria-labelledby attribute 11 │ 12 │ @@ -251,7 +251,7 @@ img.jsx:13:3 lint/a11y/useAltText ━━━━━━━━━━━━━━━ ``` img.jsx:14:3 lint/a11y/useAltText ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - ! Provide the attribute alt when using img, area or input type='image' + ! Provide a text alternative through the alt, aria-label or aria-labelledby attribute 12 │ 13 │ @@ -268,7 +268,7 @@ img.jsx:14:3 lint/a11y/useAltText ━━━━━━━━━━━━━━━ ``` img.jsx:15:3 lint/a11y/useAltText ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - ! Provide the attribute alt when using img, area or input type='image' + ! Provide a text alternative through the alt, aria-label or aria-labelledby attribute 13 │ 14 │ @@ -285,7 +285,7 @@ img.jsx:15:3 lint/a11y/useAltText ━━━━━━━━━━━━━━━ ``` img.jsx:16:3 lint/a11y/useAltText ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - ! Provide the attribute alt when using img, area or input type='image' + ! Provide a text alternative through the alt, aria-label or aria-labelledby attribute 14 │ 15 │ diff --git a/crates/rome_js_analyze/tests/specs/a11y/useAltText/input.jsx.snap b/crates/rome_js_analyze/tests/specs/a11y/useAltText/input.jsx.snap index bcddb3599c6..09d7441caa1 100644 --- a/crates/rome_js_analyze/tests/specs/a11y/useAltText/input.jsx.snap +++ b/crates/rome_js_analyze/tests/specs/a11y/useAltText/input.jsx.snap @@ -36,7 +36,7 @@ expression: input.jsx ``` input.jsx:3:3 lint/a11y/useAltText ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - ! Provide the attribute alt when using img, area or input type='image' + ! Provide a text alternative through the alt, aria-label or aria-labelledby attribute 1 │ // invalid 2 │ <> @@ -53,7 +53,7 @@ input.jsx:3:3 lint/a11y/useAltText ━━━━━━━━━━━━━━━ ``` input.jsx:4:3 lint/a11y/useAltText ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - ! Provide the attribute alt when using img, area or input type='image' + ! Provide a text alternative through the alt, aria-label or aria-labelledby attribute 2 │ <> 3 │ @@ -70,7 +70,7 @@ input.jsx:4:3 lint/a11y/useAltText ━━━━━━━━━━━━━━━ ``` input.jsx:5:3 lint/a11y/useAltText ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - ! Provide the attribute alt when using img, area or input type='image' + ! Provide a text alternative through the alt, aria-label or aria-labelledby attribute 3 │ 4 │ @@ -87,7 +87,7 @@ input.jsx:5:3 lint/a11y/useAltText ━━━━━━━━━━━━━━━ ``` input.jsx:6:3 lint/a11y/useAltText ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - ! Provide the attribute alt when using img, area or input type='image' + ! Provide a text alternative through the alt, aria-label or aria-labelledby attribute 4 │ 5 │ @@ -104,7 +104,7 @@ input.jsx:6:3 lint/a11y/useAltText ━━━━━━━━━━━━━━━ ``` input.jsx:7:3 lint/a11y/useAltText ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - ! Provide the attribute alt when using img, area or input type='image' + ! Provide a text alternative through the alt, aria-label or aria-labelledby attribute 5 │ 6 │ Foo @@ -121,7 +121,7 @@ input.jsx:7:3 lint/a11y/useAltText ━━━━━━━━━━━━━━━ ``` input.jsx:8:3 lint/a11y/useAltText ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - ! Provide the attribute alt when using img, area or input type='image' + ! Provide a text alternative through the alt, aria-label or aria-labelledby attribute 6 │ Foo 7 │ @@ -138,7 +138,7 @@ input.jsx:8:3 lint/a11y/useAltText ━━━━━━━━━━━━━━━ ``` input.jsx:9:3 lint/a11y/useAltText ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - ! Provide the attribute alt when using img, area or input type='image' + ! Provide a text alternative through the alt, aria-label or aria-labelledby attribute 7 │ 8 │ @@ -155,7 +155,7 @@ input.jsx:9:3 lint/a11y/useAltText ━━━━━━━━━━━━━━━ ``` input.jsx:10:3 lint/a11y/useAltText ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - ! Provide the attribute alt when using img, area or input type='image' + ! Provide a text alternative through the alt, aria-label or aria-labelledby attribute 8 │ 9 │ @@ -172,7 +172,7 @@ input.jsx:10:3 lint/a11y/useAltText ━━━━━━━━━━━━━━ ``` input.jsx:11:3 lint/a11y/useAltText ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - ! Provide the attribute alt when using img, area or input type='image' + ! Provide a text alternative through the alt, aria-label or aria-labelledby attribute 9 │ 10 │ diff --git a/crates/rome_js_analyze/tests/specs/a11y/useAltText/object.jsx.snap b/crates/rome_js_analyze/tests/specs/a11y/useAltText/object.jsx.snap index 418967ab1a2..80b92b9ede6 100644 --- a/crates/rome_js_analyze/tests/specs/a11y/useAltText/object.jsx.snap +++ b/crates/rome_js_analyze/tests/specs/a11y/useAltText/object.jsx.snap @@ -33,7 +33,7 @@ expression: object.jsx ``` object.jsx:4:3 lint/a11y/useAltText ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - ! Provide the attribute alt when using img, area or input type='image' + ! Provide a text alternative through the title, aria-label or aria-labelledby attribute 3 │ <> > 4 │ @@ -49,7 +49,7 @@ object.jsx:4:3 lint/a11y/useAltText ━━━━━━━━━━━━━━ ``` object.jsx:5:3 lint/a11y/useAltText ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - ! Provide the attribute alt when using img, area or input type='image' + ! Provide a text alternative through the title, aria-label or aria-labelledby attribute 3 │ <> 4 │ @@ -66,7 +66,7 @@ object.jsx:5:3 lint/a11y/useAltText ━━━━━━━━━━━━━━ ``` object.jsx:6:3 lint/a11y/useAltText ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - ! Provide the attribute alt when using img, area or input type='image' + ! Provide a text alternative through the title, aria-label or aria-labelledby attribute 4 │ 5 │
@@ -83,7 +83,7 @@ object.jsx:6:3 lint/a11y/useAltText ━━━━━━━━━━━━━━ ``` object.jsx:7:3 lint/a11y/useAltText ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - ! Provide the attribute alt when using img, area or input type='image' + ! Provide a text alternative through the title, aria-label or aria-labelledby attribute 5 │
6 │ @@ -100,7 +100,7 @@ object.jsx:7:3 lint/a11y/useAltText ━━━━━━━━━━━━━━ ``` object.jsx:8:3 lint/a11y/useAltText ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - ! Provide the attribute alt when using img, area or input type='image' + ! Provide a text alternative through the title, aria-label or aria-labelledby attribute 6 │ 7 │ @@ -117,7 +117,7 @@ object.jsx:8:3 lint/a11y/useAltText ━━━━━━━━━━━━━━ ``` object.jsx:9:3 lint/a11y/useAltText ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - ! Provide the attribute alt when using img, area or input type='image' + ! Provide a text alternative through the title, aria-label or aria-labelledby attribute 7 │ 8 │ @@ -134,7 +134,7 @@ object.jsx:9:3 lint/a11y/useAltText ━━━━━━━━━━━━━━ ``` object.jsx:10:3 lint/a11y/useAltText ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - ! Provide the attribute alt when using img, area or input type='image' + ! Provide a text alternative through the title, aria-label or aria-labelledby attribute 8 │ 9 │