Skip to content

Commit 17d0ff0

Browse files
ematipicoematipico
authored
fix: formatter and lint rules (#11790)
1 parent 0c89d7b commit 17d0ff0

41 files changed

Lines changed: 1697 additions & 55 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.changeset/crisp-dingos-fix.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@biomejs/biome": patch
3+
---
4+
5+
Fixed [#10248](https://github.com/biomejs/biome/issues/10248): [`noUselessFragments`](https://biomejs.dev/linter/rules/no-useless-fragments/) now allows fragments with props in Astro files, such as `<Fragment slot="name">{text}</Fragment>` inside template expressions.

‎.changeset/goofy-doodles-rule.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@biomejs/biome": patch
3+
---
4+
5+
Fixed [#11786](https://github.com/biomejs/biome/issues/11786): [`useAnchorContent`](https://biomejs.dev/linter/rules/use-anchor-content/) now reports anchors without accessible content in HTML, Astro, Vue, and Svelte even when they have an `aria-label`, `aria-labelledby`, or `title` attribute, matching JSX behavior.

‎.changeset/short-dancers-drum.md‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
---
2+
"@biomejs/biome": patch
3+
---
4+
5+
Fixed [#8574](https://github.com/biomejs/biome/issues/8574): the JavaScript formatter sometimes added extra parentheses and moved comments when formatting multiline expressions after operators such as `!`. Comments now stay beside the values they describe, without an extra pair of parentheses.
6+
7+
```diff
8+
!(
9+
- (
10+
- cond1 || // force this to be multi line
11+
- cond3
12+
- ) // comment
13+
+ cond1 || // force this to be multi line
14+
+ cond3 // comment
15+
);
16+
```

‎crates/biome_html_analyze/src/lint/a11y/use_anchor_content.rs‎

Lines changed: 12 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ use biome_rule_options::use_anchor_content::UseAnchorContentOptions;
1010

1111
use crate::HtmlRuleAction;
1212
use crate::a11y::{
13-
get_truthy_aria_hidden_attribute, has_accessible_name, html_element_has_truthy_aria_hidden,
13+
get_truthy_aria_hidden_attribute, html_element_has_truthy_aria_hidden,
1414
html_self_closing_element_has_accessible_name,
1515
html_self_closing_element_has_non_empty_attribute,
1616
html_self_closing_element_has_truthy_aria_hidden,
@@ -21,7 +21,7 @@ declare_lint_rule! {
2121
///
2222
/// Accessible means the content is not hidden using the `aria-hidden` attribute.
2323
/// Anchor tags should have text content that describes the link destination for screen reader users.
24-
/// Alternatively, the anchor can have an accessible name via the `aria-label` or `title` attribute.
24+
/// An `aria-label`, `aria-labelledby`, or `title` attribute alone doesn't satisfy this rule.
2525
///
2626
/// :::note
2727
/// In `.html` files, this rule matches element names case-insensitively (e.g., `<A>`, `<a>`).
@@ -50,26 +50,22 @@ declare_lint_rule! {
5050
/// <a><span aria-hidden="true">content</span></a>
5151
/// ```
5252
///
53-
/// ### Valid
54-
///
55-
/// ```html
56-
/// <a>content</a>
57-
/// ```
58-
///
59-
/// ```html
60-
/// <a><span>content</span></a>
53+
/// ```html,expect_diagnostic
54+
/// <a aria-label="Navigate to home"></a>
6155
/// ```
6256
///
63-
/// ```html
64-
/// <a><span aria-hidden="true"></span>content</a>
57+
/// ```html,expect_diagnostic
58+
/// <a title="Home page"></a>
6559
/// ```
6660
///
67-
/// ```html
68-
/// <a aria-label="Navigate to home"></a>
69-
/// ```
61+
/// ### Valid
7062
///
7163
/// ```html
72-
/// <a title="Home page"></a>
64+
/// <a>content</a>
65+
/// <a><span>content</span></a>
66+
/// <a><span aria-hidden="true"></span>content</a>
67+
/// <a aria-label="Navigate to home">Home</a>
68+
/// <a title="Home page">Home</a>
7369
/// ```
7470
///
7571
/// ## Accessibility guidelines
@@ -116,11 +112,6 @@ impl Rule for UseAnchorContent {
116112
});
117113
}
118114

119-
// Check if anchor has accessible name via aria-label or title
120-
if has_accessible_name(&tag_element) {
121-
return None;
122-
}
123-
124115
// Handle self-closing anchors - they have no content
125116
if node.as_html_element().is_none() {
126117
return Some(UseAnchorContentState {

‎crates/biome_html_analyze/tests/specs/a11y/useAnchorContent/astro/invalid.astro‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,3 +27,10 @@
2727

2828
<!-- Hidden input is not accessible -->
2929
<a><input type="hidden" /></a>
30+
31+
<!-- Labels alone do not provide anchor content -->
32+
<a aria-label="Navigate to dashboard"></a>
33+
<a title="Go to settings page"></a>
34+
<a aria-labelledby="dashboard-label"></a>
35+
<a aria-label={label} />
36+
<a title={label}> </a>

‎crates/biome_html_analyze/tests/specs/a11y/useAnchorContent/astro/invalid.astro.snap‎

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,13 @@ expression: invalid.astro
3434
<!-- Hidden input is not accessible -->
3535
<a><input type="hidden" /></a>
3636
37+
<!-- Labels alone do not provide anchor content -->
38+
<a aria-label="Navigate to dashboard"></a>
39+
<a title="Go to settings page"></a>
40+
<a aria-labelledby="dashboard-label"></a>
41+
<a aria-label={label} />
42+
<a title={label}> </a>
43+
3744
```
3845

3946
# Diagnostics
@@ -298,6 +305,120 @@ invalid.astro:29:1 lint/a11y/useAnchorContent ━━━━━━━━━━━
298305
> 29 │ <a><input type="hidden" /></a>
299306
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
300307
30 │
308+
31 │ <!-- Labels alone do not provide anchor content -->
309+
310+
i All links on a page should have content that is accessible to screen readers.
311+
312+
i Accessible content refers to digital content that is designed and structured in a way that makes it easy for people with disabilities to access, understand, and interact with using assistive technologies.
313+
314+
i Follow these links for more information,
315+
WCAG 2.4.4
316+
WCAG 4.1.2
317+
318+
319+
```
320+
321+
```
322+
invalid.astro:32:1 lint/a11y/useAnchorContent ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
323+
324+
× Provide screen reader accessible content when using a elements.
325+
326+
31 │ <!-- Labels alone do not provide anchor content -->
327+
> 32 │ <a aria-label="Navigate to dashboard"></a>
328+
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
329+
33 │ <a title="Go to settings page"></a>
330+
34 │ <a aria-labelledby="dashboard-label"></a>
331+
332+
i All links on a page should have content that is accessible to screen readers.
333+
334+
i Accessible content refers to digital content that is designed and structured in a way that makes it easy for people with disabilities to access, understand, and interact with using assistive technologies.
335+
336+
i Follow these links for more information,
337+
WCAG 2.4.4
338+
WCAG 4.1.2
339+
340+
341+
```
342+
343+
```
344+
invalid.astro:33:1 lint/a11y/useAnchorContent ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
345+
346+
× Provide screen reader accessible content when using a elements.
347+
348+
31 │ <!-- Labels alone do not provide anchor content -->
349+
32 │ <a aria-label="Navigate to dashboard"></a>
350+
> 33 │ <a title="Go to settings page"></a>
351+
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
352+
34 │ <a aria-labelledby="dashboard-label"></a>
353+
35 │ <a aria-label={label} />
354+
355+
i All links on a page should have content that is accessible to screen readers.
356+
357+
i Accessible content refers to digital content that is designed and structured in a way that makes it easy for people with disabilities to access, understand, and interact with using assistive technologies.
358+
359+
i Follow these links for more information,
360+
WCAG 2.4.4
361+
WCAG 4.1.2
362+
363+
364+
```
365+
366+
```
367+
invalid.astro:34:1 lint/a11y/useAnchorContent ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
368+
369+
× Provide screen reader accessible content when using a elements.
370+
371+
32 │ <a aria-label="Navigate to dashboard"></a>
372+
33 │ <a title="Go to settings page"></a>
373+
> 34 │ <a aria-labelledby="dashboard-label"></a>
374+
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
375+
35 │ <a aria-label={label} />
376+
36 │ <a title={label}> </a>
377+
378+
i All links on a page should have content that is accessible to screen readers.
379+
380+
i Accessible content refers to digital content that is designed and structured in a way that makes it easy for people with disabilities to access, understand, and interact with using assistive technologies.
381+
382+
i Follow these links for more information,
383+
WCAG 2.4.4
384+
WCAG 4.1.2
385+
386+
387+
```
388+
389+
```
390+
invalid.astro:35:1 lint/a11y/useAnchorContent ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
391+
392+
× Provide screen reader accessible content when using a elements.
393+
394+
33 │ <a title="Go to settings page"></a>
395+
34 │ <a aria-labelledby="dashboard-label"></a>
396+
> 35 │ <a aria-label={label} />
397+
│ ^^^^^^^^^^^^^^^^^^^^^^^^
398+
36 │ <a title={label}> </a>
399+
37 │
400+
401+
i All links on a page should have content that is accessible to screen readers.
402+
403+
i Accessible content refers to digital content that is designed and structured in a way that makes it easy for people with disabilities to access, understand, and interact with using assistive technologies.
404+
405+
i Follow these links for more information,
406+
WCAG 2.4.4
407+
WCAG 4.1.2
408+
409+
410+
```
411+
412+
```
413+
invalid.astro:36:1 lint/a11y/useAnchorContent ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
414+
415+
× Provide screen reader accessible content when using a elements.
416+
417+
34 │ <a aria-labelledby="dashboard-label"></a>
418+
35 │ <a aria-label={label} />
419+
> 36 │ <a title={label}> </a>
420+
│ ^^^^^^^^^^^^^^^^^^^^^^^^^
421+
37 │
301422
302423
i All links on a page should have content that is accessible to screen readers.
303424

‎crates/biome_html_analyze/tests/specs/a11y/useAnchorContent/astro/issue_11786.astro‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<!-- should generate diagnostics -->
2+
<a href={link.url} target="_blank" rel="noopener" title={label} aria-label={label}>
3+
<svg aria-hidden="true">
4+
<use href={`/assets/icons/icon-${link.type}.svg#icon-${link.type}`} />
5+
</svg>
6+
</a>
7+
8+
{
9+
<a href={link.url} target="_blank" rel="noopener" title={label} aria-label={label}>
10+
<svg aria-hidden="true">
11+
<use href={`/assets/icons/icon-${link.type}.svg#icon-${link.type}`} />
12+
</svg>
13+
</a>
14+
}
15+
16+
{mylinks.map((link) => {
17+
const label =
18+
link.title ||
19+
(link.type === 'email' ? link.url.replace('mailto:', '') : `${person.name} | ${link.type}`);
20+
return (
21+
<a href={link.url} target="_blank" rel="noopener" title={label} aria-label={label}>
22+
<svg aria-hidden="true">
23+
<use href={`/assets/icons/icon-${link.type}.svg#icon-${link.type}`} />
24+
</svg>
25+
</a>
26+
);
27+
})}

‎crates/biome_html_analyze/tests/specs/a11y/useAnchorContent/astro/issue_11786.astro.snap‎

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
---
2+
source: crates/biome_html_analyze/tests/spec_tests.rs
3+
expression: issue_11786.astro
4+
---
5+
# Input
6+
```astro
7+
<!-- should generate diagnostics -->
8+
<a href={link.url} target="_blank" rel="noopener" title={label} aria-label={label}>
9+
<svg aria-hidden="true">
10+
<use href={`/assets/icons/icon-${link.type}.svg#icon-${link.type}`} />
11+
</svg>
12+
</a>
13+
14+
{
15+
<a href={link.url} target="_blank" rel="noopener" title={label} aria-label={label}>
16+
<svg aria-hidden="true">
17+
<use href={`/assets/icons/icon-${link.type}.svg#icon-${link.type}`} />
18+
</svg>
19+
</a>
20+
}
21+
22+
{mylinks.map((link) => {
23+
const label =
24+
link.title ||
25+
(link.type === 'email' ? link.url.replace('mailto:', '') : `${person.name} | ${link.type}`);
26+
return (
27+
<a href={link.url} target="_blank" rel="noopener" title={label} aria-label={label}>
28+
<svg aria-hidden="true">
29+
<use href={`/assets/icons/icon-${link.type}.svg#icon-${link.type}`} />
30+
</svg>
31+
</a>
32+
);
33+
})}
34+
35+
```
36+
37+
# Diagnostics
38+
```
39+
issue_11786.astro:2:1 lint/a11y/useAnchorContent ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
40+
41+
× Provide screen reader accessible content when using a elements.
42+
43+
1 │ <!-- should generate diagnostics -->
44+
> 2 │ <a href={link.url} target="_blank" rel="noopener" title={label} aria-label={label}>
45+
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
46+
> 3 │ <svg aria-hidden="true">
47+
> 4 │ <use href={`/assets/icons/icon-${link.type}.svg#icon-${link.type}`} />
48+
> 5 │ </svg>
49+
> 6 │ </a>
50+
│ ^^^^
51+
7 │
52+
8 │ {
53+
54+
i All links on a page should have content that is accessible to screen readers.
55+
56+
i Accessible content refers to digital content that is designed and structured in a way that makes it easy for people with disabilities to access, understand, and interact with using assistive technologies.
57+
58+
i Follow these links for more information,
59+
WCAG 2.4.4
60+
WCAG 4.1.2
61+
62+
63+
```
64+
65+
```
66+
issue_11786.astro:8:2 lint/a11y/useAnchorContent ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
67+
68+
× Provide screen reader accessible content when using `a` elements.
69+
70+
6 │ </a>
71+
7 │
72+
> 8 │ {
73+
│
74+
> 9 │ <a href={link.url} target="_blank" rel="noopener" title={label} aria-label={label}>
75+
> 10 │ <svg aria-hidden="true">
76+
> 11 │ <use href={`/assets/icons/icon-${link.type}.svg#icon-${link.type}`} />
77+
> 12 │ </svg>
78+
> 13 │ </a>
79+
│ ^^^^
80+
14 │ }
81+
15 │
82+
83+
i All links on a page should have content that is accessible to screen readers.
84+
85+
i Accessible content refers to digital content that is designed and structured in a way that makes it easy for people with disabilities to access, understand, and interact with using assistive technologies.
86+
87+
i Follow these links for more information,
88+
WCAG 2.4.4
89+
WCAG 4.1.2
90+
91+
92+
```
93+
94+
```
95+
issue_11786.astro:20:13 lint/a11y/useAnchorContent ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
96+
97+
× Provide screen reader accessible content when using `a` elements.
98+
99+
18 │ link.title ||
100+
19 │ (link.type === 'email' ? link.url.replace('mailto:', '') : `${person.name} | ${link.type}`);
101+
> 20 │ return (
102+
│
103+
> 21 │ <a href={link.url} target="_blank" rel="noopener" title={label} aria-label={label}>
104+
> 22 │ <svg aria-hidden="true">
105+
> 23 │ <use href={`/assets/icons/icon-${link.type}.svg#icon-${link.type}`} />
106+
> 24 │ </svg>
107+
> 25 │ </a>
108+
│ ^^^^
109+
26 │ );
110+
27 │ })}
111+
112+
i All links on a page should have content that is accessible to screen readers.
113+
114+
i Accessible content refers to digital content that is designed and structured in a way that makes it easy for people with disabilities to access, understand, and interact with using assistive technologies.
115+
116+
i Follow these links for more information,
117+
WCAG 2.4.4
118+
WCAG 4.1.2
119+
120+
121+
```

0 commit comments

Comments
 (0)