Skip to content

fix(html_analyze): account for shorthand attributes when computing implicit ARIA roles #10983

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Netail merged 2 commits into from
Jul 20, 2026
Merged

fix(html_analyze): account for shorthand attributes when computing implicit ARIA roles #10983

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
78f202e
fix(html_analyze): account for shorthand attributes when computing im…
ayaangazali Jul 18, 2026
b08e2a7
fix: correct placement
Netail Jul 20, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions .changeset/fix-aria-role-shorthand-attributes.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
---
"@biomejs/biome": patch
---

Fixed [#10980](https://github.com/biomejs/biome/issues/10980): [`useAriaPropsSupportedByRole`](https://biomejs.dev/linter/rules/use-aria-props-supported-by-role/) no longer reports false positives when the attribute that determines an element's implicit ARIA role is written as a shorthand attribute, such as `<a {href} aria-label="...">` in Astro and Svelte files.

Shorthand attributes are now taken into account when computing the implicit role, so the anchor above correctly resolves to the `link` role instead of `generic`.
Comment on lines +5 to +7

@coderabbitai coderabbitai Bot Jul 18, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win

Add the required assist link.

This description includes the issue and rule links, but not an assist link. Please add the relevant assist link, or confirm that this change is exempt.

As per coding guidelines, changeset descriptions must include issue links, rule links, and assist links.

🧰 Tools
🪛 LanguageTool

[style] ~7-~7: ‘taken into account’ might be wordy. Consider a shorter alternative.
Context: ...te files. Shorthand attributes are now taken into account when computing the implicit role, so th...

(EN_WORDINESS_PREMIUM_TAKEN_INTO_ACCOUNT)

🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In @.changeset/fix-aria-role-shorthand-attributes.md around lines 5 - 7, Add the
appropriate assist link to the changeset description alongside the existing
issue and rule links, using the standard assist-link format and keeping the
description otherwise unchanged.

Source: Coding guidelines

@ayaangazali ayaangazali Jul 18, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This one doesn't touch an assist, only the useAriaPropsSupportedByRole lint rule, so I believe the assist link requirement doesn't apply here. The changeset already has the issue link and the rule link.

2 changes: 2 additions & 0 deletions crates/biome_html_analyze/tests/specs/a11y/useAriaPropsForRole/astro/valid.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
<!-- should not generate diagnostics -->
<span role={roleValue}></span>
<span {role}></span>
<span role="checkbox" aria-checked="true"></span>
<span role="combobox" aria-controls="true" aria-expanded="true"></span>
<span role="heading" aria-level="1"></span>
Expand Down
2 changes: 2 additions & 0 deletions crates/biome_html_analyze/tests/specs/a11y/useAriaPropsForRole/astro/valid.astro.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@ expression: valid.astro
# Input
```astro
<!-- should not generate diagnostics -->
<span role={roleValue}></span>
<span {role}></span>
<span role="checkbox" aria-checked="true"></span>
<span role="combobox" aria-controls="true" aria-expanded="true"></span>
<span role="heading" aria-level="1"></span>
Expand Down
2 changes: 2 additions & 0 deletions crates/biome_html_analyze/tests/specs/a11y/useAriaPropsForRole/svelte/valid.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
<!-- should not generate diagnostics -->
<span role={roleValue}></span>
<span {role}></span>
<span role="checkbox" aria-checked="true"></span>
<span role="combobox" aria-controls="true" aria-expanded="true"></span>
<span role="heading" aria-level="1"></span>
Expand Down
2 changes: 2 additions & 0 deletions crates/biome_html_analyze/tests/specs/a11y/useAriaPropsForRole/svelte/valid.svelte.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@ expression: valid.svelte
# Input
```svelte
<!-- should not generate diagnostics -->
<span role={roleValue}></span>
<span {role}></span>
<span role="checkbox" aria-checked="true"></span>
<span role="combobox" aria-controls="true" aria-expanded="true"></span>
<span role="heading" aria-level="1"></span>
Expand Down
1 change: 1 addition & 0 deletions crates/biome_html_analyze/tests/specs/a11y/useAriaPropsForRole/vue/valid.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
<!-- should not generate diagnostics: Vue v-bind shorthand (:aria-*) bindings satisfy required aria props -->
<template>
<span :role="roleValue"></span>
<span role="checkbox" :aria-checked="isChecked"></span>
<span role="radio" :aria-checked="true"></span>
<span role="switch" :aria-checked="dynamicValue"></span>
Expand Down
1 change: 1 addition & 0 deletions crates/biome_html_analyze/tests/specs/a11y/useAriaPropsForRole/vue/valid.vue.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ expression: valid.vue
```vue
<!-- should not generate diagnostics: Vue v-bind shorthand (:aria-*) bindings satisfy required aria props -->
<template>
<span :role="roleValue"></span>
<span role="checkbox" :aria-checked="isChecked"></span>
<span role="radio" :aria-checked="true"></span>
<span role="switch" :aria-checked="dynamicValue"></span>
Expand Down
1 change: 1 addition & 0 deletions crates/biome_html_analyze/tests/specs/a11y/useAriaPropsSupportedByRole/astro/valid.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,3 +94,4 @@
<select aria-expanded="true"></select>
<div role="heading" aria-level></div>
<div role="heading" aria-level="1"></div>
<a {href} aria-label="label"></a>
1 change: 1 addition & 0 deletions ...es/biome_html_analyze/tests/specs/a11y/useAriaPropsSupportedByRole/astro/valid.astro.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,5 +100,6 @@ expression: valid.astro
<select aria-expanded="true"></select>
<div role="heading" aria-level></div>
<div role="heading" aria-level="1"></div>
<a {href} aria-label="label"></a>

```
1 change: 1 addition & 0 deletions crates/biome_html_analyze/tests/specs/a11y/useAriaPropsSupportedByRole/svelte/valid.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,3 +94,4 @@
<select aria-expanded="true" />
<div role="heading" aria-level />
<div role="heading" aria-level="1" />
<a {href} aria-label="label"></a>
1 change: 1 addition & 0 deletions .../biome_html_analyze/tests/specs/a11y/useAriaPropsSupportedByRole/svelte/valid.svelte.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,5 +100,6 @@ expression: valid.svelte
<select aria-expanded="true" />
<div role="heading" aria-level />
<div role="heading" aria-level="1" />
<a {href} aria-label="label"></a>

```
5 changes: 5 additions & 0 deletions crates/biome_html_syntax/src/attribute_ext.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -112,6 +112,11 @@ impl AnyHtmlAttribute {
pub fn name(&self) -> Option<TokenText> {
match self {
Self::HtmlAttribute(attr) => attr.name().ok()?.token_text_trimmed(),
Self::HtmlAttributeSingleTextExpression(attr) => attr
.expression()
.ok()
.and_then(|expr| expr.html_literal_token().ok())
.map(|html_literal| html_literal.token_text_trimmed()),
Self::AnyVueDirective(vue) => match vue {
// :attr="..." — shorthand Vue binding
AnyVueDirective::VueVBindShorthandDirective(d) => d
Expand Down
4 changes: 3 additions & 1 deletion crates/biome_html_syntax/src/element_ext.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -630,7 +630,9 @@ impl biome_aria::Element for AnyHtmlTagElement {
Self::attributes(self).into_iter().filter(|attr| {
matches!(
attr,
AnyHtmlAttribute::HtmlAttribute(_) | AnyHtmlAttribute::AnyVueDirective(_)
AnyHtmlAttribute::HtmlAttribute(_)
| AnyHtmlAttribute::AnyVueDirective(_)
| AnyHtmlAttribute::HtmlAttributeSingleTextExpression(_)
)
})
}
Expand Down
Loading