+
Skip to content
This repository was archived by the owner on Aug 31, 2023. It is now read-only.

feat(rome_js_analyzer): rule useKeyWithClickEvents #3426

Merged
merged 9 commits into from
Oct 17, 2022

Conversation

jk-gan
Copy link
Contributor

@jk-gan jk-gan commented Oct 14, 2022

Summary

Closes #3301 (Reopen the PR because #3372 is not able to detect the correct file change after I rebased with main branch)

Test Plan

Added various test cases

Screenshot 2022-10-09 at 5 00 20 PM

Screenshot 2022-10-09 at 5 00 17 PM

@jk-gan jk-gan requested a review from a team October 14, 2022 12:30
@netlify
Copy link

netlify bot commented Oct 14, 2022

Deploy Preview for docs-rometools ready!

Name Link
🔨 Latest commit 3cc1f59
🔍 Latest deploy log https://app.netlify.com/sites/docs-rometools/deploys/634a55c5325d630008d81624
😎 Deploy Preview https://deploy-preview-3426--docs-rometools.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

@jk-gan jk-gan changed the title Feature/use key with click events feat(rome_js_analyzer): rule useKeyWithClickEvents Oct 14, 2022
@jk-gan
Copy link
Contributor Author

jk-gan commented Oct 14, 2022

I've fixed the codes based on the suggestions.

Copy link
Contributor

@ematipico ematipico left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good to me, I left some suggestion

use rome_rowan::{declare_node_union, AstNode};

declare_rule! {
/// Pair the `onClick` mouse event with the `onKeyUp`, the `onKeyDown`, or the `noKeyPress` keyboard event.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
/// Pair the `onClick` mouse event with the `onKeyUp`, the `onKeyDown`, or the `noKeyPress` keyboard event.
/// Enforce to have the`onClick` mouse event with the `onKeyUp`, the `onKeyDown`, or the `noKeyPress` keyboard event.

fn run(ctx: &RuleContext<Self>) -> Self::Signals {
let node = ctx.query();

let required_props = ["onKeyDown", "onKeyUp", "onKeyPress"];
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This can be a const of UseKeyWithClickEvents:

impl UseKeyWithClickEvents {
	const REQUIRED_PROPS: [&str; 3] = ["onKeyDown", "onKeyUp", "onKeyPress"];
}

// ..

if Self::REQUIRED_PROPS.contains(&name.as_str()) {
	return None;
}

Like this, we don't need to create this array every time we run the rule.

@ematipico
Copy link
Contributor

It seems that the rule triggered in our code base :) That's good!

 website/playground/src/LineWidthInput.tsx:28:4 lint/nursery/useKeyWithClickEvents ━━━━━━━━━━━━━━━━━━

  × Pair the onClick mouse event with the onKeyUp, the onKeyDown, or the onKeyPress keyboard event.
  
    26 │ 				</div>
    27 │ 			</div>
  > 28 │ 			<button
       │ 			^^^^^^^
  > 29 │ 				aria-label="Set line width to 80 characters"
  > 30 │ 				onClick={() => setLineWidth(80)}
  > 31 │ 				disabled={lineWidth === 80}
  > 32 │ 				className="bg-slate-500 m-2 text-sm w-[80px] p-1 rounded text-slate-50 disabled:bg-slate-300 transition"
  > 33 │ 			>
       │ 			^
    34 │ 				80
    35 │ 			</button>
  
  i Actions triggered using mouse events should have corresponding keyboard events to account for keyboard-only navigation.
Checked 51 files in 89ms

Would you mind to fix it?

@jk-gan
Copy link
Contributor Author

jk-gan commented Oct 15, 2022

I've updated the codes based on the suggestions

@ematipico ematipico merged commit b4139c6 into rome:main Oct 17, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

useKeyWithClickEvents
2 participants
点击 这是indexloc提供的php浏览器服务,不要输入任何密码和下载