From 6abe553bfdce0f0329ed50c94c310fbe7a5490fe Mon Sep 17 00:00:00 2001
From: Daiki Nishikawa <nd.12021218@gmail.com>
Date: Tue, 9 May 2023 00:36:59 +0900
Subject: [PATCH] refactor(rome_js_analyze): update error messages for
 UseAltText diagnostics (#4440)

---
 .../src/analyzers/a11y/use_alt_text.rs        | 47 ++++++++++++++-----
 .../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 +++---
 website/src/pages/lint/rules/useAltText.md    |  4 +-
 6 files changed, 75 insertions(+), 54 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..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;
 
@@ -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."
             }),
         )
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 │ 	<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="" />
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 │   <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="" />
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 │   <input type="image" />
@@ -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 │   <input type="image" />
     4 │   <input type="image" alt />
@@ -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 │   <input type="image" alt />
     5 │   <input type="image" alt={undefined} />
@@ -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 │   <input type="image" alt={undefined} />
     6 │   <input type="image">Foo</input>
@@ -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 │   <input type="image">Foo</input>
      7 │   <input type="image" {...this.props} />
@@ -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 │   <input type="image" {...this.props} />
      8 │   <input type="image" aria-label="" />
@@ -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 │   <input type="image" aria-label="" />
      9 │   <input type="image" aria-label={undefined} />
@@ -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 │   <input type="image" aria-label={undefined} />
     10 │   <input type="image" aria-labelledby="" />
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 │   <object />
@@ -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 │   <object />
@@ -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 │   <object />
     5 │   <object><div aria-hidden /></object>
@@ -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 │   <object><div aria-hidden /></object>
     6 │   <object title={undefined} />
@@ -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 │   <object title={undefined} />
      7 │   <object aria-label="" />
@@ -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 │   <object aria-label="" />
      8 │   <object aria-labelledby="" />
@@ -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 │   <object aria-labelledby="" />
      9 │   <object aria-label={undefined} />
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: `<i
 
 <pre class="language-text"><code class="language-text">a11y/useAltText.js:1:1 <a href="https://docs.rome.tools/lint/rules/useAltText">lint/a11y/useAltText</a> ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
-<strong><span style="color: Tomato;">  </span></strong><strong><span style="color: Tomato;">✖</span></strong> <span style="color: Tomato;">Provide the attribute </span><span style="color: Tomato;"><strong>alt</strong></span><span style="color: Tomato;"> when using </span><span style="color: Tomato;"><strong>img</strong></span><span style="color: Tomato;">, </span><span style="color: Tomato;"><strong>area</strong></span><span style="color: Tomato;"> or </span><span style="color: Tomato;"><strong>input type='image'</strong></span>
+<strong><span style="color: Tomato;">  </span></strong><strong><span style="color: Tomato;">✖</span></strong> <span style="color: Tomato;">Provide a text alternative through the </span><span style="color: Tomato;"><strong>alt</strong></span><span style="color: Tomato;">, </span><span style="color: Tomato;"><strong>aria-label</strong></span><span style="color: Tomato;"> or </span><span style="color: Tomato;"><strong>aria-labelledby</strong></span><span style="color: Tomato;"> attribute</span>
   
 <strong><span style="color: Tomato;">  </span></strong><strong><span style="color: Tomato;">&gt;</span></strong> <strong>1 │ </strong>&lt;img src=&quot;image.png&quot; /&gt;
    <strong>   │ </strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong>
@@ -38,7 +38,7 @@ By default, this rule checks for alternative text on the following elements: `<i
 
 <pre class="language-text"><code class="language-text">a11y/useAltText.js:1:1 <a href="https://docs.rome.tools/lint/rules/useAltText">lint/a11y/useAltText</a> ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
-<strong><span style="color: Tomato;">  </span></strong><strong><span style="color: Tomato;">✖</span></strong> <span style="color: Tomato;">Provide the attribute </span><span style="color: Tomato;"><strong>alt</strong></span><span style="color: Tomato;"> when using </span><span style="color: Tomato;"><strong>img</strong></span><span style="color: Tomato;">, </span><span style="color: Tomato;"><strong>area</strong></span><span style="color: Tomato;"> or </span><span style="color: Tomato;"><strong>input type='image'</strong></span>
+<strong><span style="color: Tomato;">  </span></strong><strong><span style="color: Tomato;">✖</span></strong> <span style="color: Tomato;">Provide a text alternative through the </span><span style="color: Tomato;"><strong>alt</strong></span><span style="color: Tomato;">, </span><span style="color: Tomato;"><strong>aria-label</strong></span><span style="color: Tomato;"> or </span><span style="color: Tomato;"><strong>aria-labelledby</strong></span><span style="color: Tomato;"> attribute</span>
   
 <strong><span style="color: Tomato;">  </span></strong><strong><span style="color: Tomato;">&gt;</span></strong> <strong>1 │ </strong>&lt;input type=&quot;image&quot; src=&quot;image.png&quot; /&gt;
    <strong>   │ </strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong>