fix(linter): treat separator role as non-interactive for hr elements

.changeset/fix-hr-presentation-role.md

@@ -0,0 +1,5 @@
+---
+"@biomejs/biome": patch
+---
+
+Fixed [#9024](https://github.com/biomejs/biome/issues/9024). The `noInteractiveElementToNoninteractiveRole` rule no longer incorrectly flags `<hr>` elements with `role="presentation"` or `role="none"`. The `separator` role (implicit role of `<hr>`) is now treated as non-interactive, matching the WAI-ARIA spec where a non-focusable separator is a static structural element.

crates/biome_aria_metadata/src/lib.rs

@@ -160,13 +160,19 @@ impl AriaRole {
             .find_map(|value| value.parse().ok())
     }
 
-    /// Returns `true` if the given role inherits of `AriaAbstractRole::Widget` and is not `Self::Progressbar`.
+    /// Returns `true` if the given role inherits of `AriaAbstractRole::Widget` and is not `Self::Progressbar` or `Self::Separator`.
     ///
     /// This corresponds to a role that defines a user interface widget (slider, tree control, ...)
     pub fn is_interactive(self) -> bool {
         // `progressbar` inherits of `widget`, but its value is always `readonly`.
         // So we treat it as a non-interactive role.
+        //
+        // `separator` inherits of both `structure` and `widget`, but it is only interactive
+        // when it is focusable (e.g. has `tabindex` and `aria-valuenow`).
+        // A non-focusable `separator` (such as `<hr>`) is a static structural element.
+        // See: https://www.w3.org/TR/wai-aria-1.2/#separator
         self != Self::Progressbar
+            && self != Self::Separator
             && self
                 .inherited_abstract_roles()
                 .contains(&AriaAbstractRole::Widget)

crates/biome_js_analyze/tests/specs/a11y/noInteractiveElementToNoninteractiveRole/valid.jsx

@@ -209,6 +209,8 @@
 <h5 role="button" />;
 <h6 role="button" />;
 <hr role="button" />;
+<hr role="presentation" />;
+<hr role="none" />;
 <img role="button" />;
 <li role="button" />;
 <li role="presentation" />;

crates/biome_js_analyze/tests/specs/a11y/noInteractiveElementToNoninteractiveRole/valid.jsx.snap

@@ -215,6 +215,8 @@ expression: valid.jsx
 <h5 role="button" />;
 <h6 role="button" />;
 <hr role="button" />;
+<hr role="presentation" />;
+<hr role="none" />;
 <img role="button" />;
 <li role="button" />;
 <li role="presentation" />;