From 5aa3efa97cc366612cf84ca6c117e706765295fc Mon Sep 17 00:00:00 2001
From: Victorien ELVINGER <victorien@elvinger.fr>
Date: Fri, 28 Apr 2023 18:29:23 +0200
Subject: [PATCH] fix(rome_js_analyze): #4410 (#4418)

---
 CHANGELOG.md                                  |   1 +
 .../a11y/use_button_type.rs                   | 108 +++++++++------
 .../tests/specs/a11y/useButtonType/inJsx.jsx  |   8 ++
 .../specs/a11y/useButtonType/inJsx.jsx.snap   | 129 +++++++++++++++++-
 .../specs/a11y/useButtonType/inObject.js      |   3 +
 .../specs/a11y/useButtonType/inObject.js.snap |  51 +++++--
 .../a11y/useButtonType/withBindingInvalid.js  |   4 +
 .../useButtonType/withBindingInvalid.js.snap  |  23 ++++
 .../withDefaultNamespaceInvalid.js            |   3 +
 .../withDefaultNamespaceInvalid.js.snap       |  23 ++++
 .../useButtonType/withRenamedImportInvalid.js |   4 +
 .../withRenamedImportInvalid.js.snap          |  23 ++++
 website/src/playground/tabs/SettingsTab.tsx   |  17 ++-
 13 files changed, 331 insertions(+), 66 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 50d3ea3698e..e8cbf402b28 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -22,6 +22,7 @@ output. [#4405](https://github.com/rome/tools/pull/4405)
 - Add new command `rome migrate` the transform the configuration file `rome.json`
 when there are breaking changes.
 - Fix [#4348](https://github.com/rome/tools/issues/4348) that caused [`noNonNullAssertion`](https://docs.rome.tools/lint/rules/nononnullassertion/) to emit incorrect code action
+- Fix [#4410](https://github.com/rome/tools/issues/4410) that caused [`useButtonType`](https://docs.rome.tools/lint/rules/usebuttontype/) to miss some cases
 
 ### Configuration
 ### Editors
diff --git a/crates/rome_js_analyze/src/semantic_analyzers/a11y/use_button_type.rs b/crates/rome_js_analyze/src/semantic_analyzers/a11y/use_button_type.rs
index adaa082efb5..4b9cd6cab21 100644
--- a/crates/rome_js_analyze/src/semantic_analyzers/a11y/use_button_type.rs
+++ b/crates/rome_js_analyze/src/semantic_analyzers/a11y/use_button_type.rs
@@ -3,10 +3,10 @@ use crate::semantic_services::Semantic;
 use rome_analyze::{context::RuleContext, declare_rule, Rule, RuleDiagnostic};
 use rome_console::markup;
 use rome_js_syntax::{
-    AnyJsxElementName, JsCallExpression, JsObjectExpression, JsStringLiteralExpression,
-    JsxOpeningElement, JsxString,
+    AnyJsxElementName, JsCallExpression, JsxAttribute, JsxOpeningElement, JsxSelfClosingElement,
+    TextRange,
 };
-use rome_rowan::{declare_node_union, AstNode, AstNodeList};
+use rome_rowan::{declare_node_union, AstNode};
 
 declare_rule! {
     /// Enforces the usage of the attribute `type` for the element `button`
@@ -45,15 +45,11 @@ declare_rule! {
 const ALLOWED_BUTTON_TYPES: [&str; 3] = ["submit", "button", "reset"];
 
 declare_node_union! {
-    pub(crate) UseButtonTypeQuery = JsxOpeningElement | JsCallExpression
-}
-
-declare_node_union! {
-    pub(crate) UseButtonTypeNode = JsxString | JsxOpeningElement | JsStringLiteralExpression | JsObjectExpression
+    pub(crate) UseButtonTypeQuery = JsxSelfClosingElement | JsxOpeningElement | JsCallExpression
 }
 
 pub(crate) struct UseButtonTypeState {
-    node: UseButtonTypeNode,
+    range: TextRange,
     missing_prop: bool,
 }
 
@@ -65,36 +61,34 @@ impl Rule for UseButtonType {
 
     fn run(ctx: &RuleContext<Self>) -> Self::Signals {
         let node = ctx.query();
-
         match node {
-            UseButtonTypeQuery::JsxOpeningElement(opening_element) => {
-                let name = opening_element.name().ok()?;
-                // we bail early the current tag is not a button; case sensitive is important
-                if is_button(&name)? {
-                    let attributes = opening_element.attributes();
-                    if attributes.is_empty() {
-                        return Some(UseButtonTypeState {
-                            node: UseButtonTypeNode::from(opening_element.clone()),
-                            missing_prop: true,
-                        });
-                    } else {
-                        let type_attribute = opening_element.find_attribute_by_name("type").ok()?;
-
-                        if let Some(attribute) = type_attribute {
-                            let initializer = attribute.initializer()?.value().ok()?;
-                            let initializer = initializer.as_jsx_string()?;
-                            if !ALLOWED_BUTTON_TYPES
-                                .contains(&&*initializer.inner_string_text().ok()?)
-                            {
-                                return Some(UseButtonTypeState {
-                                    node: UseButtonTypeNode::from(initializer.clone()),
-                                    missing_prop: false,
-                                });
-                            }
-                        }
-                    }
+            UseButtonTypeQuery::JsxSelfClosingElement(element) => {
+                let name = element.name().ok()?;
+                if !is_button(&name)? {
+                    return None;
                 }
-                None
+                let type_attribute = element.find_attribute_by_name("type").ok()?;
+                let Some(attribute) = type_attribute else {
+                    return Some(UseButtonTypeState {
+                        range: element.range(),
+                        missing_prop: true,
+                    });
+                };
+                inspect_jsx_type_attribute(attribute)
+            }
+            UseButtonTypeQuery::JsxOpeningElement(element) => {
+                let name = element.name().ok()?;
+                if !is_button(&name)? {
+                    return None;
+                }
+                let type_attribute = element.find_attribute_by_name("type").ok()?;
+                let Some(attribute) = type_attribute else {
+                    return Some(UseButtonTypeState {
+                        range: element.range(),
+                        missing_prop: true,
+                    });
+                };
+                inspect_jsx_type_attribute(attribute)
             }
             UseButtonTypeQuery::JsCallExpression(call_expression) => {
                 let model = ctx.model();
@@ -108,19 +102,23 @@ impl Rule for UseButtonType {
                     .as_any_js_literal_expression()?
                     .as_js_string_literal_expression()?;
 
-                // case sensitive is important, <button> is different from <Button>
                 if first_argument.inner_string_text().ok()?.text() == "button" {
                     return if let Some(props) = react_create_element.props.as_ref() {
                         let type_member = react_create_element.find_prop_by_name("type");
                         if let Some(member) = type_member {
                             let property_value = member.value().ok()?;
-                            let value = property_value
+                            let Some(value) = property_value
                                 .as_any_js_literal_expression()?
-                                .as_js_string_literal_expression()?;
+                                .as_js_string_literal_expression() else {
+                                    return Some(UseButtonTypeState {
+                                        range: property_value.range(),
+                                        missing_prop: false,
+                                    });
+                                };
 
                             if !ALLOWED_BUTTON_TYPES.contains(&&*value.inner_string_text().ok()?) {
                                 return Some(UseButtonTypeState {
-                                    node: UseButtonTypeNode::from(value.clone()),
+                                    range: value.range(),
                                     missing_prop: false,
                                 });
                             }
@@ -129,12 +127,12 @@ impl Rule for UseButtonType {
                         // if we are here, it means that we haven't found the property "type" and
                         // we have to return a diagnostic
                         Some(UseButtonTypeState {
-                            node: UseButtonTypeNode::from(props.clone()),
+                            range: props.range(),
                             missing_prop: false,
                         })
                     } else {
                         Some(UseButtonTypeState {
-                            node: UseButtonTypeNode::from(first_argument.clone()),
+                            range: first_argument.range(),
                             missing_prop: true,
                         })
                     };
@@ -156,7 +154,7 @@ impl Rule for UseButtonType {
             }).to_owned()
         };
         Some(RuleDiagnostic::new(rule_category!(),
-            state.node.syntax().text_trimmed_range(),
+            state.range,
             message
         )
             .note(markup! {
@@ -172,10 +170,32 @@ impl Rule for UseButtonType {
     }
 }
 
+fn inspect_jsx_type_attribute(attribute: JsxAttribute) -> Option<UseButtonTypeState> {
+    let Some(initializer) = attribute.initializer() else {
+        return Some(UseButtonTypeState {
+            range: attribute.range(),
+            missing_prop: false,
+        });
+    };
+    let value = initializer.value().ok()?;
+    let Some(value) = value.as_jsx_string() else {
+        // computed value
+        return None;
+    };
+    if ALLOWED_BUTTON_TYPES.contains(&&*value.inner_string_text().ok()?) {
+        return None;
+    }
+    Some(UseButtonTypeState {
+        range: value.range(),
+        missing_prop: false,
+    })
+}
+
 /// Checks whether the current element is a button
 ///
 /// Case sensitive is important, `<button>` is different from `<Button>`
 fn is_button(name: &AnyJsxElementName) -> Option<bool> {
+    // case sensitive is important, <button> is different from <Button>
     Some(match name {
         AnyJsxElementName::JsxName(name) => {
             let name = name.value_token().ok()?;
diff --git a/crates/rome_js_analyze/tests/specs/a11y/useButtonType/inJsx.jsx b/crates/rome_js_analyze/tests/specs/a11y/useButtonType/inJsx.jsx
index 1d9c02c0e39..ab50d9cb356 100644
--- a/crates/rome_js_analyze/tests/specs/a11y/useButtonType/inJsx.jsx
+++ b/crates/rome_js_analyze/tests/specs/a11y/useButtonType/inJsx.jsx
@@ -2,6 +2,12 @@
 <>
     <button>do something</button>
     <button type="bar">do something</button>
+    <button type>do something</button>
+    <button/>
+    <button type="bar"/>
+    <button type/>
+    <button onClick={null}>test</button>
+    <button onClick={null}/>
 </>
 
 
@@ -9,4 +15,6 @@
 <>
     <button type="button">do something</button>
     <button type={dynamic_value}>do something</button>
+    <button type="button"/>
+    <button type={dynamic_value}/>
 </>
\ No newline at end of file
diff --git a/crates/rome_js_analyze/tests/specs/a11y/useButtonType/inJsx.jsx.snap b/crates/rome_js_analyze/tests/specs/a11y/useButtonType/inJsx.jsx.snap
index b5eeea050df..6eef8fc7610 100644
--- a/crates/rome_js_analyze/tests/specs/a11y/useButtonType/inJsx.jsx.snap
+++ b/crates/rome_js_analyze/tests/specs/a11y/useButtonType/inJsx.jsx.snap
@@ -1,5 +1,6 @@
 ---
 source: crates/rome_js_analyze/tests/spec_tests.rs
+assertion_line: 96
 expression: inJsx.jsx
 ---
 # Input
@@ -8,6 +9,12 @@ expression: inJsx.jsx
 <>
     <button>do something</button>
     <button type="bar">do something</button>
+    <button type>do something</button>
+    <button/>
+    <button type="bar"/>
+    <button type/>
+    <button onClick={null}>test</button>
+    <button onClick={null}/>
 </>
 
 
@@ -15,6 +22,8 @@ expression: inJsx.jsx
 <>
     <button type="button">do something</button>
     <button type={dynamic_value}>do something</button>
+    <button type="button"/>
+    <button type={dynamic_value}/>
 </>
 ```
 
@@ -29,7 +38,7 @@ inJsx.jsx:3:5 lint/a11y/useButtonType ━━━━━━━━━━━━━━
   > 3 │     <button>do something</button>
       │     ^^^^^^^^
     4 │     <button type="bar">do something</button>
-    5 │ </>
+    5 │     <button type>do something</button>
   
   i The default  type of a button is submit, which causes the submission of a form when placed inside a `form` element. This is likely not the behaviour that you want inside a React application.
   
@@ -47,8 +56,122 @@ inJsx.jsx:4:18 lint/a11y/useButtonType ━━━━━━━━━━━━━
     3 │     <button>do something</button>
   > 4 │     <button type="bar">do something</button>
       │                  ^^^^^
-    5 │ </>
-    6 │ 
+    5 │     <button type>do something</button>
+    6 │     <button/>
+  
+  i The default  type of a button is submit, which causes the submission of a form when placed inside a `form` element. This is likely not the behaviour that you want inside a React application.
+  
+  i Allowed button types are: submit, button or reset
+  
+
+```
+
+```
+inJsx.jsx:5:13 lint/a11y/useButtonType ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+  ! Provide a valid type prop for the button element.
+  
+    3 │     <button>do something</button>
+    4 │     <button type="bar">do something</button>
+  > 5 │     <button type>do something</button>
+      │             ^^^^
+    6 │     <button/>
+    7 │     <button type="bar"/>
+  
+  i The default  type of a button is submit, which causes the submission of a form when placed inside a `form` element. This is likely not the behaviour that you want inside a React application.
+  
+  i Allowed button types are: submit, button or reset
+  
+
+```
+
+```
+inJsx.jsx:6:5 lint/a11y/useButtonType ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+  ! Provide an explicit type prop for the button element.
+  
+    4 │     <button type="bar">do something</button>
+    5 │     <button type>do something</button>
+  > 6 │     <button/>
+      │     ^^^^^^^^^
+    7 │     <button type="bar"/>
+    8 │     <button type/>
+  
+  i The default  type of a button is submit, which causes the submission of a form when placed inside a `form` element. This is likely not the behaviour that you want inside a React application.
+  
+  i Allowed button types are: submit, button or reset
+  
+
+```
+
+```
+inJsx.jsx:7:18 lint/a11y/useButtonType ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+  ! Provide a valid type prop for the button element.
+  
+    5 │     <button type>do something</button>
+    6 │     <button/>
+  > 7 │     <button type="bar"/>
+      │                  ^^^^^
+    8 │     <button type/>
+    9 │     <button onClick={null}>test</button>
+  
+  i The default  type of a button is submit, which causes the submission of a form when placed inside a `form` element. This is likely not the behaviour that you want inside a React application.
+  
+  i Allowed button types are: submit, button or reset
+  
+
+```
+
+```
+inJsx.jsx:8:13 lint/a11y/useButtonType ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+  ! Provide a valid type prop for the button element.
+  
+     6 │     <button/>
+     7 │     <button type="bar"/>
+   > 8 │     <button type/>
+       │             ^^^^
+     9 │     <button onClick={null}>test</button>
+    10 │     <button onClick={null}/>
+  
+  i The default  type of a button is submit, which causes the submission of a form when placed inside a `form` element. This is likely not the behaviour that you want inside a React application.
+  
+  i Allowed button types are: submit, button or reset
+  
+
+```
+
+```
+inJsx.jsx:9:5 lint/a11y/useButtonType ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+  ! Provide an explicit type prop for the button element.
+  
+     7 │     <button type="bar"/>
+     8 │     <button type/>
+   > 9 │     <button onClick={null}>test</button>
+       │     ^^^^^^^^^^^^^^^^^^^^^^^
+    10 │     <button onClick={null}/>
+    11 │ </>
+  
+  i The default  type of a button is submit, which causes the submission of a form when placed inside a `form` element. This is likely not the behaviour that you want inside a React application.
+  
+  i Allowed button types are: submit, button or reset
+  
+
+```
+
+```
+inJsx.jsx:10:5 lint/a11y/useButtonType ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+  ! Provide an explicit type prop for the button element.
+  
+     8 │     <button type/>
+     9 │     <button onClick={null}>test</button>
+  > 10 │     <button onClick={null}/>
+       │     ^^^^^^^^^^^^^^^^^^^^^^^^
+    11 │ </>
+    12 │ 
   
   i The default  type of a button is submit, which causes the submission of a form when placed inside a `form` element. This is likely not the behaviour that you want inside a React application.
   
diff --git a/crates/rome_js_analyze/tests/specs/a11y/useButtonType/inObject.js b/crates/rome_js_analyze/tests/specs/a11y/useButtonType/inObject.js
index 05afca94d10..e8a3fd5e743 100644
--- a/crates/rome_js_analyze/tests/specs/a11y/useButtonType/inObject.js
+++ b/crates/rome_js_analyze/tests/specs/a11y/useButtonType/inObject.js
@@ -3,6 +3,9 @@ React.createElement('button');
 React.createElement('button', {
     "type": "bar"
 });
+React.createElement('button', {
+    "type": 1
+});
 React.createElement('button', {
     "style": "background: red"
 });
diff --git a/crates/rome_js_analyze/tests/specs/a11y/useButtonType/inObject.js.snap b/crates/rome_js_analyze/tests/specs/a11y/useButtonType/inObject.js.snap
index 527aebe073a..e0037efbbac 100644
--- a/crates/rome_js_analyze/tests/specs/a11y/useButtonType/inObject.js.snap
+++ b/crates/rome_js_analyze/tests/specs/a11y/useButtonType/inObject.js.snap
@@ -1,5 +1,6 @@
 ---
 source: crates/rome_js_analyze/tests/spec_tests.rs
+assertion_line: 96
 expression: inObject.js
 ---
 # Input
@@ -9,6 +10,9 @@ React.createElement('button');
 React.createElement('button', {
     "type": "bar"
 });
+React.createElement('button', {
+    "type": 1
+});
 React.createElement('button', {
     "style": "background: red"
 });
@@ -60,19 +64,16 @@ inObject.js:4:13 lint/a11y/useButtonType ━━━━━━━━━━━━━
 ```
 
 ```
-inObject.js:6:31 lint/a11y/useButtonType ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+inObject.js:7:13 lint/a11y/useButtonType ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
   ! Provide a valid type prop for the button element.
   
-     4 │     "type": "bar"
-     5 │ });
-   > 6 │ React.createElement('button', {
-       │                               ^
-   > 7 │     "style": "background: red"
-   > 8 │ });
-       │ ^
-     9 │ React.createElement('button', {});
-    10 │ 
+    5 │ });
+    6 │ React.createElement('button', {
+  > 7 │     "type": 1
+      │             ^
+    8 │ });
+    9 │ React.createElement('button', {
   
   i The default  type of a button is submit, which causes the submission of a form when placed inside a `form` element. This is likely not the behaviour that you want inside a React application.
   
@@ -86,12 +87,34 @@ inObject.js:9:31 lint/a11y/useButtonType ━━━━━━━━━━━━━
 
   ! Provide a valid type prop for the button element.
   
-     7 │     "style": "background: red"
+     7 │     "type": 1
      8 │ });
-   > 9 │ React.createElement('button', {});
+   > 9 │ React.createElement('button', {
+       │                               ^
+  > 10 │     "style": "background: red"
+  > 11 │ });
+       │ ^
+    12 │ React.createElement('button', {});
+    13 │ 
+  
+  i The default  type of a button is submit, which causes the submission of a form when placed inside a `form` element. This is likely not the behaviour that you want inside a React application.
+  
+  i Allowed button types are: submit, button or reset
+  
+
+```
+
+```
+inObject.js:12:31 lint/a11y/useButtonType ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+  ! Provide a valid type prop for the button element.
+  
+    10 │     "style": "background: red"
+    11 │ });
+  > 12 │ React.createElement('button', {});
        │                               ^^
-    10 │ 
-    11 │ // valid
+    13 │ 
+    14 │ // valid
   
   i The default  type of a button is submit, which causes the submission of a form when placed inside a `form` element. This is likely not the behaviour that you want inside a React application.
   
diff --git a/crates/rome_js_analyze/tests/specs/a11y/useButtonType/withBindingInvalid.js b/crates/rome_js_analyze/tests/specs/a11y/useButtonType/withBindingInvalid.js
index 644d6d33f63..2b9741b5f4f 100644
--- a/crates/rome_js_analyze/tests/specs/a11y/useButtonType/withBindingInvalid.js
+++ b/crates/rome_js_analyze/tests/specs/a11y/useButtonType/withBindingInvalid.js
@@ -7,4 +7,8 @@ React.createElement('button', {
 
 createElement('button', {
     "type": "bar"
+});
+
+createElement('button', {
+    "type": 1
 });
\ No newline at end of file
diff --git a/crates/rome_js_analyze/tests/specs/a11y/useButtonType/withBindingInvalid.js.snap b/crates/rome_js_analyze/tests/specs/a11y/useButtonType/withBindingInvalid.js.snap
index 3527030d8fe..18c5223c947 100644
--- a/crates/rome_js_analyze/tests/specs/a11y/useButtonType/withBindingInvalid.js.snap
+++ b/crates/rome_js_analyze/tests/specs/a11y/useButtonType/withBindingInvalid.js.snap
@@ -1,5 +1,6 @@
 ---
 source: crates/rome_js_analyze/tests/spec_tests.rs
+assertion_line: 96
 expression: withBindingInvalid.js
 ---
 # Input
@@ -14,6 +15,10 @@ React.createElement('button', {
 createElement('button', {
     "type": "bar"
 });
+
+createElement('button', {
+    "type": 1
+});
 ```
 
 # Diagnostics
@@ -64,6 +69,24 @@ withBindingInvalid.js:9:13 lint/a11y/useButtonType ━━━━━━━━━
    > 9 │     "type": "bar"
        │             ^^^^^
     10 │ });
+    11 │ 
+  
+  i The default  type of a button is submit, which causes the submission of a form when placed inside a `form` element. This is likely not the behaviour that you want inside a React application.
+  
+  i Allowed button types are: submit, button or reset
+  
+
+```
+
+```
+withBindingInvalid.js:13:13 lint/a11y/useButtonType ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+  ! Provide a valid type prop for the button element.
+  
+    12 │ createElement('button', {
+  > 13 │     "type": 1
+       │             ^
+    14 │ });
   
   i The default  type of a button is submit, which causes the submission of a form when placed inside a `form` element. This is likely not the behaviour that you want inside a React application.
   
diff --git a/crates/rome_js_analyze/tests/specs/a11y/useButtonType/withDefaultNamespaceInvalid.js b/crates/rome_js_analyze/tests/specs/a11y/useButtonType/withDefaultNamespaceInvalid.js
index cd8ae9a5b72..a7515a266af 100644
--- a/crates/rome_js_analyze/tests/specs/a11y/useButtonType/withDefaultNamespaceInvalid.js
+++ b/crates/rome_js_analyze/tests/specs/a11y/useButtonType/withDefaultNamespaceInvalid.js
@@ -3,4 +3,7 @@ import * as DefaultNamespace  from "react";
 DefaultNamespace.createElement('button');
 DefaultNamespace.createElement('button', {
     "type": "DefaultNamespace"
+});
+DefaultNamespace.createElement('button', {
+    "type": 1
 });
\ No newline at end of file
diff --git a/crates/rome_js_analyze/tests/specs/a11y/useButtonType/withDefaultNamespaceInvalid.js.snap b/crates/rome_js_analyze/tests/specs/a11y/useButtonType/withDefaultNamespaceInvalid.js.snap
index e2f1e04c018..a106a4e8a5f 100644
--- a/crates/rome_js_analyze/tests/specs/a11y/useButtonType/withDefaultNamespaceInvalid.js.snap
+++ b/crates/rome_js_analyze/tests/specs/a11y/useButtonType/withDefaultNamespaceInvalid.js.snap
@@ -1,5 +1,6 @@
 ---
 source: crates/rome_js_analyze/tests/spec_tests.rs
+assertion_line: 96
 expression: withDefaultNamespaceInvalid.js
 ---
 # Input
@@ -10,6 +11,9 @@ DefaultNamespace.createElement('button');
 DefaultNamespace.createElement('button', {
     "type": "DefaultNamespace"
 });
+DefaultNamespace.createElement('button', {
+    "type": 1
+});
 ```
 
 # Diagnostics
@@ -42,6 +46,25 @@ withDefaultNamespaceInvalid.js:5:13 lint/a11y/useButtonType ━━━━━━
   > 5 │     "type": "DefaultNamespace"
       │             ^^^^^^^^^^^^^^^^^^
     6 │ });
+    7 │ DefaultNamespace.createElement('button', {
+  
+  i The default  type of a button is submit, which causes the submission of a form when placed inside a `form` element. This is likely not the behaviour that you want inside a React application.
+  
+  i Allowed button types are: submit, button or reset
+  
+
+```
+
+```
+withDefaultNamespaceInvalid.js:8:13 lint/a11y/useButtonType ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+  ! Provide a valid type prop for the button element.
+  
+    6 │ });
+    7 │ DefaultNamespace.createElement('button', {
+  > 8 │     "type": 1
+      │             ^
+    9 │ });
   
   i The default  type of a button is submit, which causes the submission of a form when placed inside a `form` element. This is likely not the behaviour that you want inside a React application.
   
diff --git a/crates/rome_js_analyze/tests/specs/a11y/useButtonType/withRenamedImportInvalid.js b/crates/rome_js_analyze/tests/specs/a11y/useButtonType/withRenamedImportInvalid.js
index 4798401c115..e038d105040 100644
--- a/crates/rome_js_analyze/tests/specs/a11y/useButtonType/withRenamedImportInvalid.js
+++ b/crates/rome_js_analyze/tests/specs/a11y/useButtonType/withRenamedImportInvalid.js
@@ -7,4 +7,8 @@ AwesomeReact.createElement('button', {
 
 awesomeCreateElement('button', {
     "type": "awesomeCreateElement"
+});
+
+awesomeCreateElement('button', {
+    "type": 1
 });
\ No newline at end of file
diff --git a/crates/rome_js_analyze/tests/specs/a11y/useButtonType/withRenamedImportInvalid.js.snap b/crates/rome_js_analyze/tests/specs/a11y/useButtonType/withRenamedImportInvalid.js.snap
index f58ab1f5b26..a351cf8eff7 100644
--- a/crates/rome_js_analyze/tests/specs/a11y/useButtonType/withRenamedImportInvalid.js.snap
+++ b/crates/rome_js_analyze/tests/specs/a11y/useButtonType/withRenamedImportInvalid.js.snap
@@ -1,5 +1,6 @@
 ---
 source: crates/rome_js_analyze/tests/spec_tests.rs
+assertion_line: 96
 expression: withRenamedImportInvalid.js
 ---
 # Input
@@ -14,6 +15,10 @@ AwesomeReact.createElement('button', {
 awesomeCreateElement('button', {
     "type": "awesomeCreateElement"
 });
+
+awesomeCreateElement('button', {
+    "type": 1
+});
 ```
 
 # Diagnostics
@@ -64,6 +69,24 @@ withRenamedImportInvalid.js:9:13 lint/a11y/useButtonType ━━━━━━━
    > 9 │     "type": "awesomeCreateElement"
        │             ^^^^^^^^^^^^^^^^^^^^^^
     10 │ });
+    11 │ 
+  
+  i The default  type of a button is submit, which causes the submission of a form when placed inside a `form` element. This is likely not the behaviour that you want inside a React application.
+  
+  i Allowed button types are: submit, button or reset
+  
+
+```
+
+```
+withRenamedImportInvalid.js:13:13 lint/a11y/useButtonType ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+  ! Provide a valid type prop for the button element.
+  
+    12 │ awesomeCreateElement('button', {
+  > 13 │     "type": 1
+       │             ^
+    14 │ });
   
   i The default  type of a button is submit, which causes the submission of a form when placed inside a `form` element. This is likely not the behaviour that you want inside a React application.
   
diff --git a/website/src/playground/tabs/SettingsTab.tsx b/website/src/playground/tabs/SettingsTab.tsx
index 90e5b32a826..c7651f67130 100644
--- a/website/src/playground/tabs/SettingsTab.tsx
+++ b/website/src/playground/tabs/SettingsTab.tsx
@@ -183,10 +183,14 @@ export default function SettingsTab({
 	return (
 		<div className="settings-tab">
 			<section className="settings-tab-buttons">
-				<button onClick={onReset} onKeyDown={onReset}>
+				<button type="button" onClick={onReset} onKeyDown={onReset}>
 					Reset
 				</button>
-				<button onClick={toggleSingleFileMode} onKeyDown={toggleSingleFileMode}>
+				<button
+					type="button"
+					onClick={toggleSingleFileMode}
+					onKeyDown={toggleSingleFileMode}
+				>
 					{singleFileMode ? "Multi-file mode" : "Single-file mode"}
 				</button>
 			</section>
@@ -249,7 +253,7 @@ function FileView({
 		<div className="file-view">
 			<h2 className="files-heading">
 				Files
-				<button onClick={() => setCreatingFile(true)}>
+				<button type="button" onClick={() => setCreatingFile(true)}>
 					<span className="sr-only">New</span>
 					<span aria-hidden={true}>+</span>
 				</button>
@@ -342,12 +346,12 @@ function FileViewItem({
 		<li className={className} onClick={onClick} onKeyDown={onClick}>
 			{filename}
 
-			<button onClick={onRenameClick} onKeyDown={onRenameClick}>
+			<button type="button" onClick={onRenameClick} onKeyDown={onRenameClick}>
 				Rename
 			</button>
 
 			{canDelete && (
-				<button onClick={onDeleteClick} onKeyDown={onDeleteClick}>
+				<button type="button" onClick={onDeleteClick} onKeyDown={onDeleteClick}>
 					<span className="sr-only">Delete</span>
 					<span aria-hidden={true}>X</span>
 				</button>
@@ -667,6 +671,7 @@ function LineWidthInput({
 				<div className="input-container">
 					<div className="button-group">
 						<button
+							type="button"
 							aria-label="Set line width to 80 characters"
 							onClick={() => {
 								setLineWidth(80);
@@ -682,6 +687,7 @@ function LineWidthInput({
 						</button>
 
 						<button
+							type="button"
 							aria-label="Set line width to 120 characters"
 							onClick={() => {
 								setLineWidth(120);
@@ -697,6 +703,7 @@ function LineWidthInput({
 						</button>
 
 						<button
+							type="button"
 							aria-label="Set a custom line width"
 							onClick={() => setShowCustom(!showCustom)}
 							onKeyDown={() => setShowCustom(!showCustom)}