refactor(linter): perfect the scope linter (#2092)

perfect the scope linter for #1141

crates/oxc_cli/Cargo.toml

@@ -34,15 +34,15 @@ path = "src/format/main.rs"
 test = false
 
 [dependencies]
-oxc_allocator      = { workspace = true }
+oxc_allocator   = { workspace = true }
-oxc_diagnostics    = { workspace = true }
+oxc_diagnostics = { workspace = true }
-oxc_linter         = { workspace = true }
+oxc_linter      = { workspace = true }
-oxc_parser         = { workspace = true }
+oxc_parser      = { workspace = true }
-oxc_prettier       = { workspace = true }
+oxc_prettier    = { workspace = true }
-oxc_span           = { workspace = true }
+oxc_span        = { workspace = true }
-glob               = { workspace = true }
+glob            = { workspace = true }
-lazy_static        = { workspace = true }
+lazy_static     = { workspace = true }
-regex              = { workspace = true }
+regex           = { workspace = true }
 
 ignore             = { workspace = true, features = ["simd-accel"] }
 miette             = { workspace = true }

crates/oxc_linter/src/rules/jsx_a11y/scope.rs

@@ -1,7 +1,4 @@
-use oxc_ast::{
+use oxc_ast::{ast::JSXAttributeItem, AstKind};
-    ast::{JSXAttributeItem, JSXElementName},
-    AstKind,
-};
 use oxc_diagnostics::{
     miette::{self, Diagnostic},
     thiserror::Error,
@@ -9,7 +6,13 @@ use oxc_diagnostics::{
 use oxc_macros::declare_oxc_lint;
 use oxc_span::Span;
 
-use crate::{context::LintContext, rule::Rule, utils::has_jsx_prop_lowercase, AstNode};
+use crate::{
+    context::LintContext,
+    globals::HTML_TAG,
+    rule::Rule,
+    utils::{get_element_type, has_jsx_prop_lowercase},
+    AstNode,
+};
 
 #[derive(Debug, Error, Diagnostic)]
 #[error("eslint-plugin-jsx-a11y(scope): The scope prop can only be used on <th> elements")]
@@ -60,12 +63,15 @@ impl Rule for Scope {
             }
         };
 
-        let JSXElementName::Identifier(identifier) = &jsx_el.name else {
+        let Some(element_type) = get_element_type(ctx, jsx_el) else {
             return;
         };
 
-        let name = identifier.name.as_str();
+        if element_type == "th" {
-        if name == "th" {
+            return;
+        }
+
+        if !HTML_TAG.contains(&element_type) {
             return;
         }
 
@@ -77,24 +83,30 @@ impl Rule for Scope {
 fn test() {
     use crate::tester::Tester;
 
+    fn settings() -> serde_json::Value {
+        serde_json::json!({
+            "jsx-a11y": {
+                "components": {
+                    "Foo": "div",
+                    "TableHeader": "th"
+                }
+            }
+        })
+    }
+
     let pass = vec![
-        (r"<div />;", None),
+        (r"<div />;", None, None),
-        (r"<div foo />;", None),
+        (r"<div foo />;", None, None),
-        (r"<th scope />", None),
+        (r"<th scope />", None, None),
-        (r"<th scope='row' />", None),
+        (r"<th scope='row' />", None, None),
-        (r"<th scope={foo} />", None),
+        (r"<th scope={foo} />", None, None),
-        (r"<th scope={'col'} {...props} />", None),
+        (r"<th scope={'col'} {...props} />", None, None),
-        // TODO aria-query like parts is needed
+        (r"<Foo scope='bar' {...props} />", None, None),
-        // (r"<Foo scope='bar' {...props} />", None),
+        (r"<TableHeader scope='row' />", None, Some(settings())),
-        // TODO: When polymorphic components are supported
-        // (r"<TableHeader scope="row" />", None)
     ];
 
-    let fail = vec![
+    let fail =
-        (r"<div scope />", None),
+        vec![(r"<div scope />", None, None), (r"<Foo scope='bar' />;", None, Some(settings()))];
-        // TODO: When polymorphic components are supported
-        // (r"<Foo scope='bar' />;", None),
-    ];
 
     Tester::new(Scope::NAME, pass, fail).with_jsx_a11y_plugin(true).test_and_snapshot();
 }

crates/oxc_linter/src/snapshots/scope.snap

@@ -1,5 +1,6 @@
 ---
 source: crates/oxc_linter/src/tester.rs
+assertion_line: 143
 expression: scope
 ---
   ⚠ eslint-plugin-jsx-a11y(scope): The scope prop can only be used on <th> elements
@@ -9,4 +10,11 @@ expression: scope
    ╰────
   help: Must use scope prop only on <th> elements
 
+  ⚠ eslint-plugin-jsx-a11y(scope): The scope prop can only be used on <th> elements
+   ╭─[scope.tsx:1:1]
+ 1 │ <Foo scope='bar' />;
+   ·      ───────────
+   ╰────
+  help: Must use scope prop only on <th> elements
+
 

crates/oxc_wasm/Cargo.toml

@@ -23,9 +23,9 @@ default = ["console_error_panic_hook"]
 [dependencies]
 oxc = { workspace = true, features = ["serde", "semantic", "transformer", "minifier", "codegen"] }
 
-oxc_linter         = { workspace = true }
+oxc_linter   = { workspace = true }
-oxc_prettier       = { workspace = true }
+oxc_prettier = { workspace = true }
-serde              = { workspace = true }
+serde        = { workspace = true }
 
 wasm-bindgen       = { version = "0.2" }
 serde-wasm-bindgen = "0.6.3"