refactor(rome_js_analyze): update error messages for UseAltText diagnostics

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;
 
@@ -50,9 +50,25 @@ declare_rule! {
     }
 }
 
+pub enum ValidatedElement {
+    Object,
+    Img,
+    Area,
+    Input,
+}
+
+impl Display for ValidatedElement {
+    fn fmt(&self, fmt: &mut Formatter) -> std::io::Result<()> {
+        match self {
+            ValidatedElement::Object => fmt.write_markup(markup!(<Emphasis>"title"</Emphasis>)),
+            _ => fmt.write_markup(markup!(<Emphasis>"alt"</Emphasis>)),
+        }
+    }
+}
+
 impl Rule for UseAltText {
     type Query = Ast<AnyJsxElement>;
-    type State = TextRange;
+    type State = (ValidatedElement, TextRange);
     type Signals = Option<Self::State>;
     type Options = ();
 
@@ -74,18 +90,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(element.syntax().text_range());
+                    return Some((ValidatedElement::Img, element.syntax().text_range()));
+                }
+            }
+            "area" => {
+                if !has_alt && !has_aria_label && !has_aria_labelledby {
+                    return Some((ValidatedElement::Area, element.syntax().text_range()));
                 }
             }
             "input" => {
@@ -94,7 +118,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 +128,12 @@ impl Rule for UseAltText {
     }
 
     fn diagnostic(_ctx: &RuleContext<Self>, state: &Self::State) -> Option<RuleDiagnostic> {
-        if state.is_empty() {
-            return None;
-        }
+        let (validate_element, range) = state;
         let message = markup!(
-            "Provide the attribute "<Emphasis>"alt"</Emphasis>" when using "<Emphasis>"img"</Emphasis>", "<Emphasis>"area"</Emphasis>" or "<Emphasis>"input type='image'"</Emphasis>""
+            "Provide a text alternative through the "{{validate_element}}", "<Emphasis>"aria-label"</Emphasis>" or "<Emphasis>"aria-labelledby"</Emphasis>" 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."
             }),
         )

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 │ 	<area />
@@ -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 │ 	<area />
@@ -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 │ 	<area />
     5 │   <area alt />
@@ -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 │   <area alt />
     6 │   <area alt={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 │   <area alt={undefined} />
      7 │   <area src="xyz" />
@@ -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 │   <area src="xyz" />
      8 │   <area {...this.props} />
@@ -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 │   <area {...this.props} />
      9 │   <area aria-label="" />
@@ -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 │   <area aria-label="" />
     10 │   <area aria-label={undefined} />
@@ -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 │   <area aria-label={undefined} />
     11 │   <area aria-labelledby="" />

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 │   <img />
@@ -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 │   <img />
     4 │   <img alt />
@@ -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 │   <img alt />
     5 │   <img alt={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 │   <img alt={undefined} />
     6 │   <img src="xyz" />
@@ -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 │   <img src="xyz" />
      7 │   <img role />
@@ -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 │   <img role />
      8 │   <img {...this.props} />
@@ -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 │   <img {...this.props} />
      9 │   <img alt={undefined} role="presentation" />
@@ -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 │   <img alt={undefined} role="presentation" />
     10 │   <img alt role="presentation" />
@@ -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 │   <img alt role="presentation" />
     11 │   <img role="presentation" />
@@ -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 │   <img role="presentation" />
     12 │   <img role="none" />
@@ -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 │   <img role="none" />
     13 │   <img aria-label={undefined} />
@@ -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 │   <img aria-label={undefined} />
     14 │   <img aria-labelledby={undefined} />
@@ -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 │   <img aria-labelledby={undefined} />
     15 │   <img aria-label="" />