diff --git a/.changeset/port-no-aria-hidden-on-focusable-html.md b/.changeset/port-no-aria-hidden-on-focusable-html.md new file mode 100644 index 000000000000..6a364fd31480 --- /dev/null +++ b/.changeset/port-no-aria-hidden-on-focusable-html.md @@ -0,0 +1,13 @@ +--- +"@biomejs/biome": minor +--- + +Added HTML support for the [`noAriaHiddenOnFocusable`](https://biomejs.dev/linter/rules/no-aria-hidden-on-focusable/) accessibility lint rule, which enforces that `aria-hidden="true"` is not set on focusable elements. Focusable elements include native interactive elements (` + + + + + + + + + + + + +``` + +# Diagnostics +``` +invalid.astro:2:1 lint/a11y/noAriaHiddenOnFocusable FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ + + × Incorrect use of aria-hidden="true" detected. + + 1 │ + > 2 │ + │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + 3 │ + 4 │ + + i aria-hidden should not be set to true on focusable elements because this can lead to confusing behavior for screen reader users. + + i Unsafe fix: Remove the aria-hidden attribute from the element. + + 2 │ Click·me + │ ------------------ + +``` + +``` +invalid.astro:3:1 lint/a11y/noAriaHiddenOnFocusable FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ + + × Incorrect use of aria-hidden="true" detected. + + 1 │ + 2 │ + > 3 │ + │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + 4 │ + 5 │ + + i aria-hidden should not be set to true on focusable elements because this can lead to confusing behavior for screen reader users. + + i Unsafe fix: Remove the aria-hidden attribute from the element. + + 3 │ link + │ ------------------ + +``` + +``` +invalid.astro:4:1 lint/a11y/noAriaHiddenOnFocusable FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ + + × Incorrect use of aria-hidden="true" detected. + + 2 │ + 3 │ + > 4 │ + │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + 5 │ + 6 │ + + i aria-hidden should not be set to true on focusable elements because this can lead to confusing behavior for screen reader users. + + i Unsafe fix: Remove the aria-hidden attribute from the element. + + 4 │ + │ ------------------- + +``` + +``` +invalid.astro:5:1 lint/a11y/noAriaHiddenOnFocusable FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ + + × Incorrect use of aria-hidden="true" detected. + + 3 │ + 4 │ + > 5 │ + │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + 6 │ + 7 │ + + i aria-hidden should not be set to true on focusable elements because this can lead to confusing behavior for screen reader users. + + i Unsafe fix: Remove the aria-hidden attribute from the element. + + 5 │ + │ ------------------ + +``` + +``` +invalid.astro:6:1 lint/a11y/noAriaHiddenOnFocusable FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ + + × Incorrect use of aria-hidden="true" detected. + + 4 │ + 5 │ + > 6 │ + │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + 7 │ + 8 │ + + i aria-hidden should not be set to true on focusable elements because this can lead to confusing behavior for screen reader users. + + i Unsafe fix: Remove the aria-hidden attribute from the element. + + 6 │ + │ ------------------ + +``` + +``` +invalid.astro:7:1 lint/a11y/noAriaHiddenOnFocusable FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ + + × Incorrect use of aria-hidden="true" detected. + + 5 │ + 6 │ + > 7 │ + │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + 8 │ + 9 │ + + i aria-hidden should not be set to true on focusable elements because this can lead to confusing behavior for screen reader users. + + i Unsafe fix: Remove the aria-hidden attribute from the element. + + 7 │ text + │ ------------------ + +``` + +``` +invalid.astro:8:1 lint/a11y/noAriaHiddenOnFocusable FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ + + × Incorrect use of aria-hidden="true" detected. + + 6 │ + 7 │ + > 8 │ + │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + 9 │ + 10 │ + + i aria-hidden should not be set to true on focusable elements because this can lead to confusing behavior for screen reader users. + + i Unsafe fix: Remove the aria-hidden attribute from the element. + + 8 │ editable + │ ------------------ + +``` + +``` +invalid.astro:9:1 lint/a11y/noAriaHiddenOnFocusable FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ + + × Incorrect use of aria-hidden="true" detected. + + 7 │ + 8 │ + > 9 │ + │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + 10 │ + 11 │ + + i aria-hidden should not be set to true on focusable elements because this can lead to confusing behavior for screen reader users. + + i Unsafe fix: Remove the aria-hidden attribute from the element. + + 9 │ editable·bare·attr + │ ------------------ + +``` + +``` +invalid.astro:10:1 lint/a11y/noAriaHiddenOnFocusable FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ + + × Incorrect use of aria-hidden="true" detected. + + 8 │ + 9 │ + > 10 │ + │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + 11 │ + 12 │ + + i aria-hidden should not be set to true on focusable elements because this can lead to confusing behavior for screen reader users. + + i Unsafe fix: Remove the aria-hidden attribute from the element. + + 10 │ editable·empty·string + │ ------------------ + +``` + +``` +invalid.astro:11:1 lint/a11y/noAriaHiddenOnFocusable FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ + + × Incorrect use of aria-hidden="true" detected. + + 9 │ + 10 │ + > 11 │ + │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + 12 │ + 13 │ + + i aria-hidden should not be set to true on focusable elements because this can lead to confusing behavior for screen reader users. + + i Unsafe fix: Remove the aria-hidden attribute from the element. + + 11 │ + │ ------------------- + +``` + +``` +invalid.astro:12:1 lint/a11y/noAriaHiddenOnFocusable FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ + + × Incorrect use of aria-hidden="true" detected. + + 10 │ + 11 │ + > 12 │ + │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + 13 │ + 14 │ + + i aria-hidden should not be set to true on focusable elements because this can lead to confusing behavior for screen reader users. + + i Unsafe fix: Remove the aria-hidden attribute from the element. + + 12 │ details + │ ------------------ + +``` + +``` +invalid.astro:13:1 lint/a11y/noAriaHiddenOnFocusable FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ + + × Incorrect use of aria-hidden="true" detected. + + 11 │ + 12 │ + > 13 │ + │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + 14 │ + + i aria-hidden should not be set to true on focusable elements because this can lead to confusing behavior for screen reader users. + + i Unsafe fix: Remove the aria-hidden attribute from the element. + + 13 │ summary + │ ------------------ + +``` diff --git a/crates/biome_html_analyze/tests/specs/a11y/noAriaHiddenOnFocusable/astro/valid.astro b/crates/biome_html_analyze/tests/specs/a11y/noAriaHiddenOnFocusable/astro/valid.astro new file mode 100644 index 000000000000..4b466e0b46e1 --- /dev/null +++ b/crates/biome_html_analyze/tests/specs/a11y/noAriaHiddenOnFocusable/astro/valid.astro @@ -0,0 +1,25 @@ + + + + +