feat(lint/noStaticElementInteractions): add rule #2981

ryo-ebata · 2024-05-25T16:23:45Z

Summary

Enforce that non-interactive, visible elements (such as <div>) that have click handlers use the role attribute.

Implements #527

Test Plan

Added snaps for valid/invalid cases.

Basically, it conforms to the test cases of eslint-plugin-jsx-a11y/no-static-element-interactions, and test cases that cannot be handled by the resources within Biome are handled individually.

ref:
https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/__tests__/src/rules/no-static-element-interactions-test.js

codspeed-hq · 2024-05-25T17:01:51Z

CodSpeed Performance Report

Merging #2981 will not alter performance

_{Comparing ryo-ebata:ryo-ebata/no-static-element-interactions (71c5004) with main (a4b050b)}

Summary

✅ 90 untouched benchmarks

crates/biome_js_analyze/src/lint/nursery/no_static_element_interactions.rs

… function

…d move `CATEGORIES_TO_CHECK` to const

ryo-ebata · 2024-06-02T09:56:57Z

@unvalley

As this comment states, the following two methods were created to bridge the gap between eslint-plugin-jsx-a11y and Biome

is_valid_element
is_invalid_element

However, I thought it was necessary to optimize the Biome definition based on the official documentation, rather than discussing the two options of which way to go.

Is this an issue that should be addressed in this PR?
If necessary, we will address it in this PR, but I think there is an option to address it in another Issue, PR due to the number of elements.

crates/biome_js_analyze/src/lint/nursery/no_static_element_interactions.rs

unvalley · 2024-06-03T17:26:38Z

@ryo-ebata

Is this an issue that should be addressed in this PR?
If necessary, we will address it in this PR, but I think there is an option to address it in another Issue, PR due to the number of elements.

Let's address that in another PR.

unvalley · 2024-06-03T18:41:28Z

crates/biome_js_analyze/src/lint/nursery/no_static_element_interactions.rs

+        m.insert("clipboard", vec!["onCopy", "onCut", "onPaste"]);
+        m.insert("composition", vec!["onCompositionEnd", "onCompositionStart", "onCompositionUpdate"]);
+        m.insert("keyboard", vec!["onKeyDown", "onKeyPress", "onKeyUp"]);
+        m.insert("focus", vec!["onFocus", "onBlur"]);
+        m.insert("form", vec!["onChange", "onInput", "onSubmit"]);
+        m.insert("mouse", vec![
+            "onClick", "onContextMenu", "onDblClick", "onDoubleClick", "onDrag", "onDragEnd",
+            "onDragEnter", "onDragExit", "onDragLeave", "onDragOver", "onDragStart", "onDrop",
+            "onMouseDown", "onMouseEnter", "onMouseLeave", "onMouseMove", "onMouseOut",
+            "onMouseOver", "onMouseUp"
+        ]);
+        m.insert("selection", vec!["onSelect"]);
+        m.insert("touch", vec!["onTouchCancel", "onTouchEnd", "onTouchMove", "onTouchStart"]);
+        m.insert("ui", vec!["onScroll"]);
+        m.insert("wheel", vec!["onWheel"]);
+        m.insert("media", vec![
+            "onAbort", "onCanPlay", "onCanPlayThrough", "onDurationChange", "onEmptied",
+            "onEncrypted", "onEnded", "onError", "onLoadedData", "onLoadedMetadata", "onLoadStart",
+            "onPause", "onPlay", "onPlaying", "onProgress", "onRateChange", "onSeeked", "onSeeking",
+            "onStalled", "onSuspend", "onTimeUpdate", "onVolumeChange", "onWaiting"
+        ]);
+        m.insert("image", vec!["onLoad", "onError"]);
+        m.insert("animation", vec!["onAnimationStart", "onAnimationEnd", "onAnimationIteration"]);
+        m.insert("transition", vec!["onTransitionEnd"]);


Do we need elements (and handlers) other than in CATEGORIES_TO_CHECK?
We only use focus, keyboard and mouse.

@unvalley
In ESlint, interactions are managed in independent files named eventHandlersByType.
ref: https://github.com/jsx-eslint/jsx-ast-utils/blob/main/src/eventHandlers.js

Among them, ESlint uses focus, keyboard and mouse by default.
ref: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/974275353598e9407c76bd4a50c331a953755cee/src/rules/no-static-element-interactions.js#L33-L37

In other words, the EVENT_TO_HANDLERS created in this PR was originally intended to be used for other rules, etc., but since it is currently unclear where to place them, they are implemented this way.

Thanks. So, I guess it means we don't have any other rules that need this CATEGORIES_TO_CHECK yet.

Alright, we can locate the hashmap here, but I suggest commenting out elements that aren't used here. It may be a waste of overhead. Insertion for focus, keyboard, and mouse is enough.

@unvalley
I see, I understand!
I'll fix this.

Sorry to barge in during this review. I think this code would benefit from a refactor. I don't think it's a good custom to try to replicate JS code in Rust. For example, this code, while it's created once via lazy_static, still creates a bunch of vectors that are created at runtime (heap).

Instead, why not create simple arrays?

Also, I think we should explain what this code is. It's copied from another source, which is completely fine, but there's no comment that explains what are the keys and what are the values, how they are used and what they are meant to be.

For example composition -> [...]. What's composition? Where is it coming from? Is it an HTML element? Is it a role? Remember that in Biome, we want to aim for good standards, DX-wise and coding-wise.

@unvalley
fixed in this a9aa880

@unvalley
Sorry, I didn't address to additional comments, please leave them as they are.

@ematipico @unvalley
Thank you for pointing this out.
As you said, it was causing overhead, so we defined it as a fixed-length array.

Also modified the comment to describe what is stored in this array and added the URL to the MDN reference describing each event handler

fixed in this commit b330131

crates/biome_js_analyze/src/lint/nursery/no_static_element_interactions.rs

ryo-ebata · 2024-06-11T14:45:03Z

@unvalley
Sorry for the delay in correcting the code in response to your comment...
Please check back as I have responded to your comments and corrected the points you raised!

…lement-interactions

crates/biome_js_analyze/src/lint/nursery/no_static_element_interactions.rs

…eractions.rs

ematipico · 2024-06-13T09:22:33Z

crates/biome_js_analyze/src/lint/nursery/no_static_element_interactions.rs

+        m.insert("clipboard", vec!["onCopy", "onCut", "onPaste"]);
+        m.insert("composition", vec!["onCompositionEnd", "onCompositionStart", "onCompositionUpdate"]);
+        m.insert("keyboard", vec!["onKeyDown", "onKeyPress", "onKeyUp"]);
+        m.insert("focus", vec!["onFocus", "onBlur"]);
+        m.insert("form", vec!["onChange", "onInput", "onSubmit"]);
+        m.insert("mouse", vec![
+            "onClick", "onContextMenu", "onDblClick", "onDoubleClick", "onDrag", "onDragEnd",
+            "onDragEnter", "onDragExit", "onDragLeave", "onDragOver", "onDragStart", "onDrop",
+            "onMouseDown", "onMouseEnter", "onMouseLeave", "onMouseMove", "onMouseOut",
+            "onMouseOver", "onMouseUp"
+        ]);
+        m.insert("selection", vec!["onSelect"]);
+        m.insert("touch", vec!["onTouchCancel", "onTouchEnd", "onTouchMove", "onTouchStart"]);
+        m.insert("ui", vec!["onScroll"]);
+        m.insert("wheel", vec!["onWheel"]);
+        m.insert("media", vec![
+            "onAbort", "onCanPlay", "onCanPlayThrough", "onDurationChange", "onEmptied",
+            "onEncrypted", "onEnded", "onError", "onLoadedData", "onLoadedMetadata", "onLoadStart",
+            "onPause", "onPlay", "onPlaying", "onProgress", "onRateChange", "onSeeked", "onSeeking",
+            "onStalled", "onSuspend", "onTimeUpdate", "onVolumeChange", "onWaiting"
+        ]);
+        m.insert("image", vec!["onLoad", "onError"]);
+        m.insert("animation", vec!["onAnimationStart", "onAnimationEnd", "onAnimationIteration"]);
+        m.insert("transition", vec!["onTransitionEnd"]);


Sorry to barge in during this review. I think this code would benefit from a refactor. I don't think it's a good custom to try to replicate JS code in Rust. For example, this code, while it's created once via lazy_static, still creates a bunch of vectors that are created at runtime (heap).

Instead, why not create simple arrays?

Also, I think we should explain what this code is. It's copied from another source, which is completely fine, but there's no comment that explains what are the keys and what are the values, how they are used and what they are meant to be.

For example composition -> [...]. What's composition? Where is it coming from? Is it an HTML element? Is it a role? Remember that in Biome, we want to aim for good standards, DX-wise and coding-wise.

crates/biome_js_analyze/src/lint/nursery/no_static_element_interactions.rs

ematipico · 2024-06-13T09:27:33Z

crates/biome_js_analyze/src/lint/nursery/no_static_element_interactions.rs

+/// Checks if the given element name is considered invalid, inspired by eslint-plugin-jsx-a11y
+fn is_invalid_element(element_name: &str) -> bool {
+    match element_name {
+        // These cases are interactive with the is_not_interactive_element method,
+        // but is an invalid test case element for eslint-plugin-jsx-a11y.


While the mention to the plugin is appreciated, this information doesn't give us enough value. To you and all developers. What you want to do, instead, is to document when and why an element is considered valid. I am sure there's a context here, and it's the developers job to write it down.

@ematipico
Thank you for your comment.
Your comment is correct, but we will hold it in abeyance because the way we respond will depend on the answers to the following questions.

#2981 (comment)

I will address this when this method continues to be needed.

ematipico · 2024-06-13T09:29:29Z

crates/biome_js_analyze/src/lint/nursery/no_static_element_interactions.rs

+
+/// This function ables non-interactive elements.
+/// This is because this is an element that is abled by eslint-plugin-jsx-a11y.
+fn is_valid_element(element_name: &str) -> bool {


What does "valid element" mean? Valid for what context? We should document it.

Plus, you would want to move this function inside biome_aria, as @unvalley suggested. Here's an example:

biome/crates/biome_aria/src/roles.rs

Lines 1131 to 1138 in 9e8addd

pub fn is_role_interactive(&self, role: &str) -> bool {

let role = self.get_role(role);

if let Some(role) = role {

role.is_interactive()

} else {

false

}

}

@ematipico cc @unvalley
Regarding this point, this method includes processing that considers elements generally deemed non-interactive as valid.
These elements were part of valid test cases in eslint-plugin-jsx-a11y.

When considering portability from ESLint, these test cases should be taken into account (meaning that if a project using ESLint transitions to Biome, many lint errors could occur). However, if we are overly concerned with the above point, we will never be able to lint according to Biome's rules.

Therefore, if we align with Biome's interactive criteria and adjust the rules accordingly, this method will become unnecessary. I would appreciate it if you could provide guidance on the direction we should take.

Maybe there was a misunderstanding; I'm sorry about it. I am not asking you to use the link I pasted. The link I pasted was an example. And I didn't ask to remove the logic you're porting from the plugin.

What I asked was to properly document the function. The phrase "This function ables non-interactive elements." doesn't provide any value to the function name, because it doesn't explain what is a valid element (or when it is valid).

I understand that English is not your first language, so I am willing to help if you explain a bit the logic of this function

I think we can merge this PR after addressing this point.

@ematipico cc @unvalley
Okay, thank you.
Then I need to see why Eslint is enabling these elements, but we have not yet found a clear reason.

So it may take a little time, but I may ask for your help in documenting it. Thank you in advance for your help at that time.

crates/biome_js_analyze/src/services/aria.rs

…added explanatory comments for better clarity and performance.

…attributes function

feat(lint/noStaticElementInteractions): add rule

d659393

github-actions bot added A-Project Area: project A-Linter Area: linter L-JavaScript Language: JavaScript and super languages A-Diagnostic Area: diagnostocis labels May 25, 2024

run just l

4c71fa5

github-actions bot added the A-CLI Area: CLI label May 25, 2024

ematipico assigned togami2864 May 27, 2024

unvalley reviewed May 29, 2024

View reviewed changes

crates/biome_js_analyze/src/lint/nursery/no_static_element_interactions.rs Outdated Show resolved Hide resolved

unvalley reviewed May 29, 2024

View reviewed changes

crates/biome_js_analyze/src/lint/nursery/no_static_element_interactions.rs Outdated Show resolved Hide resolved

unvalley reviewed May 29, 2024

View reviewed changes

crates/biome_js_analyze/src/lint/nursery/no_static_element_interactions.rs Outdated Show resolved Hide resolved

unvalley reviewed May 29, 2024

View reviewed changes

crates/biome_js_analyze/src/lint/nursery/no_static_element_interactions.rs Show resolved Hide resolved

unvalley reviewed May 29, 2024

View reviewed changes

crates/biome_js_analyze/src/lint/nursery/no_static_element_interactions.rs Outdated Show resolved Hide resolved

unvalley reviewed May 29, 2024

View reviewed changes

crates/biome_js_analyze/src/lint/nursery/no_static_element_interactions.rs Outdated Show resolved Hide resolved

unvalley reviewed May 29, 2024

View reviewed changes

crates/biome_js_analyze/src/lint/nursery/no_static_element_interactions.rs Outdated Show resolved Hide resolved

unvalley reviewed May 29, 2024

View reviewed changes

crates/biome_js_analyze/src/lint/nursery/no_static_element_interactions.rs Outdated Show resolved Hide resolved

unvalley reviewed May 29, 2024

View reviewed changes

crates/biome_js_analyze/src/lint/nursery/no_static_element_interactions.rs Outdated Show resolved Hide resolved

unvalley reviewed May 29, 2024

View reviewed changes

crates/biome_js_analyze/src/lint/nursery/no_static_element_interactions.rs Outdated Show resolved Hide resolved

unvalley reviewed May 29, 2024

View reviewed changes

crates/biome_js_analyze/src/lint/nursery/no_static_element_interactions.rs Show resolved Hide resolved

unvalley reviewed May 29, 2024

View reviewed changes

crates/biome_js_analyze/src/lint/nursery/no_static_element_interactions.rs Outdated Show resolved Hide resolved

ryo-ebata added 9 commits May 30, 2024 20:10

rename: elm → element_name

82626b0

refactor: inline has_truthy_ariahidden_attr method back into the main…

f1ceb5e

… function

refactor: add detail information

494a4aa

refactor: change HashMap to FxHashMap

aa03e21

refactor: delete elements have non-interactive role from valid test case

ae05cca

refactor: Swapped variable declarations

9876632

Refactor: Remove redundant code

679fbab

fix: Modify AriaServices::extract_attributes to handle dynamic values

3a83fab

refactor: Inline is_interactive_handler_present logic into run an…

2281933

…d move `CATEGORIES_TO_CHECK` to const

unvalley reviewed Jun 3, 2024

View reviewed changes

crates/biome_js_analyze/src/lint/nursery/no_static_element_interactions.rs Outdated Show resolved Hide resolved

unvalley reviewed Jun 3, 2024

View reviewed changes

crates/biome_js_analyze/src/lint/nursery/no_static_element_interactions.rs Show resolved Hide resolved

unvalley reviewed Jun 3, 2024

View reviewed changes

crates/biome_js_analyze/src/lint/nursery/no_static_element_interactions.rs Outdated Show resolved Hide resolved

ryo-ebata added 3 commits June 4, 2024 08:16

refactor: modify markup text

53745f3

refactor: is role interactive check

93e07f2

add: code comment

f4f65cb

unvalley self-assigned this Jun 7, 2024

refactor: rule comments

ae8d3c7

ematipico added 3 commits June 12, 2024 11:35

Merge remote-tracking branch 'origin/main' into ryo-ebata/no-static-e…

cc06ac5

…lement-interactions

rebase

7343ed2

rebase and fix code blocks

74804bc

ematipico requested review from unvalley and togami2864 June 12, 2024 10:49

unvalley reviewed Jun 12, 2024

View reviewed changes

crates/biome_js_analyze/src/lint/nursery/no_static_element_interactions.rs Outdated Show resolved Hide resolved

unvalley reviewed Jun 12, 2024

View reviewed changes

crates/biome_js_analyze/src/lint/nursery/no_static_element_interactions.rs Outdated Show resolved Hide resolved

unvalley and others added 2 commits June 13, 2024 04:26

Update crates/biome_js_analyze/src/lint/nursery/no_static_element_int…

71c5004

…eractions.rs

fix: Commented out unnecessary overhead.

a9aa880

ematipico reviewed Jun 15, 2024

View reviewed changes

ryo-ebata added 3 commits June 15, 2024 21:28

refactor: Improved event handler mappings by using simple arrays and …

b330131

…added explanatory comments for better clarity and performance.

refactor: Use constant for SECTION_ARIA_ATTRIBUTES to improve efficiency

546fa4a

refactor: use text_trimmed() for dynamic attribute values in extract_…

f1d8524

…attributes function

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(lint/noStaticElementInteractions): add rule #2981

feat(lint/noStaticElementInteractions): add rule #2981

ryo-ebata commented May 25, 2024 •

edited by unvalley

codspeed-hq bot commented May 25, 2024 •

edited

ryo-ebata commented Jun 2, 2024 •

edited

unvalley commented Jun 3, 2024 •

edited

unvalley Jun 3, 2024

ryo-ebata Jun 11, 2024

unvalley Jun 12, 2024

ryo-ebata Jun 12, 2024

ematipico Jun 13, 2024 •

edited

ryo-ebata Jun 15, 2024

ryo-ebata Jun 15, 2024 •

edited

ryo-ebata Jun 15, 2024 •

edited

ryo-ebata commented Jun 11, 2024

ematipico Jun 13, 2024 •

edited

ematipico Jun 13, 2024

ryo-ebata Jun 15, 2024 •

edited

ematipico Jun 13, 2024

ryo-ebata Jun 15, 2024

ematipico Jun 18, 2024

unvalley Jun 19, 2024 •

edited

ryo-ebata Jun 20, 2024 •

edited

	pub fn is_role_interactive(&self, role: &str) -> bool {
	let role = self.get_role(role);
	if let Some(role) = role {
	role.is_interactive()
	} else {
	false
	}
	}

feat(lint/noStaticElementInteractions): add rule #2981

Are you sure you want to change the base?

feat(lint/noStaticElementInteractions): add rule #2981

Conversation

ryo-ebata commented May 25, 2024 • edited by unvalley

Summary

Test Plan

codspeed-hq bot commented May 25, 2024 • edited

Merging #2981 will not alter performance

Summary

ryo-ebata commented Jun 2, 2024 • edited

unvalley commented Jun 3, 2024 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ematipico Jun 13, 2024 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ryo-ebata Jun 15, 2024 • edited

Choose a reason for hiding this comment

ryo-ebata Jun 15, 2024 • edited

Choose a reason for hiding this comment

ryo-ebata commented Jun 11, 2024

ematipico Jun 13, 2024 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ryo-ebata Jun 15, 2024 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

unvalley Jun 19, 2024 • edited

Choose a reason for hiding this comment

ryo-ebata Jun 20, 2024 • edited

Choose a reason for hiding this comment

ryo-ebata commented May 25, 2024 •

edited by unvalley

codspeed-hq bot commented May 25, 2024 •

edited

ryo-ebata commented Jun 2, 2024 •

edited

unvalley commented Jun 3, 2024 •

edited

ematipico Jun 13, 2024 •

edited

ryo-ebata Jun 15, 2024 •

edited

ryo-ebata Jun 15, 2024 •

edited

ematipico Jun 13, 2024 •

edited

ryo-ebata Jun 15, 2024 •

edited

unvalley Jun 19, 2024 •

edited

ryo-ebata Jun 20, 2024 •

edited