From 40218de17ee322c1d9b497d6d5d8842d972ecd0d Mon Sep 17 00:00:00 2001
From: connorshea <2977353+connorshea@users.noreply.github.com>
Date: Thu, 29 Jan 2026 15:03:23 +0000
Subject: [PATCH] fix(linter): Fix behavior of
 jsx-a11y/no-static-element-interactions rule. (#17817)

AI Disclosure: I needed to reimplement [isNonInteractiveElement.js](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/8f75961d965e47afb88854d324bd32fafde7acfe/src/util/isNonInteractiveElement.js) in Rust, which was very annoying. I did this using Copilot's help and quite a bit of iteration/cross-referencing of the original logic/aria-query/axobject-query. I am fairly certain it's correct now, but I'm not 100% sure. At the very least, it's far more correct than it used to be.

For reference on the original behavior, please see:
- [Original source](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/8f75961d965e47afb88854d324bd32fafde7acfe/src/rules/no-static-element-interactions.js)
- [Original tests](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/8f75961d965e47afb88854d324bd32fafde7acfe/__tests__/src/rules/no-static-element-interactions-test.js)

118 of the test cases were failing after porting everything over, many were dupes because the tests in the previous impl of this rule were based on a handful of the original tests, mixed together with hallucinated/new tests. I have exorcised those demons and fixed the rule behavior to match the upstream now, I believe.

The only tests not ported over were the commented-out "strict mode" tests which I don't really know what to do with. I guess we could just add config settings for each of those tests that match the `handlers` array set in the original rule when using strict mode? See [here](https://github.com/oxc-project/oxc/issues/17816#issuecomment-3727148393) for that list.
---
 .../no_static_element_interactions.rs         | 532 +++++++++++++-----
 ...x_a11y_no_static_element_interactions.snap | 335 +++++++++--
 crates/oxc_linter/src/utils/react.rs          | 238 +++++++-
 3 files changed, 891 insertions(+), 214 deletions(-)

diff --git a/crates/oxc_linter/src/rules/jsx_a11y/no_static_element_interactions.rs b/crates/oxc_linter/src/rules/jsx_a11y/no_static_element_interactions.rs
index eb8a695b7891b..52d16fa2124c9 100644
--- a/crates/oxc_linter/src/rules/jsx_a11y/no_static_element_interactions.rs
+++ b/crates/oxc_linter/src/rules/jsx_a11y/no_static_element_interactions.rs
@@ -4,7 +4,7 @@ use serde::Deserialize;
 
 use oxc_ast::{
     AstKind,
-    ast::{JSXAttributeItem, JSXAttributeValue},
+    ast::{JSXAttributeItem, JSXAttributeValue, JSXExpression},
 };
 use oxc_diagnostics::OxcDiagnostic;
 use oxc_macros::declare_oxc_lint;
@@ -16,8 +16,9 @@ use crate::{
     globals::HTML_TAG,
     rule::{DefaultRuleConfig, Rule},
     utils::{
-        get_element_type, has_jsx_prop, has_jsx_prop_ignore_case, is_hidden_from_screen_reader,
-        is_interactive_element, is_presentation_role,
+        get_element_type, get_prop_value, has_jsx_prop, has_jsx_prop_ignore_case, is_abstract_role,
+        is_hidden_from_screen_reader, is_interactive_element, is_interactive_role,
+        is_non_interactive_element, is_non_interactive_role, is_presentation_role,
     },
 };
 
@@ -82,81 +83,6 @@ declare_oxc_lint!(
     config = NoStaticElementInteractionsConfig,
 );
 
-const INTERACTIVE_ROLES: [&str; 26] = [
-    "button",
-    "checkbox",
-    "columnheader",
-    "combobox",
-    "gridcell",
-    "link",
-    "listbox",
-    "menu",
-    "menubar",
-    "menuitem",
-    "menuitemcheckbox",
-    "menuitemradio",
-    "option",
-    "radio",
-    "radiogroup",
-    "row",
-    "rowheader",
-    "scrollbar",
-    "searchbox",
-    "separator",
-    "slider",
-    "spinbutton",
-    "switch",
-    "tab",
-    "textbox",
-    "treeitem",
-];
-
-const NON_INTERACTIVE_ROLES: [&str; 43] = [
-    "alert",
-    "alertdialog",
-    "application",
-    "article",
-    "banner",
-    "blockquote",
-    "caption",
-    "cell",
-    "complementary",
-    "contentinfo",
-    "definition",
-    "deletion",
-    "dialog",
-    "directory",
-    "document",
-    "feed",
-    "figure",
-    "form",
-    "group",
-    "heading",
-    "img",
-    "insertion",
-    "list",
-    "listitem",
-    "log",
-    "main",
-    "marquee",
-    "math",
-    "navigation",
-    "note",
-    "paragraph",
-    "region",
-    "row",
-    "rowgroup",
-    "search",
-    "status",
-    "table",
-    "tabpanel",
-    "term",
-    "time",
-    "timer",
-    "toolbar",
-    "tooltip",
-];
-
 impl Rule for NoStaticElementInteractions {
     fn from_configuration(value: serde_json::Value) -> Result<Self, serde_json::error::Error> {
         serde_json::from_value::<DefaultRuleConfig<Self>>(value).map(DefaultRuleConfig::into_inner)
@@ -167,11 +93,18 @@ impl Rule for NoStaticElementInteractions {
             return;
         };
 
+        // Note: We skip the handler if it exists with a `null` value, e.g. `<div onClick={null} />`.
         let has_handler = match &self.handlers {
-            Some(handlers) => {
-                handlers.iter().any(|handler| has_jsx_prop(jsx_el, handler.as_str()).is_some())
-            }
-            None => DEFAULT_HANDLERS.iter().any(|handler| has_jsx_prop(jsx_el, handler).is_some()),
+            Some(handlers) => handlers.iter().any(|handler| {
+                has_jsx_prop(jsx_el, handler.as_str())
+                    .and_then(get_prop_value)
+                    .is_some_and(|value| !is_null_value(value))
+            }),
+            None => DEFAULT_HANDLERS.iter().any(|handler| {
+                has_jsx_prop(jsx_el, handler)
+                    .and_then(get_prop_value)
+                    .is_some_and(|value| !is_null_value(value))
+            }),
         };
 
         if !has_handler {
@@ -180,6 +113,7 @@ impl Rule for NoStaticElementInteractions {
 
         let element_type = get_element_type(ctx, jsx_el);
 
+        // Do not test custom JSX elements.
         if !HTML_TAG.contains(element_type.as_ref()) {
             return;
         }
@@ -192,6 +126,15 @@ impl Rule for NoStaticElementInteractions {
             return;
         }
 
+        if is_non_interactive_element(&element_type, jsx_el) {
+            return;
+        }
+
+        // This rule has no opinion on abstract roles, so just ignore them.
+        if is_abstract_role(ctx, jsx_el) {
+            return;
+        }
+
         let Some(JSXAttributeItem::Attribute(role_attr)) = has_jsx_prop_ignore_case(jsx_el, "role")
         else {
             ctx.diagnostic(no_static_element_interactions_diagnostic(jsx_el.name.span()));
@@ -209,13 +152,10 @@ impl Rule for NoStaticElementInteractions {
                 let roles: Vec<&str> = role_str.split_whitespace().collect();
 
                 if let Some(first_role) = roles.first() {
-                    if INTERACTIVE_ROLES.contains(first_role) {
+                    if is_interactive_role(first_role) {
                         return;
                     }
-                    if NON_INTERACTIVE_ROLES.contains(first_role) {
-                        ctx.diagnostic(no_static_element_interactions_diagnostic(
-                            jsx_el.name.span(),
-                        ));
+                    if is_non_interactive_role(first_role) {
                         return;
                     }
                 }
@@ -232,35 +172,279 @@ impl Rule for NoStaticElementInteractions {
     }
 }
 
+fn is_null_value(value: &JSXAttributeValue) -> bool {
+    matches!(
+        value,
+        JSXAttributeValue::ExpressionContainer(container)
+            if matches!(container.expression, JSXExpression::NullLiteral(_))
+    )
+}
+
 #[test]
 fn test() {
     use crate::tester::Tester;
 
     let pass = vec![
-        (r"<div />;", None),
-        (r"<div className='foo' />;", None),
-        (r"<div className='foo' onClick={() => {}} role='button' />;", None),
-        (r"<div className='foo' onKeyDown={() => {}} role='button' />;", None),
-        (r"<div onClick={() => {}} role='button' />;", None),
-        (r"<button onClick={() => {}} className='foo' />;", None),
-        (r"<input type='text' onClick={() => {}} />;", None),
+        (r"<div />", None),
+        (r#"<div className="foo" />"#, None),
+        (r#"<div className="foo" {...props} />"#, None),
+        (r"<div onClick={() => void 0} aria-hidden />", None),
+        (r"<div onClick={() => void 0} aria-hidden={true} />", None),
+        (r"<div onClick={null} />", None),
+        // All flavors of input
+        (r"<input onClick={() => void 0} />", None),
+        (r#"<input type="button" onClick={() => void 0} />"#, None),
+        (r#"<input type="checkbox" onClick={() => void 0} />"#, None),
+        (r#"<input type="color" onClick={() => void 0} />"#, None),
+        (r#"<input type="date" onClick={() => void 0} />"#, None),
+        (r#"<input type="datetime" onClick={() => void 0} />"#, None),
+        (r#"<input type="datetime-local" onClick={() => void 0} />"#, None),
+        (r#"<input type="email" onClick={() => void 0} />"#, None),
+        (r#"<input type="file" onClick={() => void 0} />"#, None),
+        (r#"<input type="hidden" onClick={() => void 0} />"#, None),
+        (r#"<input type="image" onClick={() => void 0} />"#, None),
+        (r#"<input type="month" onClick={() => void 0} />"#, None),
+        (r#"<input type="number" onClick={() => void 0} />"#, None),
+        (r#"<input type="password" onClick={() => void 0} />"#, None),
+        (r#"<input type="radio" onClick={() => void 0} />"#, None),
+        (r#"<input type="range" onClick={() => void 0} />"#, None),
+        (r#"<input type="reset" onClick={() => void 0} />"#, None),
+        (r#"<input type="search" onClick={() => void 0} />"#, None),
+        (r#"<input type="submit" onClick={() => void 0} />"#, None),
+        (r#"<input type="tel" onClick={() => void 0} />"#, None),
+        (r#"<input type="text" onClick={() => void 0} />"#, None),
+        (r#"<input type="time" onClick={() => void 0} />"#, None),
+        (r#"<input type="url" onClick={() => void 0} />"#, None),
+        (r#"<input type="week" onClick={() => void 0} />"#, None),
+        // End all flavors of input
+        (r#"<button onClick={() => void 0} className="foo" />"#, None),
+        (r"<datalist onClick={() => {}} />;", None),
+        (r"<menuitem onClick={() => {}} />;", None),
+        (r#"<option onClick={() => void 0} className="foo" />"#, None),
+        (r#"<select onClick={() => void 0} className="foo" />"#, None),
+        (r#"<textarea onClick={() => void 0} className="foo" />"#, None),
+        (r#"<a onClick={() => void 0} href="http://x.y.z" />"#, None),
+        (r#"<a onClick={() => void 0} href="http://x.y.z" tabIndex="0" />"#, None),
+        (r"<audio onClick={() => {}} />;", None),
+        (r"<form onClick={() => {}} />;", None),
+        (r"<form onSubmit={() => {}} />;", None),
+        // HTML elements attributed with an interactive role
+        (r#"<div role="button" onClick={() => {}} />;"#, None),
+        (r#"<div role="checkbox" onClick={() => {}} />;"#, None),
+        (r#"<div role="columnheader" onClick={() => {}} />;"#, None),
+        (r#"<div role="combobox" onClick={() => {}} />;"#, None),
+        (r#"<div role="form" onClick={() => {}} />;"#, None),
+        (r#"<div role="gridcell" onClick={() => {}} />;"#, None),
+        (r#"<div role="link" onClick={() => {}} />;"#, None),
+        (r#"<div role="menuitem" onClick={() => {}} />;"#, None),
+        (r#"<div role="menuitemcheckbox" onClick={() => {}} />;"#, None),
+        (r#"<div role="menuitemradio" onClick={() => {}} />;"#, None),
+        (r#"<div role="option" onClick={() => {}} />;"#, None),
+        (r#"<div role="radio" onClick={() => {}} />;"#, None),
+        (r#"<div role="rowheader" onClick={() => {}} />;"#, None),
+        (r#"<div role="searchbox" onClick={() => {}} />;"#, None),
+        (r#"<div role="slider" onClick={() => {}} />;"#, None),
+        (r#"<div role="spinbutton" onClick={() => {}} />;"#, None),
+        (r#"<div role="switch" onClick={() => {}} />;"#, None),
+        (r#"<div role="tab" onClick={() => {}} />;"#, None),
+        (r#"<div role="textbox" onClick={() => {}} />;"#, None),
+        (r#"<div role="treeitem" onClick={() => {}} />;"#, None),
+        // Presentation is a special case role that indicates intentional static semantics
+        (r#"<div role="presentation" onClick={() => {}} />;"#, None),
+        (r#"<div role="presentation" onKeyDown={() => {}} />;"#, None),
+        // HTML elements with an inherent, non-interactive role
+        (r"<address onClick={() => {}} />;", None),
+        (r"<article onClick={() => {}} />;", None),
+        (r"<article onDblClick={() => void 0} />;", None),
+        (r"<aside onClick={() => {}} />;", None),
+        (r"<blockquote onClick={() => {}} />;", None),
+        (r"<br onClick={() => {}} />;", None),
+        (r"<canvas onClick={() => {}} />;", None),
+        (r"<caption onClick={() => {}} />;", None),
+        (r"<code onClick={() => {}} />;", None),
+        (r"<dd onClick={() => {}} />;", None),
+        (r"<del onClick={() => {}} />;", None),
+        (r"<details onClick={() => {}} />;", None),
+        (r"<dfn onClick={() => {}} />;", None),
+        (r"<dir onClick={() => {}} />;", None),
+        (r"<dl onClick={() => {}} />;", None),
+        (r"<dt onClick={() => {}} />;", None),
+        (r"<em onClick={() => {}} />;", None),
+        (r"<embed onClick={() => {}} />;", None),
+        (r"<fieldset onClick={() => {}} />;", None),
+        (r"<figcaption onClick={() => {}} />;", None),
+        (r"<figure onClick={() => {}} />;", None),
+        (r"<footer onClick={() => {}} />;", None),
+        (r"<h1 onClick={() => {}} />;", None),
+        (r"<h2 onClick={() => {}} />;", None),
+        (r"<h3 onClick={() => {}} />;", None),
+        (r"<h4 onClick={() => {}} />;", None),
+        (r"<h5 onClick={() => {}} />;", None),
+        (r"<h6 onClick={() => {}} />;", None),
+        (r"<hr onClick={() => {}} />;", None),
+        (r"<html onClick={() => {}} />;", None),
+        (r"<iframe onClick={() => {}} />;", None),
+        (r"<img onClick={() => {}} />;", None),
+        (r"<ins onClick={() => {}} />;", None),
+        (r"<label onClick={() => {}} />;", None),
+        (r"<legend onClick={() => {}} />;", None),
+        (r"<li onClick={() => {}} />;", None),
+        (r"<main onClick={() => void 0} />;", None),
+        (r"<mark onClick={() => {}} />;", None),
+        (r"<marquee onClick={() => {}} />;", None),
+        (r"<menu onClick={() => {}} />;", None),
+        (r"<meter onClick={() => {}} />;", None),
+        (r"<nav onClick={() => {}} />;", None),
+        (r"<ol onClick={() => {}} />;", None),
+        (r"<optgroup onClick={() => {}} />;", None),
+        (r"<output onClick={() => {}} />;", None),
+        (r"<p onClick={() => {}} />;", None),
+        (r"<pre onClick={() => {}} />;", None),
+        (r"<progress onClick={() => {}} />;", None),
+        (r"<ruby onClick={() => {}} />;", None),
+        (r#"<section onClick={() => {}} aria-label="Aa" />;"#, None),
+        (r#"<section onClick={() => {}} aria-labelledby="js_1" />;"#, None),
+        (r"<strong onClick={() => {}} />;", None),
+        (r"<sub onClick={() => {}} />;", None),
+        (r"<summary onClick={() => {}} />;", None),
+        (r"<sup onClick={() => {}} />;", None),
+        (r"<table onClick={() => {}} />;", None),
+        (r"<tbody onClick={() => {}} />;", None),
+        (r"<tfoot onClick={() => {}} />;", None),
+        (r"<th onClick={() => {}} />;", None),
+        (r"<thead onClick={() => {}} />;", None),
+        (r"<time onClick={() => {}} />;", None),
+        (r"<tr onClick={() => {}} />;", None),
+        (r"<video onClick={() => {}} />;", None),
+        (r"<ul onClick={() => {}} />;", None),
+        // HTML elements attributed with an abstract role
+        (r#"<div role="command" onClick={() => {}} />;"#, None),
+        (r#"<div role="composite" onClick={() => {}} />;"#, None),
+        (r#"<div role="input" onClick={() => {}} />;"#, None),
+        (r#"<div role="landmark" onClick={() => {}} />;"#, None),
+        (r#"<div role="range" onClick={() => {}} />;"#, None),
+        (r#"<div role="roletype" onClick={() => {}} />;"#, None),
+        (r#"<div role="sectionhead" onClick={() => {}} />;"#, None),
+        (r#"<div role="select" onClick={() => {}} />;"#, None),
+        (r#"<div role="structure" onClick={() => {}} />;"#, None),
+        (r#"<div role="widget" onClick={() => {}} />;"#, None),
+        (r#"<div role="window" onClick={() => {}} />;"#, None),
+        // HTML elements attributed with a non-interactive role
+        (r#"<div role="alert" onClick={() => {}} />;"#, None),
+        (r#"<div role="alertdialog" onClick={() => {}} />;"#, None),
+        (r#"<div role="application" onClick={() => {}} />;"#, None),
+        (r#"<div role="article" onClick={() => {}} />;"#, None),
+        (r#"<div role="banner" onClick={() => {}} />;"#, None),
+        (r#"<div role="cell" onClick={() => {}} />;"#, None),
+        (r#"<div role="complementary" onClick={() => {}} />;"#, None),
+        (r#"<div role="contentinfo" onClick={() => {}} />;"#, None),
+        (r#"<div role="definition" onClick={() => {}} />;"#, None),
+        (r#"<div role="dialog" onClick={() => {}} />;"#, None),
+        (r#"<div role="directory" onClick={() => {}} />;"#, None),
+        (r#"<div role="document" onClick={() => {}} />;"#, None),
+        (r#"<div role="feed" onClick={() => {}} />;"#, None),
+        (r#"<div role="figure" onClick={() => {}} />;"#, None),
+        (r#"<div role="grid" onClick={() => {}} />;"#, None),
+        (r#"<div role="group" onClick={() => {}} />;"#, None),
+        (r#"<div role="heading" onClick={() => {}} />;"#, None),
+        (r#"<div role="img" onClick={() => {}} />;"#, None),
+        (r#"<div role="list" onClick={() => {}} />;"#, None),
+        (r#"<div role="listbox" onClick={() => {}} />;"#, None),
+        (r#"<div role="listitem" onClick={() => {}} />;"#, None),
+        (r#"<div role="log" onClick={() => {}} />;"#, None),
+        (r#"<div role="main" onClick={() => {}} />;"#, None),
+        (r#"<div role="marquee" onClick={() => {}} />;"#, None),
+        (r#"<div role="math" onClick={() => {}} />;"#, None),
+        (r#"<div role="menu" onClick={() => {}} />;"#, None),
+        (r#"<div role="menubar" onClick={() => {}} />;"#, None),
+        (r#"<div role="navigation" onClick={() => {}} />;"#, None),
+        (r#"<div role="note" onClick={() => {}} />;"#, None),
+        (r#"<div role="progressbar" onClick={() => {}} />;"#, None),
+        (r#"<div role="radiogroup" onClick={() => {}} />;"#, None),
+        (r#"<div role="region" onClick={() => {}} />;"#, None),
+        (r#"<div role="row" onClick={() => {}} />;"#, None),
+        (r#"<div role="rowgroup" onClick={() => {}} />;"#, None),
+        (r#"<div role="section" onClick={() => {}} />;"#, None),
+        (r#"<div role="search" onClick={() => {}} />;"#, None),
+        (r#"<div role="separator" onClick={() => {}} />;"#, None),
+        (r#"<div role="scrollbar" onClick={() => {}} />;"#, None),
+        (r#"<div role="status" onClick={() => {}} />;"#, None),
+        (r#"<div role="table" onClick={() => {}} />;"#, None),
+        (r#"<div role="tablist" onClick={() => {}} />;"#, None),
+        (r#"<div role="tabpanel" onClick={() => {}} />;"#, None),
+        (r#"<div role="term" onClick={() => {}} />;"#, None),
+        (r#"<div role="timer" onClick={() => {}} />;"#, None),
+        (r#"<div role="toolbar" onClick={() => {}} />;"#, None),
+        (r#"<div role="tooltip" onClick={() => {}} />;"#, None),
+        (r#"<div role="tree" onClick={() => {}} />;"#, None),
+        (r#"<div role="treegrid" onClick={() => {}} />;"#, None),
+        // All the possible handlers
+        ("<div onCopy={() => {}} />;", None),
+        ("<div onCut={() => {}} />;", None),
+        ("<div onPaste={() => {}} />;", None),
+        ("<div onCompositionEnd={() => {}} />;", None),
+        ("<div onCompositionStart={() => {}} />;", None),
+        ("<div onCompositionUpdate={() => {}} />;", None),
+        ("<div onChange={() => {}} />;", None),
+        ("<div onInput={() => {}} />;", None),
+        ("<div onSubmit={() => {}} />;", None),
+        ("<div onSelect={() => {}} />;", None),
+        ("<div onTouchCancel={() => {}} />;", None),
+        ("<div onTouchEnd={() => {}} />;", None),
+        ("<div onTouchMove={() => {}} />;", None),
+        ("<div onTouchStart={() => {}} />;", None),
+        ("<div onScroll={() => {}} />;", None),
+        ("<div onWheel={() => {}} />;", None),
+        ("<div onAbort={() => {}} />;", None),
+        ("<div onCanPlay={() => {}} />;", None),
+        ("<div onCanPlayThrough={() => {}} />;", None),
+        ("<div onDurationChange={() => {}} />;", None),
+        ("<div onEmptied={() => {}} />;", None),
+        ("<div onEncrypted={() => {}} />;", None),
+        ("<div onEnded={() => {}} />;", None),
+        ("<div onError={() => {}} />;", None),
+        ("<div onLoadedData={() => {}} />;", None),
+        ("<div onLoadedMetadata={() => {}} />;", None),
+        ("<div onLoadStart={() => {}} />;", None),
+        ("<div onPause={() => {}} />;", None),
+        ("<div onPlay={() => {}} />;", None),
+        ("<div onPlaying={() => {}} />;", None),
+        ("<div onProgress={() => {}} />;", None),
+        ("<div onRateChange={() => {}} />;", None),
+        ("<div onSeeked={() => {}} />;", None),
+        ("<div onSeeking={() => {}} />;", None),
+        ("<div onStalled={() => {}} />;", None),
+        ("<div onSuspend={() => {}} />;", None),
+        ("<div onTimeUpdate={() => {}} />;", None),
+        ("<div onVolumeChange={() => {}} />;", None),
+        ("<div onWaiting={() => {}} />;", None),
+        ("<div onLoad={() => {}} />;", None),
+        ("<div onError={() => {}} />;", None),
+        ("<div onAnimationStart={() => {}} />;", None),
+        ("<div onAnimationEnd={() => {}} />;", None),
+        ("<div onAnimationIteration={() => {}} />;", None),
+        // other tests
+        (r#"<div className="foo" onClick={() => {}} role="button" />;"#, None),
+        (r#"<div className="foo" onKeyDown={() => {}} role="button" />;"#, None),
+        (r#"<div onClick={() => {}} role="button" />;"#, None),
+        (r#"<button onClick={() => {}} className="foo" />;"#, None),
+        (r#"<input type="text" onClick={() => {}} />;"#, None),
         (r"<input onClick={() => {}} />;", None),
-        (r"<button onClick={() => {}} className='foo' />;", None),
+        (r#"<button onClick={() => {}} className="foo" />;"#, None),
         (r"<select onClick={() => {}} />;", None),
         (r"<textarea onClick={() => {}} />;", None),
-        (r"<a tabIndex='0' onClick={() => {}} href='http://x.y.z' />;", None),
-        (r"<input type='hidden' onClick={() => {}} />;", None),
-        (r"<div onClick={() => {}} role='presentation' />;", None),
-        (r"<div onClick={() => {}} role='none' />;", None),
-        (r"<div onMouseDown={() => {}} role='button' />;", None),
-        (r"<div onMouseUp={() => {}} role='button' />;", None),
-        (r"<div onKeyPress={() => {}} role='button' />;", None),
-        (r"<div onKeyDown={() => {}} role='button' />;", None),
-        (r"<div onKeyUp={() => {}} role='button' />;", None),
+        (r#"<input type="hidden" onClick={() => {}} />;"#, None),
+        (r#"<div onClick={() => {}} role="presentation" />;"#, None),
+        (r#"<div onClick={() => {}} role="none" />;"#, None),
+        (r#"<div onMouseDown={() => {}} role="button" />;"#, None),
+        (r#"<div onMouseUp={() => {}} role="button" />;"#, None),
+        (r#"<div onKeyPress={() => {}} role="button" />;"#, None),
+        (r#"<div onKeyDown={() => {}} role="button" />;"#, None),
+        (r#"<div onKeyUp={() => {}} role="button" />;"#, None),
         (r"<div onClick={() => {}} aria-hidden />;", None),
         (r"<div onClick={() => {}} aria-hidden={true} />;", None),
-        (r"<div onClick={() => {}} aria-hidden={false} role='button' />;", None),
-        (r"<input onClick={() => {}} type='submit' />;", None),
+        (r#"<div onClick={() => {}} aria-hidden={false} role="button" />;"#, None),
+        (r#"<input onClick={() => {}} type="submit" />;"#, None),
         (r"<TestComponent onClick={() => {}} />;", None),
         (r"<Button onClick={() => {}} />;", None),
         (
@@ -272,37 +456,14 @@ fn test() {
             Some(serde_json::json!([{ "allowExpressionValues": true }])),
         ),
         (r"<div onDblClick={() => {}} />", Some(serde_json::json!([{ "handlers": ["onClick"] }]))),
-        (r"<div onClick={() => {}} role='checkbox' />;", None),
-        (r"<div onClick={() => {}} role='link' />;", None),
-        (r"<div onClick={() => {}} role='menuitem' />;", None),
-        (r"<div onClick={() => {}} role='option' />;", None),
-        (r"<div onClick={() => {}} role='radio' />;", None),
-        (r"<div onClick={() => {}} role='searchbox' />;", None),
-        (r"<div onClick={() => {}} role='switch' />;", None),
-        (r"<div onClick={() => {}} role='textbox' />;", None),
-        (r"<div onClick={() => {}} role='combobox' />;", None),
-        (r"<div onClick={() => {}} role='slider' />;", None),
-        (r"<div onClick={() => {}} role='spinbutton' />;", None),
-        (r"<div onClick={() => {}} role='tab' />;", None),
+        // Test that it works regardless of order.
+        (r#"<div onClick={() => {}} role="tab" />;"#, None),
+        // Test that it works regardless of extra attributes.
+        (r#"<div role="tab" onClick={() => {}} style="color: red;" />;"#, None),
     ];
 
     let fail = vec![
-        (r"<div onClick={() => {}} />;", None),
-        (r"<div onMouseDown={() => {}} />;", None),
-        (r"<div onMouseUp={() => {}} />;", None),
-        (r"<div onKeyPress={() => {}} />;", None),
-        (r"<div onKeyDown={() => {}} />;", None),
-        (r"<div onKeyUp={() => {}} />;", None),
-        (r"<section onClick={() => {}} />;", None),
-        (r"<main onClick={() => {}} />;", None),
-        (r"<article onClick={() => {}} />;", None),
-        (r"<header onClick={() => {}} />;", None),
-        (r"<footer onClick={() => {}} />;", None),
-        (r"<div onClick={() => {}} role='article' />;", None),
-        (r"<div onClick={() => {}} role='navigation' />;", None),
-        (r"<div onClick={() => {}} role='main' />;", None),
         (r"<div onClick={() => {}} aria-hidden={false} />;", None),
-        (r"<a onClick={() => {}} />;", None),
         (r#"<a tabIndex="0" onClick={() => {}} />"#, None),
         (
             r"<div onClick={() => {}} role={ROLE} />",
@@ -317,24 +478,93 @@ fn test() {
             Some(serde_json::json!([{ "handlers": ["onClick", "onDblClick"] }])),
         ),
         (r"<span onClick={() => {}} />;", None),
-        (r"<div onClick={() => {}} role='document' />;", None),
-        (r"<div onClick={() => {}} role='list' />;", None),
-        (r"<div onClick={() => {}} role='listitem' />;", None),
-        (r"<div onClick={() => {}} role='heading' />;", None),
-        (r"<div onClick={() => {}} role='img' />;", None),
-        (r"<div onClick={() => {}} role='form' />;", None),
-        (r"<div onClick={() => {}} role='region' />;", None),
-        (r"<div onClick={() => {}} role='banner' />;", None),
-        (r"<div onClick={() => {}} role='contentinfo' />;", None),
-        (r"<div onClick={() => {}} role='complementary' />;", None),
-        (r"<div onClick={() => {}} role='status' />;", None),
-        (r"<div onClick={() => {}} role='log' />;", None),
-        (r"<div onClick={() => {}} role='timer' />;", None),
-        (r"<div onClick={() => {}} role='alert' />;", None),
-        (r"<div onClick={() => {}} role='dialog' />;", None),
-        (r"<div onClick={() => {}} role='alertdialog' />;", None),
-        (r"<div onClick={() => {}} role='tabpanel' />;", None),
-        (r"<div onClick={() => {}} role='tooltip' />;", None),
+        // Start of ported tests.
+        (r"<div onClick={() => void 0} />;", None),
+        (r"<div onClick={() => void 0} role={undefined} />;", None),
+        (r"<div onClick={() => void 0} {...props} />;", None),
+        (r"<div onKeyUp={() => void 0} aria-hidden={false} />;", None),
+        // Static elements; no inherent role
+        (r"<a onClick={() => {}} />;", None),
+        (r"<a onClick={() => void 0} />", None),
+        (r#"<a tabIndex="0" onClick={() => void 0} />"#, None),
+        (r"<acronym onClick={() => {}} />;", None),
+        (r"<applet onClick={() => {}} />;", None),
+        (r"<area onClick={() => {}} />;", None),
+        (r"<b onClick={() => {}} />;", None),
+        (r"<base onClick={() => {}} />;", None),
+        (r"<bdi onClick={() => {}} />;", None),
+        (r"<bdo onClick={() => {}} />;", None),
+        (r"<big onClick={() => {}} />;", None),
+        (r"<blink onClick={() => {}} />;", None),
+        (r"<body onClick={() => {}} />;", None),
+        (r"<center onClick={() => {}} />;", None),
+        (r"<cite onClick={() => {}} />;", None),
+        (r"<col onClick={() => {}} />;", None),
+        (r"<colgroup onClick={() => {}} />;", None),
+        (r"<content onClick={() => {}} />;", None),
+        (r"<data onClick={() => {}} />;", None),
+        (r"<font onClick={() => {}} />;", None),
+        (r"<frame onClick={() => {}} />;", None),
+        (r"<frameset onClick={() => {}} />;", None),
+        (r"<head onClick={() => {}} />;", None),
+        (r"<header onClick={() => {}} />;", None),
+        (r"<hgroup onClick={() => {}} />;", None),
+        (r"<i onClick={() => {}} />;", None),
+        (r"<kbd onClick={() => {}} />;", None),
+        (r"<keygen onClick={() => {}} />;", None),
+        (r"<map onClick={() => {}} />;", None),
+        (r"<meta onClick={() => {}} />;", None),
+        (r"<noembed onClick={() => {}} />;", None),
+        (r"<noscript onClick={() => {}} />;", None),
+        (r"<object onClick={() => {}} />;", None),
+        (r"<param onClick={() => {}} />;", None),
+        (r"<picture onClick={() => {}} />;", None),
+        (r"<q onClick={() => {}} />;", None),
+        (r"<rp onClick={() => {}} />;", None),
+        (r"<rt onClick={() => {}} />;", None),
+        (r"<rtc onClick={() => {}} />;", None),
+        (r"<s onClick={() => {}} />;", None),
+        (r"<samp onClick={() => {}} />;", None),
+        (r"<script onClick={() => {}} />;", None),
+        (r"<section onClick={() => {}} />;", None),
+        (r"<small onClick={() => {}} />;", None),
+        (r"<source onClick={() => {}} />;", None),
+        (r"<spacer onClick={() => {}} />;", None),
+        (r"<span onClick={() => {}} />;", None),
+        (r"<strike onClick={() => {}} />;", None),
+        (r"<style onClick={() => {}} />;", None),
+        (r"<title onClick={() => {}} />;", None),
+        (r"<track onClick={() => {}} />;", None),
+        (r"<tt onClick={() => {}} />;", None),
+        (r"<u onClick={() => {}} />;", None),
+        (r"<var onClick={() => {}} />;", None),
+        (r"<wbr onClick={() => {}} />;", None),
+        (r"<xmp onClick={() => {}} />;", None),
+        // Handlers
+        (r"<div onKeyDown={() => {}} />;", None),
+        (r"<div onKeyPress={() => {}} />;", None),
+        (r"<div onKeyUp={() => {}} />;", None),
+        (r"<div onClick={() => {}} />;", None),
+        (r"<div onMouseDown={() => {}} />;", None),
+        (r"<div onMouseUp={() => {}} />;", None),
+        // More possible handlers, these only fail in "strict mode" which does not allow expressions and has handlers unset, which results in all
+        // focus, keyboard, and mouse handlers being activated.
+        // (r"<div onContextMenu={() => {}} />;", None),
+        // (r"<div onDblClick={() => {}} />;", None),
+        // (r"<div onDoubleClick={() => {}} />;", None),
+        // (r"<div onDrag={() => {}} />;", None),
+        // (r"<div onDragEnd={() => {}} />;", None),
+        // (r"<div onDragEnter={() => {}} />;", None),
+        // (r"<div onDragExit={() => {}} />;", None),
+        // (r"<div onDragLeave={() => {}} />;", None),
+        // (r"<div onDragOver={() => {}} />;", None),
+        // (r"<div onDragStart={() => {}} />;", None),
+        // (r"<div onDrop={() => {}} />;", None),
+        // (r"<div onMouseEnter={() => {}} />;", None),
+        // (r"<div onMouseLeave={() => {}} />;", None),
+        // (r"<div onMouseMove={() => {}} />;", None),
+        // (r"<div onMouseOut={() => {}} />;", None),
+        // (r"<div onMouseOver={() => {}} />;", None),
     ];
 
     Tester::new(NoStaticElementInteractions::NAME, NoStaticElementInteractions::PLUGIN, pass, fail)
diff --git a/crates/oxc_linter/src/snapshots/jsx_a11y_no_static_element_interactions.snap b/crates/oxc_linter/src/snapshots/jsx_a11y_no_static_element_interactions.snap
index 2f11cd1b80dab..1b64cab21196b 100644
--- a/crates/oxc_linter/src/snapshots/jsx_a11y_no_static_element_interactions.snap
+++ b/crates/oxc_linter/src/snapshots/jsx_a11y_no_static_element_interactions.snap
@@ -3,273 +3,504 @@ source: crates/oxc_linter/src/tester.rs
 ---
   ⚠ eslint-plugin-jsx-a11y(no-static-element-interactions): Static HTML elements with event handlers require a role.
    ╭─[no_static_element_interactions.tsx:1:2]
- 1 │ <div onClick={() => {}} />;
+ 1 │ <div onClick={() => {}} aria-hidden={false} />;
    ·  ───
    ╰────
   help: Add a role attribute to this element, or use a semantic HTML element instead.
 
   ⚠ eslint-plugin-jsx-a11y(no-static-element-interactions): Static HTML elements with event handlers require a role.
    ╭─[no_static_element_interactions.tsx:1:2]
- 1 │ <div onMouseDown={() => {}} />;
+ 1 │ <a tabIndex="0" onClick={() => {}} />
+   ·  ─
+   ╰────
+  help: Add a role attribute to this element, or use a semantic HTML element instead.
+
+  ⚠ eslint-plugin-jsx-a11y(no-static-element-interactions): Static HTML elements with event handlers require a role.
+   ╭─[no_static_element_interactions.tsx:1:2]
+ 1 │ <div onClick={() => {}} role={ROLE} />
    ·  ───
    ╰────
   help: Add a role attribute to this element, or use a semantic HTML element instead.
 
   ⚠ eslint-plugin-jsx-a11y(no-static-element-interactions): Static HTML elements with event handlers require a role.
    ╭─[no_static_element_interactions.tsx:1:2]
- 1 │ <div onMouseUp={() => {}} />;
+ 1 │ <div onClick={() => {}} role={isButton ? "button" : "link"} />
    ·  ───
    ╰────
   help: Add a role attribute to this element, or use a semantic HTML element instead.
 
   ⚠ eslint-plugin-jsx-a11y(no-static-element-interactions): Static HTML elements with event handlers require a role.
    ╭─[no_static_element_interactions.tsx:1:2]
- 1 │ <div onKeyPress={() => {}} />;
+ 1 │ <div onDblClick={() => {}} />
    ·  ───
    ╰────
   help: Add a role attribute to this element, or use a semantic HTML element instead.
 
   ⚠ eslint-plugin-jsx-a11y(no-static-element-interactions): Static HTML elements with event handlers require a role.
    ╭─[no_static_element_interactions.tsx:1:2]
- 1 │ <div onKeyDown={() => {}} />;
+ 1 │ <span onClick={() => {}} />;
+   ·  ────
+   ╰────
+  help: Add a role attribute to this element, or use a semantic HTML element instead.
+
+  ⚠ eslint-plugin-jsx-a11y(no-static-element-interactions): Static HTML elements with event handlers require a role.
+   ╭─[no_static_element_interactions.tsx:1:2]
+ 1 │ <div onClick={() => void 0} />;
    ·  ───
    ╰────
   help: Add a role attribute to this element, or use a semantic HTML element instead.
 
   ⚠ eslint-plugin-jsx-a11y(no-static-element-interactions): Static HTML elements with event handlers require a role.
    ╭─[no_static_element_interactions.tsx:1:2]
- 1 │ <div onKeyUp={() => {}} />;
+ 1 │ <div onClick={() => void 0} role={undefined} />;
    ·  ───
    ╰────
   help: Add a role attribute to this element, or use a semantic HTML element instead.
 
   ⚠ eslint-plugin-jsx-a11y(no-static-element-interactions): Static HTML elements with event handlers require a role.
    ╭─[no_static_element_interactions.tsx:1:2]
- 1 │ <section onClick={() => {}} />;
-   ·  ───────
+ 1 │ <div onClick={() => void 0} {...props} />;
+   ·  ───
    ╰────
   help: Add a role attribute to this element, or use a semantic HTML element instead.
 
   ⚠ eslint-plugin-jsx-a11y(no-static-element-interactions): Static HTML elements with event handlers require a role.
    ╭─[no_static_element_interactions.tsx:1:2]
- 1 │ <main onClick={() => {}} />;
-   ·  ────
+ 1 │ <div onKeyUp={() => void 0} aria-hidden={false} />;
+   ·  ───
    ╰────
   help: Add a role attribute to this element, or use a semantic HTML element instead.
 
   ⚠ eslint-plugin-jsx-a11y(no-static-element-interactions): Static HTML elements with event handlers require a role.
    ╭─[no_static_element_interactions.tsx:1:2]
- 1 │ <article onClick={() => {}} />;
+ 1 │ <a onClick={() => {}} />;
+   ·  ─
+   ╰────
+  help: Add a role attribute to this element, or use a semantic HTML element instead.
+
+  ⚠ eslint-plugin-jsx-a11y(no-static-element-interactions): Static HTML elements with event handlers require a role.
+   ╭─[no_static_element_interactions.tsx:1:2]
+ 1 │ <a onClick={() => void 0} />
+   ·  ─
+   ╰────
+  help: Add a role attribute to this element, or use a semantic HTML element instead.
+
+  ⚠ eslint-plugin-jsx-a11y(no-static-element-interactions): Static HTML elements with event handlers require a role.
+   ╭─[no_static_element_interactions.tsx:1:2]
+ 1 │ <a tabIndex="0" onClick={() => void 0} />
+   ·  ─
+   ╰────
+  help: Add a role attribute to this element, or use a semantic HTML element instead.
+
+  ⚠ eslint-plugin-jsx-a11y(no-static-element-interactions): Static HTML elements with event handlers require a role.
+   ╭─[no_static_element_interactions.tsx:1:2]
+ 1 │ <acronym onClick={() => {}} />;
    ·  ───────
    ╰────
   help: Add a role attribute to this element, or use a semantic HTML element instead.
 
   ⚠ eslint-plugin-jsx-a11y(no-static-element-interactions): Static HTML elements with event handlers require a role.
    ╭─[no_static_element_interactions.tsx:1:2]
- 1 │ <header onClick={() => {}} />;
+ 1 │ <applet onClick={() => {}} />;
    ·  ──────
    ╰────
   help: Add a role attribute to this element, or use a semantic HTML element instead.
 
   ⚠ eslint-plugin-jsx-a11y(no-static-element-interactions): Static HTML elements with event handlers require a role.
    ╭─[no_static_element_interactions.tsx:1:2]
- 1 │ <footer onClick={() => {}} />;
-   ·  ──────
+ 1 │ <area onClick={() => {}} />;
+   ·  ────
    ╰────
   help: Add a role attribute to this element, or use a semantic HTML element instead.
 
   ⚠ eslint-plugin-jsx-a11y(no-static-element-interactions): Static HTML elements with event handlers require a role.
    ╭─[no_static_element_interactions.tsx:1:2]
- 1 │ <div onClick={() => {}} role='article' />;
+ 1 │ <b onClick={() => {}} />;
+   ·  ─
+   ╰────
+  help: Add a role attribute to this element, or use a semantic HTML element instead.
+
+  ⚠ eslint-plugin-jsx-a11y(no-static-element-interactions): Static HTML elements with event handlers require a role.
+   ╭─[no_static_element_interactions.tsx:1:2]
+ 1 │ <base onClick={() => {}} />;
+   ·  ────
+   ╰────
+  help: Add a role attribute to this element, or use a semantic HTML element instead.
+
+  ⚠ eslint-plugin-jsx-a11y(no-static-element-interactions): Static HTML elements with event handlers require a role.
+   ╭─[no_static_element_interactions.tsx:1:2]
+ 1 │ <bdi onClick={() => {}} />;
    ·  ───
    ╰────
   help: Add a role attribute to this element, or use a semantic HTML element instead.
 
   ⚠ eslint-plugin-jsx-a11y(no-static-element-interactions): Static HTML elements with event handlers require a role.
    ╭─[no_static_element_interactions.tsx:1:2]
- 1 │ <div onClick={() => {}} role='navigation' />;
+ 1 │ <bdo onClick={() => {}} />;
    ·  ───
    ╰────
   help: Add a role attribute to this element, or use a semantic HTML element instead.
 
   ⚠ eslint-plugin-jsx-a11y(no-static-element-interactions): Static HTML elements with event handlers require a role.
    ╭─[no_static_element_interactions.tsx:1:2]
- 1 │ <div onClick={() => {}} role='main' />;
+ 1 │ <big onClick={() => {}} />;
    ·  ───
    ╰────
   help: Add a role attribute to this element, or use a semantic HTML element instead.
 
   ⚠ eslint-plugin-jsx-a11y(no-static-element-interactions): Static HTML elements with event handlers require a role.
    ╭─[no_static_element_interactions.tsx:1:2]
- 1 │ <div onClick={() => {}} aria-hidden={false} />;
+ 1 │ <blink onClick={() => {}} />;
+   ·  ─────
+   ╰────
+  help: Add a role attribute to this element, or use a semantic HTML element instead.
+
+  ⚠ eslint-plugin-jsx-a11y(no-static-element-interactions): Static HTML elements with event handlers require a role.
+   ╭─[no_static_element_interactions.tsx:1:2]
+ 1 │ <body onClick={() => {}} />;
+   ·  ────
+   ╰────
+  help: Add a role attribute to this element, or use a semantic HTML element instead.
+
+  ⚠ eslint-plugin-jsx-a11y(no-static-element-interactions): Static HTML elements with event handlers require a role.
+   ╭─[no_static_element_interactions.tsx:1:2]
+ 1 │ <center onClick={() => {}} />;
+   ·  ──────
+   ╰────
+  help: Add a role attribute to this element, or use a semantic HTML element instead.
+
+  ⚠ eslint-plugin-jsx-a11y(no-static-element-interactions): Static HTML elements with event handlers require a role.
+   ╭─[no_static_element_interactions.tsx:1:2]
+ 1 │ <cite onClick={() => {}} />;
+   ·  ────
+   ╰────
+  help: Add a role attribute to this element, or use a semantic HTML element instead.
+
+  ⚠ eslint-plugin-jsx-a11y(no-static-element-interactions): Static HTML elements with event handlers require a role.
+   ╭─[no_static_element_interactions.tsx:1:2]
+ 1 │ <col onClick={() => {}} />;
    ·  ───
    ╰────
   help: Add a role attribute to this element, or use a semantic HTML element instead.
 
   ⚠ eslint-plugin-jsx-a11y(no-static-element-interactions): Static HTML elements with event handlers require a role.
    ╭─[no_static_element_interactions.tsx:1:2]
- 1 │ <a onClick={() => {}} />;
-   ·  ─
+ 1 │ <colgroup onClick={() => {}} />;
+   ·  ────────
    ╰────
   help: Add a role attribute to this element, or use a semantic HTML element instead.
 
   ⚠ eslint-plugin-jsx-a11y(no-static-element-interactions): Static HTML elements with event handlers require a role.
    ╭─[no_static_element_interactions.tsx:1:2]
- 1 │ <a tabIndex="0" onClick={() => {}} />
+ 1 │ <content onClick={() => {}} />;
+   ·  ───────
+   ╰────
+  help: Add a role attribute to this element, or use a semantic HTML element instead.
+
+  ⚠ eslint-plugin-jsx-a11y(no-static-element-interactions): Static HTML elements with event handlers require a role.
+   ╭─[no_static_element_interactions.tsx:1:2]
+ 1 │ <data onClick={() => {}} />;
+   ·  ────
+   ╰────
+  help: Add a role attribute to this element, or use a semantic HTML element instead.
+
+  ⚠ eslint-plugin-jsx-a11y(no-static-element-interactions): Static HTML elements with event handlers require a role.
+   ╭─[no_static_element_interactions.tsx:1:2]
+ 1 │ <font onClick={() => {}} />;
+   ·  ────
+   ╰────
+  help: Add a role attribute to this element, or use a semantic HTML element instead.
+
+  ⚠ eslint-plugin-jsx-a11y(no-static-element-interactions): Static HTML elements with event handlers require a role.
+   ╭─[no_static_element_interactions.tsx:1:2]
+ 1 │ <frame onClick={() => {}} />;
+   ·  ─────
+   ╰────
+  help: Add a role attribute to this element, or use a semantic HTML element instead.
+
+  ⚠ eslint-plugin-jsx-a11y(no-static-element-interactions): Static HTML elements with event handlers require a role.
+   ╭─[no_static_element_interactions.tsx:1:2]
+ 1 │ <frameset onClick={() => {}} />;
+   ·  ────────
+   ╰────
+  help: Add a role attribute to this element, or use a semantic HTML element instead.
+
+  ⚠ eslint-plugin-jsx-a11y(no-static-element-interactions): Static HTML elements with event handlers require a role.
+   ╭─[no_static_element_interactions.tsx:1:2]
+ 1 │ <head onClick={() => {}} />;
+   ·  ────
+   ╰────
+  help: Add a role attribute to this element, or use a semantic HTML element instead.
+
+  ⚠ eslint-plugin-jsx-a11y(no-static-element-interactions): Static HTML elements with event handlers require a role.
+   ╭─[no_static_element_interactions.tsx:1:2]
+ 1 │ <header onClick={() => {}} />;
+   ·  ──────
+   ╰────
+  help: Add a role attribute to this element, or use a semantic HTML element instead.
+
+  ⚠ eslint-plugin-jsx-a11y(no-static-element-interactions): Static HTML elements with event handlers require a role.
+   ╭─[no_static_element_interactions.tsx:1:2]
+ 1 │ <hgroup onClick={() => {}} />;
+   ·  ──────
+   ╰────
+  help: Add a role attribute to this element, or use a semantic HTML element instead.
+
+  ⚠ eslint-plugin-jsx-a11y(no-static-element-interactions): Static HTML elements with event handlers require a role.
+   ╭─[no_static_element_interactions.tsx:1:2]
+ 1 │ <i onClick={() => {}} />;
    ·  ─
    ╰────
   help: Add a role attribute to this element, or use a semantic HTML element instead.
 
   ⚠ eslint-plugin-jsx-a11y(no-static-element-interactions): Static HTML elements with event handlers require a role.
    ╭─[no_static_element_interactions.tsx:1:2]
- 1 │ <div onClick={() => {}} role={ROLE} />
+ 1 │ <kbd onClick={() => {}} />;
    ·  ───
    ╰────
   help: Add a role attribute to this element, or use a semantic HTML element instead.
 
   ⚠ eslint-plugin-jsx-a11y(no-static-element-interactions): Static HTML elements with event handlers require a role.
    ╭─[no_static_element_interactions.tsx:1:2]
- 1 │ <div onClick={() => {}} role={isButton ? "button" : "link"} />
-   ·  ───
+ 1 │ <keygen onClick={() => {}} />;
+   ·  ──────
    ╰────
   help: Add a role attribute to this element, or use a semantic HTML element instead.
 
   ⚠ eslint-plugin-jsx-a11y(no-static-element-interactions): Static HTML elements with event handlers require a role.
    ╭─[no_static_element_interactions.tsx:1:2]
- 1 │ <div onDblClick={() => {}} />
+ 1 │ <map onClick={() => {}} />;
    ·  ───
    ╰────
   help: Add a role attribute to this element, or use a semantic HTML element instead.
 
   ⚠ eslint-plugin-jsx-a11y(no-static-element-interactions): Static HTML elements with event handlers require a role.
    ╭─[no_static_element_interactions.tsx:1:2]
- 1 │ <span onClick={() => {}} />;
+ 1 │ <meta onClick={() => {}} />;
    ·  ────
    ╰────
   help: Add a role attribute to this element, or use a semantic HTML element instead.
 
   ⚠ eslint-plugin-jsx-a11y(no-static-element-interactions): Static HTML elements with event handlers require a role.
    ╭─[no_static_element_interactions.tsx:1:2]
- 1 │ <div onClick={() => {}} role='document' />;
-   ·  ───
+ 1 │ <noembed onClick={() => {}} />;
+   ·  ───────
    ╰────
   help: Add a role attribute to this element, or use a semantic HTML element instead.
 
   ⚠ eslint-plugin-jsx-a11y(no-static-element-interactions): Static HTML elements with event handlers require a role.
    ╭─[no_static_element_interactions.tsx:1:2]
- 1 │ <div onClick={() => {}} role='list' />;
-   ·  ───
+ 1 │ <noscript onClick={() => {}} />;
+   ·  ────────
    ╰────
   help: Add a role attribute to this element, or use a semantic HTML element instead.
 
   ⚠ eslint-plugin-jsx-a11y(no-static-element-interactions): Static HTML elements with event handlers require a role.
    ╭─[no_static_element_interactions.tsx:1:2]
- 1 │ <div onClick={() => {}} role='listitem' />;
-   ·  ───
+ 1 │ <object onClick={() => {}} />;
+   ·  ──────
    ╰────
   help: Add a role attribute to this element, or use a semantic HTML element instead.
 
   ⚠ eslint-plugin-jsx-a11y(no-static-element-interactions): Static HTML elements with event handlers require a role.
    ╭─[no_static_element_interactions.tsx:1:2]
- 1 │ <div onClick={() => {}} role='heading' />;
-   ·  ───
+ 1 │ <param onClick={() => {}} />;
+   ·  ─────
    ╰────
   help: Add a role attribute to this element, or use a semantic HTML element instead.
 
   ⚠ eslint-plugin-jsx-a11y(no-static-element-interactions): Static HTML elements with event handlers require a role.
    ╭─[no_static_element_interactions.tsx:1:2]
- 1 │ <div onClick={() => {}} role='img' />;
-   ·  ───
+ 1 │ <picture onClick={() => {}} />;
+   ·  ───────
    ╰────
   help: Add a role attribute to this element, or use a semantic HTML element instead.
 
   ⚠ eslint-plugin-jsx-a11y(no-static-element-interactions): Static HTML elements with event handlers require a role.
    ╭─[no_static_element_interactions.tsx:1:2]
- 1 │ <div onClick={() => {}} role='form' />;
-   ·  ───
+ 1 │ <q onClick={() => {}} />;
+   ·  ─
    ╰────
   help: Add a role attribute to this element, or use a semantic HTML element instead.
 
   ⚠ eslint-plugin-jsx-a11y(no-static-element-interactions): Static HTML elements with event handlers require a role.
    ╭─[no_static_element_interactions.tsx:1:2]
- 1 │ <div onClick={() => {}} role='region' />;
-   ·  ───
+ 1 │ <rp onClick={() => {}} />;
+   ·  ──
    ╰────
   help: Add a role attribute to this element, or use a semantic HTML element instead.
 
   ⚠ eslint-plugin-jsx-a11y(no-static-element-interactions): Static HTML elements with event handlers require a role.
    ╭─[no_static_element_interactions.tsx:1:2]
- 1 │ <div onClick={() => {}} role='banner' />;
-   ·  ───
+ 1 │ <rt onClick={() => {}} />;
+   ·  ──
    ╰────
   help: Add a role attribute to this element, or use a semantic HTML element instead.
 
   ⚠ eslint-plugin-jsx-a11y(no-static-element-interactions): Static HTML elements with event handlers require a role.
    ╭─[no_static_element_interactions.tsx:1:2]
- 1 │ <div onClick={() => {}} role='contentinfo' />;
+ 1 │ <rtc onClick={() => {}} />;
    ·  ───
    ╰────
   help: Add a role attribute to this element, or use a semantic HTML element instead.
 
   ⚠ eslint-plugin-jsx-a11y(no-static-element-interactions): Static HTML elements with event handlers require a role.
    ╭─[no_static_element_interactions.tsx:1:2]
- 1 │ <div onClick={() => {}} role='complementary' />;
+ 1 │ <s onClick={() => {}} />;
+   ·  ─
+   ╰────
+  help: Add a role attribute to this element, or use a semantic HTML element instead.
+
+  ⚠ eslint-plugin-jsx-a11y(no-static-element-interactions): Static HTML elements with event handlers require a role.
+   ╭─[no_static_element_interactions.tsx:1:2]
+ 1 │ <samp onClick={() => {}} />;
+   ·  ────
+   ╰────
+  help: Add a role attribute to this element, or use a semantic HTML element instead.
+
+  ⚠ eslint-plugin-jsx-a11y(no-static-element-interactions): Static HTML elements with event handlers require a role.
+   ╭─[no_static_element_interactions.tsx:1:2]
+ 1 │ <script onClick={() => {}} />;
+   ·  ──────
+   ╰────
+  help: Add a role attribute to this element, or use a semantic HTML element instead.
+
+  ⚠ eslint-plugin-jsx-a11y(no-static-element-interactions): Static HTML elements with event handlers require a role.
+   ╭─[no_static_element_interactions.tsx:1:2]
+ 1 │ <section onClick={() => {}} />;
+   ·  ───────
+   ╰────
+  help: Add a role attribute to this element, or use a semantic HTML element instead.
+
+  ⚠ eslint-plugin-jsx-a11y(no-static-element-interactions): Static HTML elements with event handlers require a role.
+   ╭─[no_static_element_interactions.tsx:1:2]
+ 1 │ <small onClick={() => {}} />;
+   ·  ─────
+   ╰────
+  help: Add a role attribute to this element, or use a semantic HTML element instead.
+
+  ⚠ eslint-plugin-jsx-a11y(no-static-element-interactions): Static HTML elements with event handlers require a role.
+   ╭─[no_static_element_interactions.tsx:1:2]
+ 1 │ <source onClick={() => {}} />;
+   ·  ──────
+   ╰────
+  help: Add a role attribute to this element, or use a semantic HTML element instead.
+
+  ⚠ eslint-plugin-jsx-a11y(no-static-element-interactions): Static HTML elements with event handlers require a role.
+   ╭─[no_static_element_interactions.tsx:1:2]
+ 1 │ <spacer onClick={() => {}} />;
+   ·  ──────
+   ╰────
+  help: Add a role attribute to this element, or use a semantic HTML element instead.
+
+  ⚠ eslint-plugin-jsx-a11y(no-static-element-interactions): Static HTML elements with event handlers require a role.
+   ╭─[no_static_element_interactions.tsx:1:2]
+ 1 │ <span onClick={() => {}} />;
+   ·  ────
+   ╰────
+  help: Add a role attribute to this element, or use a semantic HTML element instead.
+
+  ⚠ eslint-plugin-jsx-a11y(no-static-element-interactions): Static HTML elements with event handlers require a role.
+   ╭─[no_static_element_interactions.tsx:1:2]
+ 1 │ <strike onClick={() => {}} />;
+   ·  ──────
+   ╰────
+  help: Add a role attribute to this element, or use a semantic HTML element instead.
+
+  ⚠ eslint-plugin-jsx-a11y(no-static-element-interactions): Static HTML elements with event handlers require a role.
+   ╭─[no_static_element_interactions.tsx:1:2]
+ 1 │ <style onClick={() => {}} />;
+   ·  ─────
+   ╰────
+  help: Add a role attribute to this element, or use a semantic HTML element instead.
+
+  ⚠ eslint-plugin-jsx-a11y(no-static-element-interactions): Static HTML elements with event handlers require a role.
+   ╭─[no_static_element_interactions.tsx:1:2]
+ 1 │ <title onClick={() => {}} />;
+   ·  ─────
+   ╰────
+  help: Add a role attribute to this element, or use a semantic HTML element instead.
+
+  ⚠ eslint-plugin-jsx-a11y(no-static-element-interactions): Static HTML elements with event handlers require a role.
+   ╭─[no_static_element_interactions.tsx:1:2]
+ 1 │ <track onClick={() => {}} />;
+   ·  ─────
+   ╰────
+  help: Add a role attribute to this element, or use a semantic HTML element instead.
+
+  ⚠ eslint-plugin-jsx-a11y(no-static-element-interactions): Static HTML elements with event handlers require a role.
+   ╭─[no_static_element_interactions.tsx:1:2]
+ 1 │ <tt onClick={() => {}} />;
+   ·  ──
+   ╰────
+  help: Add a role attribute to this element, or use a semantic HTML element instead.
+
+  ⚠ eslint-plugin-jsx-a11y(no-static-element-interactions): Static HTML elements with event handlers require a role.
+   ╭─[no_static_element_interactions.tsx:1:2]
+ 1 │ <u onClick={() => {}} />;
+   ·  ─
+   ╰────
+  help: Add a role attribute to this element, or use a semantic HTML element instead.
+
+  ⚠ eslint-plugin-jsx-a11y(no-static-element-interactions): Static HTML elements with event handlers require a role.
+   ╭─[no_static_element_interactions.tsx:1:2]
+ 1 │ <var onClick={() => {}} />;
    ·  ───
    ╰────
   help: Add a role attribute to this element, or use a semantic HTML element instead.
 
   ⚠ eslint-plugin-jsx-a11y(no-static-element-interactions): Static HTML elements with event handlers require a role.
    ╭─[no_static_element_interactions.tsx:1:2]
- 1 │ <div onClick={() => {}} role='status' />;
+ 1 │ <wbr onClick={() => {}} />;
    ·  ───
    ╰────
   help: Add a role attribute to this element, or use a semantic HTML element instead.
 
   ⚠ eslint-plugin-jsx-a11y(no-static-element-interactions): Static HTML elements with event handlers require a role.
    ╭─[no_static_element_interactions.tsx:1:2]
- 1 │ <div onClick={() => {}} role='log' />;
+ 1 │ <xmp onClick={() => {}} />;
    ·  ───
    ╰────
   help: Add a role attribute to this element, or use a semantic HTML element instead.
 
   ⚠ eslint-plugin-jsx-a11y(no-static-element-interactions): Static HTML elements with event handlers require a role.
    ╭─[no_static_element_interactions.tsx:1:2]
- 1 │ <div onClick={() => {}} role='timer' />;
+ 1 │ <div onKeyDown={() => {}} />;
    ·  ───
    ╰────
   help: Add a role attribute to this element, or use a semantic HTML element instead.
 
   ⚠ eslint-plugin-jsx-a11y(no-static-element-interactions): Static HTML elements with event handlers require a role.
    ╭─[no_static_element_interactions.tsx:1:2]
- 1 │ <div onClick={() => {}} role='alert' />;
+ 1 │ <div onKeyPress={() => {}} />;
    ·  ───
    ╰────
   help: Add a role attribute to this element, or use a semantic HTML element instead.
 
   ⚠ eslint-plugin-jsx-a11y(no-static-element-interactions): Static HTML elements with event handlers require a role.
    ╭─[no_static_element_interactions.tsx:1:2]
- 1 │ <div onClick={() => {}} role='dialog' />;
+ 1 │ <div onKeyUp={() => {}} />;
    ·  ───
    ╰────
   help: Add a role attribute to this element, or use a semantic HTML element instead.
 
   ⚠ eslint-plugin-jsx-a11y(no-static-element-interactions): Static HTML elements with event handlers require a role.
    ╭─[no_static_element_interactions.tsx:1:2]
- 1 │ <div onClick={() => {}} role='alertdialog' />;
+ 1 │ <div onClick={() => {}} />;
    ·  ───
    ╰────
   help: Add a role attribute to this element, or use a semantic HTML element instead.
 
   ⚠ eslint-plugin-jsx-a11y(no-static-element-interactions): Static HTML elements with event handlers require a role.
    ╭─[no_static_element_interactions.tsx:1:2]
- 1 │ <div onClick={() => {}} role='tabpanel' />;
+ 1 │ <div onMouseDown={() => {}} />;
    ·  ───
    ╰────
   help: Add a role attribute to this element, or use a semantic HTML element instead.
 
   ⚠ eslint-plugin-jsx-a11y(no-static-element-interactions): Static HTML elements with event handlers require a role.
    ╭─[no_static_element_interactions.tsx:1:2]
- 1 │ <div onClick={() => {}} role='tooltip' />;
+ 1 │ <div onMouseUp={() => {}} />;
    ·  ───
    ╰────
   help: Add a role attribute to this element, or use a semantic HTML element instead.
diff --git a/crates/oxc_linter/src/utils/react.rs b/crates/oxc_linter/src/utils/react.rs
index 9e84bd3f7a516..61acb38910c10 100644
--- a/crates/oxc_linter/src/utils/react.rs
+++ b/crates/oxc_linter/src/utils/react.rs
@@ -14,6 +14,7 @@ use oxc_ecmascript::{ToBoolean, WithoutGlobalReferenceInformation};
 use oxc_semantic::AstNode;
 use oxc_syntax::scope::ScopeFlags;
 
+use crate::globals::HTML_TAG;
 use crate::{LintContext, OxlintSettings};
 
 pub fn is_create_element_call(call_expr: &CallExpression) -> bool {
@@ -119,19 +120,53 @@ pub fn is_presentation_role(jsx_opening_el: &JSXOpeningElement) -> bool {
     matches!(get_string_literal_prop_value(role), Some("presentation" | "none"))
 }
 
-// TODO: Should re-implement based on
-// https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/4c7e7815c12a797587bb8e3cdced7f3003848964/src/util/isInteractiveElement.js
+// ref: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/8f75961d965e47afb88854d324bd32fafde7acfe/src/util/isAbstractRole.js
+pub fn is_abstract_role<'a>(ctx: &LintContext<'a>, jsx_opening_el: &JSXOpeningElement<'a>) -> bool {
+    // Do not test custom JSX components, we do not know what
+    // low-level DOM element this maps to.
+    let element_type = get_element_type(ctx, jsx_opening_el);
+    if !HTML_TAG.contains(element_type.as_ref()) {
+        return false;
+    }
+
+    let Some(role) = has_jsx_prop(jsx_opening_el, "role") else {
+        return false;
+    };
+
+    matches!(
+        get_string_literal_prop_value(role),
+        Some(
+            "command"
+                | "composite"
+                | "input"
+                | "landmark"
+                | "range"
+                | "roletype"
+                | "section"
+                | "sectionhead"
+                | "select"
+                | "structure"
+                | "widget"
+                | "window"
+        )
+    )
+}
+
+// ref: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/4c7e7815c12a797587bb8e3cdced7f3003848964/src/util/isInteractiveElement.js
 //
-// Until then, use simplified version by https://html.spec.whatwg.org/multipage/dom.html#interactive-content
+// See also https://html.spec.whatwg.org/multipage/dom.html#interactive-content
 pub fn is_interactive_element(element_type: &str, jsx_opening_el: &JSXOpeningElement) -> bool {
     // Interactive contents are...
-    // - button, details, embed, iframe, label, select, textarea
-    // - input (if the `type` attribute is not in the Hidden state)
-    // - a (if the `href` attribute is present)
-    // - audio, video (if the `controls` attribute is present)
-    // - img (if the `usemap` attribute is present)
+    // - a, area (when they have `href`)
+    // - audio, video
+    // - button, canvas, datalist, details, embed, iframe, label, menuitem,
+    //   option, select, summary, textarea, td, th, tr
+    // - input (unless `type` is hidden)
+    // - img (when `usemap` is present)
     match element_type {
-        "button" | "details" | "embed" | "iframe" | "label" | "select" | "textarea" => true,
+        "audio" | "button" | "canvas" | "datalist" | "details" | "embed" | "iframe" | "label"
+        | "menuitem" | "option" | "select" | "summary" | "td" | "th" | "tr" | "textarea"
+        | "video" => true,
         "input" => {
             if let Some(input_type) = has_jsx_prop(jsx_opening_el, "type")
                 && get_string_literal_prop_value(input_type)
@@ -141,13 +176,194 @@ pub fn is_interactive_element(element_type: &str, jsx_opening_el: &JSXOpeningEle
             }
             true
         }
-        "a" => has_jsx_prop(jsx_opening_el, "href").is_some(),
-        "audio" | "video" => has_jsx_prop(jsx_opening_el, "controls").is_some(),
+        "a" | "area" => has_jsx_prop(jsx_opening_el, "href").is_some(),
         "img" => has_jsx_prop(jsx_opening_el, "usemap").is_some(),
         _ => false,
     }
 }
 
+// ref: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/8f75961d965e47afb88854d324bd32fafde7acfe/src/util/isNonInteractiveElement.js
+pub fn is_non_interactive_element(element_type: &str, jsx_opening_el: &JSXOpeningElement) -> bool {
+    // Do not test custom JSX components, we do not know what
+    // low-level DOM element this maps to.
+    if !HTML_TAG.contains(element_type.as_ref()) {
+        return false;
+    }
+
+    match element_type {
+        // <header> elements do not technically have semantics, unless the
+        // element is a direct descendant of <body>, and this plugin cannot
+        // reliably test that.
+        // @see https://www.w3.org/TR/wai-aria-practices/examples/landmarks/banner.html
+        "header" => false,
+        // Only treat <section> as non-interactive when it has an accessible name.
+        "section" => {
+            has_jsx_prop_ignore_case(jsx_opening_el, "aria-label").is_some()
+                || has_jsx_prop_ignore_case(jsx_opening_el, "aria-labelledby").is_some()
+        }
+        _ => NON_INTERACTIVE_ELEMENT_TYPES.contains(&element_type),
+    }
+}
+
+// Based on https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/8f75961d965e47afb88854d324bd32fafde7acfe/src/util/isNonInteractiveElement.js
+const NON_INTERACTIVE_ELEMENT_TYPES: [&str; 59] = [
+    "abbr",
+    "address",
+    "article",
+    "aside",
+    "blockquote",
+    "br",
+    "caption",
+    "code",
+    "dd",
+    "del",
+    "details",
+    "dfn",
+    "dialog",
+    "dir",
+    "dl",
+    "dt",
+    "em",
+    "fieldset",
+    "figcaption",
+    "figure",
+    "footer",
+    "form",
+    "h1",
+    "h2",
+    "h3",
+    "h4",
+    "h5",
+    "h6",
+    "hr",
+    "html",
+    "iframe",
+    "img",
+    "ins",
+    "label",
+    "legend",
+    "li",
+    "main",
+    "mark",
+    "marquee",
+    "menu",
+    "meter",
+    "nav",
+    "ol",
+    "optgroup",
+    "output",
+    "p",
+    "pre",
+    "progress",
+    "ruby",
+    "section",
+    "strong",
+    "sub",
+    "sup",
+    "table",
+    "tbody",
+    "tfoot",
+    "thead",
+    "time",
+    "ul",
+];
+
+const INTERACTIVE_ROLES: [&str; 27] = [
+    "button",
+    "checkbox",
+    "columnheader",
+    "combobox",
+    "gridcell",
+    "link",
+    "listbox",
+    "menu",
+    "menubar",
+    "menuitem",
+    "menuitemcheckbox",
+    "menuitemradio",
+    "option",
+    "radio",
+    "radiogroup",
+    "row",
+    "rowheader",
+    "scrollbar",
+    "searchbox",
+    "separator",
+    "slider",
+    "spinbutton",
+    "switch",
+    "tab",
+    "textbox",
+    // Per the original rule:
+    // > 'toolbar' does not descend from widget, but it does support
+    // > aria-activedescendant, thus in practice we treat it as a widget.
+    "toolbar",
+    "treeitem",
+];
+
+const NON_INTERACTIVE_ROLES: [&str; 47] = [
+    "alert",
+    "alertdialog",
+    "application",
+    "article",
+    "banner",
+    "blockquote",
+    "caption",
+    "cell",
+    "complementary",
+    "contentinfo",
+    "definition",
+    "deletion",
+    "dialog",
+    "directory",
+    "document",
+    "feed",
+    "figure",
+    "form",
+    "grid",
+    "group",
+    "heading",
+    "img",
+    "insertion",
+    "list",
+    "listitem",
+    "log",
+    "main",
+    "marquee",
+    "math",
+    "navigation",
+    "note",
+    "paragraph",
+    // per the original impl:
+    // >  The `progressbar` is descended from `widget`, but in practice, its
+    // > value is always `readonly`, so we treat it as a non-interactive role.
+    "progressbar",
+    "region",
+    "row",
+    "rowgroup",
+    "search",
+    "status",
+    "table",
+    "tablist",
+    "tabpanel",
+    "term",
+    "time",
+    "timer",
+    "tooltip",
+    "tree",
+    "treegrid",
+];
+
+// ref: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/8f75961d965e47afb88854d324bd32fafde7acfe/src/util/isInteractiveRole.js
+pub fn is_interactive_role(role: &str) -> bool {
+    INTERACTIVE_ROLES.contains(&role)
+}
+
+// ref: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/8f75961d965e47afb88854d324bd32fafde7acfe/src/util/isInteractiveRole.js
+pub fn is_non_interactive_role(role: &str) -> bool {
+    NON_INTERACTIVE_ROLES.contains(&role)
+}
+
 const PRAGMA: &str = "React";
 const CREATE_CLASS: &str = "createReactClass";