feat(linter): add noNoninteractiveElementInteractions rule

[tunamaguro]

Summary

Implement jsx-a11y/no-noninteractive-element-interactions

Close #3936

Test Plan

• Added tests from rule source

[codspeed-hq]

CodSpeed Performance Report

Merging #4358 will not alter performance

_{Comparing tunamaguro:impl-noNoninteractiveElementInteractions (df9cbe0) with main (19abdcf)}

Summary

✅ 99 untouched benchmarks

[dyc3]

This should probably be coming from our biome_aria crate. Preferably generated from the spec.

[tunamaguro]

Thank you for your review!
I’ve updated the code to use biome_aria as suggested (df9cbe0).
However, I noticed a difference in the test results after this change.
For example, the radiogroup role, which inherits from select and should be interactive, is now being treated as non-interactive.

         54 │+# Diagnostics
         55 │+```
         56 │+valid.jsx:49:5 lint/nursery/noNoninteractiveElementInteractions ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
         57 │+
         58 │+  ! Non-interactive element should not have event handler.
         59 │+  
         60 │+  > 49 │     <div role="radiogroup" onClick={() => { }} />
         61 │+       │     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
         62 │+    50 │ </>
         63 │+  
         64 │+  i Consider replace semantically interactive element like <button/> or <a href/>.
         65 │+  
         66 │+

According to WAI-ARIA 1.1 and 1.2, radiogroup inherits from select, but role.rs indicates inheritance from range.

biome/crates/biome_aria/src/roles.rs

Lines 487 to 493 in 19abdcf

	define_role! {
	/// https://www.w3.org/TR/wai-aria-1.1/#radiogroup
	RadiogroupRole {
	PROPS: [("aria-readonly", false), ("aria-required", false)],
	ROLES: ["range"],
	}
	}

https://www.w3.org/TR/wai-aria-1.1/#radiogroup
https://www.w3.org/TR/wai-aria-1.2/#radiogroup

I am not familiar with accessibility, so I apologize if there is any misunderstanding.
Could you please advise me on how to proceed?

[ematipico]

That's probably a bug, right? You could try to add the missing roles and see if that fixes the issue?

[tunamaguro]

I manually added the widget role and the radiogroup is no longer reported.

--- a/crates/biome_aria/src/roles.rs
+++ b/crates/biome_aria/src/roles.rs
@@ -488,7 +488,7 @@ define_role! {
     /// https://www.w3.org/TR/wai-aria-1.1/#radiogroup
     RadiogroupRole {
         PROPS: [("aria-readonly", false), ("aria-required", false)],
-        ROLES: ["range"],
+        ROLES: ["range","select","composite","widget","group"],
     }
 }

Expression: valid.jsx
───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
-old snapshot
+new results
────────────┬──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
  44    44 │     <div role="textbox" onClick={() => { }} />
  45    45 │ 
  46    46 │     {/* Presentation role */}
  47    47 │     <div role="presentation" onClick={() => { }} />
        48 │+
        49 │+
        50 │+    <div role="radiogroup" onClick={() => { }} />
  48    51 │ </>
  49    52 │ ```

If it's not my implementation error, I think it's a bug.