From 89f1f20c5776fc2c862bb8af8cb96e469e460f8a Mon Sep 17 00:00:00 2001 From: nissy-dev Date: Thu, 4 May 2023 17:43:36 +0900 Subject: [PATCH 1/3] refactor: fix error msg --- .../src/analyzers/a11y/use_alt_text.rs | 45 +++++++++++++------ .../tests/specs/a11y/useAltText/area.jsx.snap | 18 ++++---- .../tests/specs/a11y/useAltText/img.jsx.snap | 28 ++++++------ .../specs/a11y/useAltText/input.jsx.snap | 18 ++++---- .../specs/a11y/useAltText/object.jsx.snap | 14 +++--- 5 files changed, 70 insertions(+), 53 deletions(-) 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 │ From b205fad175a9a86dfd6894289edf4db1dade9a7f Mon Sep 17 00:00:00 2001 From: nissy-dev Date: Thu, 4 May 2023 17:46:58 +0900 Subject: [PATCH 2/3] refactor: error msg --- website/src/pages/lint/rules/useAltText.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/website/src/pages/lint/rules/useAltText.md b/website/src/pages/lint/rules/useAltText.md index 79759e2f795..11f2f95535d 100644 --- a/website/src/pages/lint/rules/useAltText.md +++ b/website/src/pages/lint/rules/useAltText.md @@ -22,7 +22,7 @@ By default, this rule checks for alternative text on the following elements: `a11y/useAltText.js:1:1 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 │ <img src="image.png" /> │ ^^^^^^^^^^^^^^^^^^^^^^^ @@ -38,7 +38,7 @@ By default, this rule checks for alternative text on the following elements: `a11y/useAltText.js:1:1 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 │ <input type="image" src="image.png" /> │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ From 33e8927a12d9f846b911fd3a69a5cdf8e213437d Mon Sep 17 00:00:00 2001 From: nissy-dev Date: Mon, 8 May 2023 23:08:12 +0900 Subject: [PATCH 3/3] refactor: update logic --- .../src/analyzers/a11y/use_alt_text.rs | 22 +++++++++++-------- 1 file changed, 13 insertions(+), 9 deletions(-) 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 6f959d7e712..8b8228d1003 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 @@ -1,5 +1,5 @@ use rome_analyze::{context::RuleContext, declare_rule, Ast, Rule, RuleDiagnostic}; -use rome_console::markup; +use rome_console::{fmt::Display, fmt::Formatter, markup}; use rome_js_syntax::{jsx_ext::AnyJsxElement, TextRange}; use rome_rowan::AstNode; @@ -57,6 +57,15 @@ pub enum ValidatedElement { Input, } +impl Display for ValidatedElement { + fn fmt(&self, fmt: &mut Formatter) -> std::io::Result<()> { + match self { + ValidatedElement::Object => fmt.write_markup(markup!("title")), + _ => fmt.write_markup(markup!("alt")), + } + } +} + impl Rule for UseAltText { type Query = Ast; type State = (ValidatedElement, TextRange); @@ -120,14 +129,9 @@ impl Rule for UseAltText { fn diagnostic(_ctx: &RuleContext, state: &Self::State) -> Option { 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(), - }; + let message = markup!( + "Provide a text alternative through the "{{validate_element}}", ""aria-label"" or ""aria-labelledby"" attribute" + ).to_owned(); Some( 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."