feat(html_analyze): implement noNoninteractiveElementToInteractiveRole

.changeset/major-bats-fail.md

@@ -0,0 +1,9 @@
+---
+"@biomejs/biome": minor
+---
+
+Added the HTML lint rule [`noNoninteractiveElementToInteractiveRole`](https://biomejs.dev/linter/rules/no-noninteractive-element-to-interactive-role/), which enforces that interactive ARIA roles are not assigned to non-interactive HTML elements.
+
+```html
+<h1 role="checkbox"></h1>
+```

crates/biome_html_analyze/src/lint/a11y/no_noninteractive_element_to_interactive_role.rs

@@ -0,0 +1,145 @@
+use biome_analyze::{FixKind, Rule, RuleDiagnostic, context::RuleContext, declare_lint_rule};
+use biome_aria_metadata::AriaRole;
+use biome_console::markup;
+use biome_diagnostics::Severity;
+use biome_html_syntax::{HtmlFileSource, element_ext::AnyHtmlTagElement};
+use biome_rowan::{AstNode, BatchMutationExt, TextRange, TokenText};
+use biome_rule_options::no_noninteractive_element_to_interactive_role::NoNoninteractiveElementToInteractiveRoleOptions;
+
+use crate::{Aria, HtmlRuleAction, utils::is_html_tag};
+
+declare_lint_rule! {
+    /// Enforce that interactive ARIA roles are not assigned to non-interactive HTML elements.
+    ///
+    /// Non-interactive HTML elements indicate _content_ and _containers_ in the user interface.
+    /// Non-interactive elements include `<main>`, `<area>`, `<h1>` (,`<h2>`, etc), `<img>`, `<li>`, `<ul>` and `<ol>`.
+    ///
+    /// Interactive HTML elements indicate _controls_ in the user interface.
+    /// Interactive elements include `<a href>`, `<button>`, `<input>`, `<select>`, `<textarea>`.
+    ///
+    /// [WAI-ARIA roles](https://www.w3.org/TR/wai-aria-1.1/#usage_intro) should not be used to convert a non-interactive element to an interactive element.
+    /// Interactive ARIA roles include `button`, `link`, `checkbox`, `menuitem`, `menuitemcheckbox`, `menuitemradio`, `option`, `radio`, `searchbox`, `switch` and `textbox`.
+    ///
+    /// ## Examples
+    ///
+    /// ### Invalid
+    ///
+    /// ```jsx,expect_diagnostic
+    /// <h1 role="button">Some text</h1>
+    /// ```
+    ///
+    /// ### Valid
+    ///
+    ///
+    /// ```jsx
+    /// <span role="button">Some text</span>
+    /// ```
+    ///
+    /// ## Accessibility guidelines
+    ///
+    /// - [WCAG 4.1.2](https://www.w3.org/WAI/WCAG21/Understanding/name-role-value)
+    ///
+    /// ### Resources
+    ///
+    /// - [WAI-ARIA roles](https://www.w3.org/TR/wai-aria-1.1/#usage_intro)
+    /// - [WAI-ARIA Authoring Practices Guide - Design Patterns and Widgets](https://www.w3.org/TR/wai-aria-practices-1.1/#aria_ex)
+    /// - [Fundamental Keyboard Navigation Conventions](https://www.w3.org/TR/wai-aria-practices-1.1/#kbd_generalnav)
+    /// - [Mozilla Developer Network - ARIA Techniques](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_button_role#Keyboard_and_focus)
+    ///
+    pub NoNoninteractiveElementToInteractiveRole {
+        version: "next",
+        name: "noNoninteractiveElementToInteractiveRole",
+        language: "html",
+        recommended: true,
+        severity: Severity::Error,
+        fix_kind: FixKind::Unsafe,
+    }
+}
+
+impl Rule for NoNoninteractiveElementToInteractiveRole {
+    type Query = Aria<AnyHtmlTagElement>;
+    type State = RuleState;
+    type Signals = Option<Self::State>;
+    type Options = NoNoninteractiveElementToInteractiveRoleOptions;
+
+    fn run(ctx: &RuleContext<Self>) -> Self::Signals {
+        let node = ctx.query();
+        let source_type = ctx.source_type::<HtmlFileSource>();
+
+        if node.is_custom_component() {
+            return None;
+        }
+
+        let role_attribute = node.find_attribute_by_name("role")?;
+        let role_attribute_static_value = role_attribute
+            .initializer()?
+            .value()
+            .ok()?
+            .as_static_value()?;
+        let role_attribute_value = role_attribute_static_value.text();
+
+        // Exception: role `treeitem` is allowed on `<li>`
+        // Reason: `treeitem` has the superclass role `listitem`, which means it is made to be used on `<li>`
+        // Ref: https://w3c.github.io/aria/#treeitem
+        // Ref: https://www.w3.org/WAI/ARIA/apg/patterns/treeview/examples/treeview-1a/
+        if is_html_tag(node, source_type, "li") && role_attribute_value == "treeitem" {
+            return None;
+        }
+
+        if ctx.aria_roles().is_not_interactive_element(node)
+            && AriaRole::from_roles(role_attribute_value).is_some_and(|role| role.is_interactive())
+        {
+            // <div> and <span> are considered neither interactive nor non-interactive, depending on the presence or absence of the role attribute.
+            // We don't report <div> and <span> here, because we cannot determine whether they are interactive or non-interactive.
+            if ROLE_SENSITIVE_ELEMENTS
+                .iter()
+                .any(|el| is_html_tag(node, source_type, el))
+            {
+                return None;
+            }
+
+            return Some(RuleState {
+                attribute_range: role_attribute.range(),
+                element_name: node.tag_name()?,
+            });
+        }
+
+        None
+    }
+
+    fn diagnostic(_ctx: &RuleContext<Self>, state: &Self::State) -> Option<RuleDiagnostic> {
+        let element_name = state.element_name.text();
+        Some(RuleDiagnostic::new(
+            rule_category!(),
+            state.attribute_range,
+            markup! {
+                "The HTML element "<Emphasis>{{element_name}}</Emphasis>" is non-interactive and should not have an interactive role."
+            },
+        ).note(
+            markup!{
+                "Replace "<Emphasis>{{element_name}}</Emphasis>" with a div or a span."
+            }
+        ))
+    }
+
+    fn action(ctx: &RuleContext<Self>, _state: &Self::State) -> Option<HtmlRuleAction> {
+        let node = ctx.query();
+        let role_attribute = node.find_attribute_by_name("role")?;
+
+        let mut mutation = ctx.root().begin();
+        mutation.remove_node(role_attribute);
+        Some(HtmlRuleAction::new(
+            ctx.metadata().action_category(ctx.category(), ctx.group()),
+            ctx.metadata().applicability(),
+            markup! { "Remove the "<Emphasis>"role"</Emphasis>" attribute." }.to_owned(),
+            mutation,
+        ))
+    }
+}
+
+static ROLE_SENSITIVE_ELEMENTS: [&str; 2] = ["div", "span"];
+
+pub struct RuleState {
+    attribute_range: TextRange,
+    element_name: TokenText,
+}

crates/biome_html_analyze/tests/specs/a11y/noNoninteractiveElementToInteractiveRole/astro/invalid.astro

@@ -0,0 +1,79 @@
+<!-- should generate diagnostics -->
+<h1 role="checkbox"></h1>
+<h1 role="radio"></h1>
+<h1 role="button"></h1>
+<h1 role="combobox"></h1>
+<h1 role="scrollbar"></h1>
+<ol role="menuitem"></ol>
+<main role="button"></main>
+<article role="button"></article>
+<aside role="button"></aside>
+<blockquote role="button"></blockquote>
+<body role="button"></body>
+<br role="button" />
+<caption role="button"></caption>
+<dd role="button"></dd>
+<details role="button"></details>
+<dir role="button"></dir>
+<dfn role="button"></dfn>
+<dt role="button"></dt>
+<fieldset role="button"></fieldset>
+<figcaption role="button"></figcaption>
+<figure role="button"></figure>
+<footer role="button"></footer>
+<form role="button"></form>
+<frame role="button" />
+<h1 role="button"></h1>
+<h2 role="button"></h2>
+<h3 role="button"></h3>
+<h4 role="button"></h4>
+<h5 role="button"></h5>
+<h6 role="button"></h6>
+<iframe role="button"></iframe>
+<img role="button" />
+<label role="button"></label>
+<legend role="button"></legend>
+<li role="button"></li>
+<mark role="button"></mark>
+<marquee role="button"></marquee>
+<menu role="button"></menu>
+<meter role="button"></meter>
+<nav role="button"></nav>
+<ol role="button"></ol>
+<optgroup role="button"></optgroup>
+<output role="button"></output>
+<pre role="button"></pre>
+<progress role="button"></progress>
+<ruby role="button"></ruby>
+<table role="button"></table>
+<tbody role="button"></tbody>
+<td role="button"></td>
+<tfoot role="button"></tfoot>
+<thead role="button"></thead>
+<time role="button"></time>
+<ul role="button"></ul>
+<main role="menuitem"></main>
+<article role="menuitem"></article>
+<dd role="menuitem"></dd>
+<dfn role="menuitem"></dfn>
+<dt role="menuitem"></dt>
+<fieldset role="menuitem"></fieldset>
+<figure role="menuitem"></figure>
+<form role="menuitem"></form>
+<frame role="menuitem" />
+<h1 role="menuitem"></h1>
+<h2 role="menuitem"></h2>
+<h3 role="menuitem"></h3>
+<h4 role="menuitem"></h4>
+<h5 role="menuitem"></h5>
+<h6 role="menuitem"></h6>
+<hr role="menuitem" />
+<img role="menuitem" />
+<nav role="menuitem"></nav>
+<ol role="menuitem"></ol>
+<p role="button"></p>
+<section role="button" aria-label="Aardletk"></section>
+<tbody role="menuitem"></tbody>
+<td role="menuitem"></td>
+<tfoot role="menuitem"></tfoot>
+<thead role="menuitem"></thead>