diff --git a/crates/oxc_linter/src/rules.rs b/crates/oxc_linter/src/rules.rs index 34d8df57117d..429a4c905599 100644 --- a/crates/oxc_linter/src/rules.rs +++ b/crates/oxc_linter/src/rules.rs @@ -243,6 +243,7 @@ mod jsx_a11y { pub mod no_aria_hidden_on_focusable; pub mod no_autofocus; pub mod no_distracting_elements; + pub mod prefer_tag_over_role; pub mod scope; pub mod tab_index_no_positive; } @@ -469,6 +470,7 @@ oxc_macros::declare_all_lint_rules! { jsx_a11y::no_access_key, jsx_a11y::no_aria_hidden_on_focusable, jsx_a11y::no_autofocus, + jsx_a11y::prefer_tag_over_role, jsx_a11y::scope, jsx_a11y::tab_index_no_positive, jsx_a11y::no_distracting_elements, diff --git a/crates/oxc_linter/src/rules/jsx_a11y/prefer_tag_over_role.rs b/crates/oxc_linter/src/rules/jsx_a11y/prefer_tag_over_role.rs new file mode 100644 index 000000000000..08d11a5c1aec --- /dev/null +++ b/crates/oxc_linter/src/rules/jsx_a11y/prefer_tag_over_role.rs @@ -0,0 +1,133 @@ +use crate::{context::LintContext, rule::Rule, utils::has_jsx_prop_lowercase, AstNode}; +use once_cell::sync::Lazy; +use oxc_ast::{ + ast::{JSXAttributeItem, JSXAttributeValue, JSXElementName}, + AstKind, +}; +use oxc_diagnostics::{ + miette::{self, Diagnostic}, + thiserror::{self, Error}, +}; +use oxc_macros::declare_oxc_lint; +use oxc_span::Span; +use phf::phf_map; + +#[derive(Debug, Error, Diagnostic)] +#[error( + "eslint-plugin-jsx-a11y(prefer-tag-over-role): Prefer `{tag}` over `role` attribute `{role}`." +)] +#[diagnostic( + severity(warning), + help("Replace HTML elements with `role` attribute `{role}` to corresponding semantic HTML tag `{tag}`.") +)] +struct PreferTagOverRoleDiagnostic { + #[label] + pub span: Span, + pub tag: String, + pub role: String, +} +#[derive(Debug, Default, Clone)] +pub struct PreferTagOverRole; + +declare_oxc_lint!( + /// ### What it does + /// Enforces using semantic HTML tags over `role` attribute. + /// + /// ### Why is this bad? + /// Using semantic HTML tags can improve accessibility and readability of the code. + /// + /// ### Example + /// ```javascript + /// // Bad + ///
+ /// + /// // Good + ///