and are considered neither interactive nor non-interactive, depending on the presence or absence of the role attribute.
@@ -85,7 +87,6 @@ impl Rule for NoNoninteractiveElementToInteractiveRole {
});
}
}
-
None
}
diff --git a/crates/rome_js_analyze/src/aria_analyzers/nursery/no_noninteractive_tabindex.rs b/crates/rome_js_analyze/src/aria_analyzers/nursery/no_noninteractive_tabindex.rs
index 9794e4815c8..753da4aff8f 100644
--- a/crates/rome_js_analyze/src/aria_analyzers/nursery/no_noninteractive_tabindex.rs
+++ b/crates/rome_js_analyze/src/aria_analyzers/nursery/no_noninteractive_tabindex.rs
@@ -107,8 +107,9 @@ impl Rule for NoNoninteractiveTabindex {
let element_name = node.name().ok()?.as_jsx_name()?.value_token().ok()?;
let aria_roles = ctx.aria_roles();
+ let attributes = ctx.extract_attributes(&node.attributes());
- if aria_roles.is_not_interactive_element(element_name.text_trimmed()) {
+ if aria_roles.is_not_interactive_element(element_name.text_trimmed(), attributes) {
let tabindex_attribute = node.find_attribute_by_name("tabIndex")?;
let tabindex_attribute_value = tabindex_attribute.initializer()?.value().ok()?;
if attribute_has_negative_tabindex(&tabindex_attribute_value)? {
diff --git a/crates/rome_js_analyze/tests/specs/a11y/noNoninteractiveElementToInteractiveRole/invalid.jsx b/crates/rome_js_analyze/tests/specs/a11y/noNoninteractiveElementToInteractiveRole/invalid.jsx
index 4b3acc507a3..f75bf1d9de6 100644
--- a/crates/rome_js_analyze/tests/specs/a11y/noNoninteractiveElementToInteractiveRole/invalid.jsx
+++ b/crates/rome_js_analyze/tests/specs/a11y/noNoninteractiveElementToInteractiveRole/invalid.jsx
@@ -1,8 +1,82 @@
-var a = ;
-var a = ;
-var a = ;
-var a = ;
-var a = ;
-var a = ;
-var a = ;
- var a = ;
+let a = ;
+let a = ;
+let a = ;
+let a = ;
+let a = ;
+let a = ;
+let a = ;
+let a = ;
+let a = ;
+let a = ;
+let a = ;
+let a = ;
+let a = ;
+let a = ;
+let a =
;
+let a = ;
+let a = ;
+let a = ;
+let a =
;
+let a = ;
+let a = ;
+let a = ;
+let a = ;
+let a = ;
+let a = ;
+let a = ;
+let a = ;
+let a = ;
+let a = ;
+let a = ;
+let a = ;
+let a = ;
+let a = ;
+let a = ;
+let a = ;
+let a = ;
+let a = ;
+let a = ;
+let a = ;
+let a = ;
+let a = ;
+let a = ;
+let a = ;
+let a = ;
+let a = ;
+let a = ;
+let a = ;
+let a = ;
+let a = ;
+let a =
;
+let a = ;
+let a =
;
+let a = ;
+let a = ;
+let a = ;
+let a =
;
+let a = ;
+let a = ;
+let a = ;
+let a = ;
+let a = ;
+let a = ;
+let a = ;
+let a = ;
+let a = ;
+let a = ;
+let a = ;
+let a = ;
+let a = ;
+let a = ;
+let a = ;
+// The element can be a widget, so there is no need to warn against using it.
+// let a = ;
+let a = ;
+let a = ;
+let a = ;
+let a = ;
+let a = ;
+let a = ;
+let a =
;
+let a = ;
+let a = ;
diff --git a/crates/rome_js_analyze/tests/specs/a11y/noNoninteractiveElementToInteractiveRole/invalid.jsx.snap b/crates/rome_js_analyze/tests/specs/a11y/noNoninteractiveElementToInteractiveRole/invalid.jsx.snap
index 08fe44999ba..424e72c9ff1 100644
--- a/crates/rome_js_analyze/tests/specs/a11y/noNoninteractiveElementToInteractiveRole/invalid.jsx.snap
+++ b/crates/rome_js_analyze/tests/specs/a11y/noNoninteractiveElementToInteractiveRole/invalid.jsx.snap
@@ -1,18 +1,91 @@
---
source: crates/rome_js_analyze/tests/spec_tests.rs
-assertion_line: 96
expression: invalid.jsx
---
# Input
```js
-var a = ;
-var a = ;
-var a = ;
-var a = ;
-var a = ;
-var a = ;
-var a = ;
- var a = ;
+let a = ;
+let a = ;
+let a = ;
+let a = ;
+let a = ;
+let a = ;
+let a = ;
+let a = ;
+let a = ;
+let a = ;
+let a = ;
+let a = ;
+let a =
;
+let a = ;
+let a =
;
+let a = ;
+let a = ;
+let a = ;
+let a =
;
+let a = ;
+let a = ;
+let a = ;
+let a = ;
+let a = ;
+let a = ;
+let a = ;
+let a = ;
+let a = ;
+let a = ;
+let a = ;
+let a = ;
+let a = ;
+let a = ;
+let a = ;
+let a = ;
+let a = ;
+let a = ;
+let a = ;
+let a = ;
+let a = ;
+let a = ;
+let a = ;
+let a = ;
+let a = ;
+let a = ;
+let a = ;
+let a = ;
+let a = ;
+let a = ;
+let a =
;
+let a = ;
+let a =
;
+let a = ;
+let a = ;
+let a = ;
+let a =
;
+let a = ;
+let a = ;
+let a = ;
+let a = ;
+let a = ;
+let a = ;
+let a = ;
+let a = ;
+let a = ;
+let a = ;
+let a = ;
+let a = ;
+let a = ;
+let a = ;
+let a = ;
+// The element can be a widget, so there is no need to warn against using it.
+// let a = ;
+let a = ;
+let a = ;
+let a = ;
+let a = ;
+let a = ;
+let a = ;
+let a =
;
+let a = ;
+let a = ;
```
@@ -22,10 +95,10 @@ invalid.jsx:1:13 lint/a11y/noNoninteractiveElementToInteractiveRole ━━━━
! The HTML element h1 is non-interactive and should not have an interactive role.
- > 1 │ var a = ;
+ > 1 │ let a = ;
│ ^^^^^^^^^^^^^^^
- 2 │ var a = ;
- 3 │ var a = ;
+ 2 │ let a = ;
+ 3 │ let a = ;
i Replace h1 with a div or a span.
@@ -37,11 +110,11 @@ invalid.jsx:2:13 lint/a11y/noNoninteractiveElementToInteractiveRole ━━━━
! The HTML element h1 is non-interactive and should not have an interactive role.
- 1 │ var a = ;
- > 2 │ var a = ;
+ 1 │ let a = ;
+ > 2 │ let a = ;
│ ^^^^^^^^^^^^
- 3 │ var a = ;
- 4 │ var a = ;
+ 3 │ let a = ;
+ 4 │ let a = ;
i Replace h1 with a div or a span.
@@ -53,12 +126,12 @@ invalid.jsx:3:13 lint/a11y/noNoninteractiveElementToInteractiveRole ━━━━
! The HTML element h1 is non-interactive and should not have an interactive role.
- 1 │ var a = ;
- 2 │ var a = ;
- > 3 │ var a = ;
+ 1 │ let a = ;
+ 2 │ let a = ;
+ > 3 │ let a = ;
│ ^^^^^^^^^^^^^
- 4 │ var a = ;
- 5 │ var a = ;
+ 4 │ let a = ;
+ 5 │ let a = ;
i Replace h1 with a div or a span.
@@ -70,12 +143,12 @@ invalid.jsx:4:13 lint/a11y/noNoninteractiveElementToInteractiveRole ━━━━
! The HTML element h1 is non-interactive and should not have an interactive role.
- 2 │ var a = ;
- 3 │ var a = ;
- > 4 │ var a = ;
+ 2 │ let a = ;
+ 3 │ let a = ;
+ > 4 │ let a = ;
│ ^^^^^^^^^^^^^^^
- 5 │ var a = ;
- 6 │ var a = ;
+ 5 │ let a = ;
+ 6 │ let a = ;
i Replace h1 with a div or a span.
@@ -87,12 +160,12 @@ invalid.jsx:5:13 lint/a11y/noNoninteractiveElementToInteractiveRole ━━━━
! The HTML element h1 is non-interactive and should not have an interactive role.
- 3 │ var a = ;
- 4 │ var a = ;
- > 5 │ var a = ;
+ 3 │ let a = ;
+ 4 │ let a = ;
+ > 5 │ let a = ;
│ ^^^^^^^^^^^^^^^^
- 6 │ var a = ;
- 7 │ var a = ;
+ 6 │ let a = ;
+ 7 │ let a = ;
i Replace h1 with a div or a span.
@@ -104,12 +177,12 @@ invalid.jsx:6:13 lint/a11y/noNoninteractiveElementToInteractiveRole ━━━━
! The HTML element h1 is non-interactive and should not have an interactive role.
- 4 │ var a = ;
- 5 │ var a = ;
- > 6 │ var a = ;
+ 4 │ let a = ;
+ 5 │ let a = ;
+ > 6 │ let a = ;
│ ^^^^^^^^^^^^^^^^^^
- 7 │ var a = ;
- 8 │ var a = ;
+ 7 │ let a = ;
+ 8 │ let a = ;
i Replace h1 with a div or a span.
@@ -121,16 +194,1256 @@ invalid.jsx:7:13 lint/a11y/noNoninteractiveElementToInteractiveRole ━━━━
! The HTML element h1 is non-interactive and should not have an interactive role.
- 5 │ var a = ;
- 6 │ var a = ;
- > 7 │ var a = ;
+ 5 │ let a = ;
+ 6 │ let a = ;
+ > 7 │ let a = ;
│ ^^^^^^^^^^^^^^^^^^
- 8 │ var a = ;
- 9 │
+ 8 │ let a = ;
+ 9 │ let a = ;
i Replace h1 with a div or a span.
```
+```
+invalid.jsx:8:13 lint/a11y/noNoninteractiveElementToInteractiveRole ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+ ! The HTML element ol is non-interactive and should not have an interactive role.
+
+ 6 │ let a = ;
+ 7 │ let a = ;
+ > 8 │ let a = ;
+ │ ^^^^^^^^^^^^^^^
+ 9 │ let a = ;
+ 10 │ let a = ;
+
+ i Replace ol with a div or a span.
+
+
+```
+
+```
+invalid.jsx:9:15 lint/a11y/noNoninteractiveElementToInteractiveRole ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+ ! The HTML element main is non-interactive and should not have an interactive role.
+
+ 7 │ let a = ;
+ 8 │ let a = ;
+ > 9 │ let a = ;
+ │ ^^^^^^^^^^^^^
+ 10 │ let a = ;
+ 11 │ let a = ;
+
+ i Replace main with a div or a span.
+
+
+```
+
+```
+invalid.jsx:10:18 lint/a11y/noNoninteractiveElementToInteractiveRole ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+ ! The HTML element article is non-interactive and should not have an interactive role.
+
+ 8 │ let a = ;
+ 9 │ let a = ;
+ > 10 │ let a = ;
+ │ ^^^^^^^^^^^^^
+ 11 │ let a = ;
+ 12 │ let a = ;
+
+ i Replace article with a div or a span.
+
+
+```
+
+```
+invalid.jsx:11:16 lint/a11y/noNoninteractiveElementToInteractiveRole ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+ ! The HTML element aside is non-interactive and should not have an interactive role.
+
+ 9 │ let a = ;
+ 10 │ let a = ;
+ > 11 │ let a = ;
+ │ ^^^^^^^^^^^^^
+ 12 │ let a = ;
+ 13 │ let a = ;
+
+ i Replace aside with a div or a span.
+
+
+```
+
+```
+invalid.jsx:12:21 lint/a11y/noNoninteractiveElementToInteractiveRole ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+ ! The HTML element blockquote is non-interactive and should not have an interactive role.
+
+ 10 │ let a = ;
+ 11 │ let a = ;
+ > 12 │ let a = ;
+ │ ^^^^^^^^^^^^^
+ 13 │ let a = ;
+ 14 │ let a = ;
+
+ i Replace blockquote with a div or a span.
+
+
+```
+
+```
+invalid.jsx:13:15 lint/a11y/noNoninteractiveElementToInteractiveRole ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+ ! The HTML element body is non-interactive and should not have an interactive role.
+
+ 11 │ let a = ;
+ 12 │ let a =