Skip to content

Commit

Permalink
refactor(linter): UseAnchorContent code action (#489)
Browse files Browse the repository at this point in the history
  • Loading branch information
@vasucp1207
vasucp1207 authored Oct 7, 2023
1 parent 608e0fa commit 708d3e7
Show file tree
Hide file tree
Showing 4 changed files with 142 additions and 7 deletions.
33 changes: 31 additions & 2 deletions crates/biome_js_analyze/src/analyzers/a11y/use_anchor_content.rs
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,12 @@
use biome_analyze::context::RuleContext;
use biome_analyze::{declare_rule, Ast, Rule, RuleDiagnostic};
use biome_analyze::{declare_rule, ActionCategory, Ast, Rule, RuleDiagnostic};
use biome_console::markup;
use biome_diagnostics::Applicability;
use biome_js_syntax::jsx_ext::AnyJsxElement;
use biome_js_syntax::JsxElement;
use biome_rowan::AstNode;
use biome_rowan::{AstNode, BatchMutationExt};

use crate::JsRuleAction;

declare_rule! {
/// Enforce that anchors have content and that the content is accessible to screen readers.
Expand Down Expand Up @@ -117,8 +120,34 @@ impl Rule for UseAnchorContent {
markup! {
"All links on a page should have content that is accessible to screen readers."
}
).note(
markup! {
"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."
}
).note(
markup! {
"Follow these links for more information,\n "<Hyperlink href="https://www.w3.org/WAI/WCAG21/Understanding/link-purpose-in-context">"WCAG 2.4.4"</Hyperlink>"\n "<Hyperlink href="https://www.w3.org/WAI/WCAG21/Understanding/name-role-value">"WCAG 4.1.2"</Hyperlink>""
}
))
}

fn action(ctx: &RuleContext<Self>, _: &Self::State) -> Option<JsRuleAction> {
let node = ctx.query();
let mut mutation = ctx.root().begin();

if node.has_truthy_attribute("aria-hidden") {
let aria_hidden = node.find_attribute_by_name("aria-hidden")?;
mutation.remove_node(aria_hidden);

return Some(JsRuleAction {
category: ActionCategory::QuickFix,
applicability: Applicability::MaybeIncorrect,
message: markup! { "Remove the "<Emphasis>"aria-hidden"</Emphasis>" attribute to allow the anchor element and its content visible to assistive technologies." }.to_owned(),
mutation,
});
}
None
}
}

/// check if the node has a valid anchor attribute
Expand Down
72 changes: 71 additions & 1 deletion crates/biome_js_analyze/tests/specs/a11y/useAnchorContent/invalid.jsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,12 @@ invalid.jsx:2:5 lint/a11y/useAnchorContent ━━━━━━━━━━━━
i All links on a page should have content that is accessible to screen readers.
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.
i Follow these links for more information,
WCAG 2.4.4
WCAG 4.1.2
```

Expand All @@ -51,6 +57,12 @@ invalid.jsx:3:3 lint/a11y/useAnchorContent ━━━━━━━━━━━━
i All links on a page should have content that is accessible to screen readers.
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.
i Follow these links for more information,
WCAG 2.4.4
WCAG 4.1.2
```

Expand All @@ -68,6 +80,12 @@ invalid.jsx:4:3 lint/a11y/useAnchorContent ━━━━━━━━━━━━
i All links on a page should have content that is accessible to screen readers.
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.
i Follow these links for more information,
WCAG 2.4.4
WCAG 4.1.2
```

Expand All @@ -85,6 +103,12 @@ invalid.jsx:5:3 lint/a11y/useAnchorContent ━━━━━━━━━━━━
i All links on a page should have content that is accessible to screen readers.
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.
i Follow these links for more information,
WCAG 2.4.4
WCAG 4.1.2
```

Expand All @@ -102,11 +126,17 @@ invalid.jsx:6:3 lint/a11y/useAnchorContent ━━━━━━━━━━━━
i All links on a page should have content that is accessible to screen readers.
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.
i Follow these links for more information,
WCAG 2.4.4
WCAG 4.1.2
```

```
invalid.jsx:7:3 lint/a11y/useAnchorContent ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
invalid.jsx:7:3 lint/a11y/useAnchorContent FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
! Provide screen reader accessible content when using `a` elements.
Expand All @@ -119,6 +149,16 @@ invalid.jsx:7:3 lint/a11y/useAnchorContent ━━━━━━━━━━━━
i All links on a page should have content that is accessible to screen readers.
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.
i Follow these links for more information,
WCAG 2.4.4
WCAG 4.1.2
i Unsafe fix: Remove the aria-hidden attribute to allow the anchor element and its content visible to assistive technologies.
7 │ → → <a·aria-hidden>content</a>
│ -----------
```

Expand All @@ -136,6 +176,12 @@ invalid.jsx:8:3 lint/a11y/useAnchorContent ━━━━━━━━━━━━
i All links on a page should have content that is accessible to screen readers.
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.
i Follow these links for more information,
WCAG 2.4.4
WCAG 4.1.2
```

Expand All @@ -153,6 +199,12 @@ invalid.jsx:9:3 lint/a11y/useAnchorContent ━━━━━━━━━━━━
i All links on a page should have content that is accessible to screen readers.
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.
i Follow these links for more information,
WCAG 2.4.4
WCAG 4.1.2
```

Expand All @@ -170,6 +222,12 @@ invalid.jsx:10:3 lint/a11y/useAnchorContent ━━━━━━━━━━━━
i All links on a page should have content that is accessible to screen readers.
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.
i Follow these links for more information,
WCAG 2.4.4
WCAG 4.1.2
```

Expand All @@ -187,6 +245,12 @@ invalid.jsx:11:3 lint/a11y/useAnchorContent ━━━━━━━━━━━━
i All links on a page should have content that is accessible to screen readers.
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.
i Follow these links for more information,
WCAG 2.4.4
WCAG 4.1.2
```

Expand All @@ -204,6 +268,12 @@ invalid.jsx:12:3 lint/a11y/useAnchorContent ━━━━━━━━━━━━
i All links on a page should have content that is accessible to screen readers.
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.
i Follow these links for more information,
WCAG 2.4.4
WCAG 4.1.2
```

Expand Down
8 changes: 5 additions & 3 deletions crates/biome_js_unicode_table/src/tables.rs
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

36 changes: 35 additions & 1 deletion website/src/content/docs/linter/rules/use-anchor-content.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,12 @@ Refer to the references to learn about why this is important.

<strong><span style="color: lightgreen;"> </span></strong><strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">All links on a page should have content that is accessible to screen readers.</span>

<strong><span style="color: lightgreen;"> </span></strong><strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">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.</span>

<strong><span style="color: lightgreen;"> </span></strong><strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">Follow these links for more information,
</span><span style="color: lightgreen;"> </span><span style="color: lightgreen;"> </span><span style="color: lightgreen;"> </span><span style="color: lightgreen;"><a href="https://www.w3.org/WAI/WCAG21/Understanding/link-purpose-in-context">WCAG 2.4.4</a></span><span style="color: lightgreen;">
</span><span style="color: lightgreen;"> </span><span style="color: lightgreen;"> </span><span style="color: lightgreen;"> </span><span style="color: lightgreen;"><a href="https://www.w3.org/WAI/WCAG21/Understanding/name-role-value">WCAG 4.1.2</a></span>

</code></pre>

```jsx
Expand All @@ -47,6 +53,12 @@ Refer to the references to learn about why this is important.

<strong><span style="color: lightgreen;"> </span></strong><strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">All links on a page should have content that is accessible to screen readers.</span>

<strong><span style="color: lightgreen;"> </span></strong><strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">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.</span>

<strong><span style="color: lightgreen;"> </span></strong><strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">Follow these links for more information,
</span><span style="color: lightgreen;"> </span><span style="color: lightgreen;"> </span><span style="color: lightgreen;"> </span><span style="color: lightgreen;"><a href="https://www.w3.org/WAI/WCAG21/Understanding/link-purpose-in-context">WCAG 2.4.4</a></span><span style="color: lightgreen;">
</span><span style="color: lightgreen;"> </span><span style="color: lightgreen;"> </span><span style="color: lightgreen;"> </span><span style="color: lightgreen;"><a href="https://www.w3.org/WAI/WCAG21/Understanding/name-role-value">WCAG 4.1.2</a></span>

</code></pre>

```jsx
Expand All @@ -63,13 +75,19 @@ Refer to the references to learn about why this is important.

<strong><span style="color: lightgreen;"> </span></strong><strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">All links on a page should have content that is accessible to screen readers.</span>

<strong><span style="color: lightgreen;"> </span></strong><strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">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.</span>

<strong><span style="color: lightgreen;"> </span></strong><strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">Follow these links for more information,
</span><span style="color: lightgreen;"> </span><span style="color: lightgreen;"> </span><span style="color: lightgreen;"> </span><span style="color: lightgreen;"><a href="https://www.w3.org/WAI/WCAG21/Understanding/link-purpose-in-context">WCAG 2.4.4</a></span><span style="color: lightgreen;">
</span><span style="color: lightgreen;"> </span><span style="color: lightgreen;"> </span><span style="color: lightgreen;"> </span><span style="color: lightgreen;"><a href="https://www.w3.org/WAI/WCAG21/Understanding/name-role-value">WCAG 4.1.2</a></span>

</code></pre>

```jsx
<a aria-hidden>content</a>
```

<pre class="language-text"><code class="language-text">a11y/useAnchorContent.js:1:1 <a href="https://biomejs.dev/linter/rules/use-anchor-content">lint/a11y/useAnchorContent</a> ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
<pre class="language-text"><code class="language-text">a11y/useAnchorContent.js:1:1 <a href="https://biomejs.dev/linter/rules/use-anchor-content">lint/a11y/useAnchorContent</a> <span style="color: #000; background-color: #ddd;"> FIXABLE </span> ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

<strong><span style="color: Tomato;"> </span></strong><strong><span style="color: Tomato;">✖</span></strong> <span style="color: Tomato;">Provide screen reader accessible content when using </span><span style="color: Tomato;"><strong>`a`</strong></span><span style="color: Tomato;"> elements.</span>

Expand All @@ -79,6 +97,16 @@ Refer to the references to learn about why this is important.

<strong><span style="color: lightgreen;"> </span></strong><strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">All links on a page should have content that is accessible to screen readers.</span>

<strong><span style="color: lightgreen;"> </span></strong><strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">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.</span>

<strong><span style="color: lightgreen;"> </span></strong><strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">Follow these links for more information,
</span><span style="color: lightgreen;"> </span><span style="color: lightgreen;"> </span><span style="color: lightgreen;"> </span><span style="color: lightgreen;"><a href="https://www.w3.org/WAI/WCAG21/Understanding/link-purpose-in-context">WCAG 2.4.4</a></span><span style="color: lightgreen;">
</span><span style="color: lightgreen;"> </span><span style="color: lightgreen;"> </span><span style="color: lightgreen;"> </span><span style="color: lightgreen;"><a href="https://www.w3.org/WAI/WCAG21/Understanding/name-role-value">WCAG 4.1.2</a></span>

<strong><span style="color: lightgreen;"> </span></strong><strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">Unsafe fix</span><span style="color: lightgreen;">: </span><span style="color: lightgreen;">Remove the </span><span style="color: lightgreen;"><strong>aria-hidden</strong></span><span style="color: lightgreen;"> attribute to allow the anchor element and its content visible to assistive technologies.</span>

<strong> </strong><strong> 1 │ </strong>&lt;a<span style="opacity: 0.8;">·</span><span style="color: Tomato;">a</span><span style="color: Tomato;">r</span><span style="color: Tomato;">i</span><span style="color: Tomato;">a</span><span style="color: Tomato;">-</span><span style="color: Tomato;">h</span><span style="color: Tomato;">i</span><span style="color: Tomato;">d</span><span style="color: Tomato;">d</span><span style="color: Tomato;">e</span><span style="color: Tomato;">n</span>&gt;content&lt;/a&gt;
<strong> </strong><strong> │ </strong> <span style="color: Tomato;">-</span><span style="color: Tomato;">-</span><span style="color: Tomato;">-</span><span style="color: Tomato;">-</span><span style="color: Tomato;">-</span><span style="color: Tomato;">-</span><span style="color: Tomato;">-</span><span style="color: Tomato;">-</span><span style="color: Tomato;">-</span><span style="color: Tomato;">-</span><span style="color: Tomato;">-</span>
</code></pre>

```jsx
Expand All @@ -95,6 +123,12 @@ Refer to the references to learn about why this is important.

<strong><span style="color: lightgreen;"> </span></strong><strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">All links on a page should have content that is accessible to screen readers.</span>

<strong><span style="color: lightgreen;"> </span></strong><strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">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.</span>

<strong><span style="color: lightgreen;"> </span></strong><strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">Follow these links for more information,
</span><span style="color: lightgreen;"> </span><span style="color: lightgreen;"> </span><span style="color: lightgreen;"> </span><span style="color: lightgreen;"><a href="https://www.w3.org/WAI/WCAG21/Understanding/link-purpose-in-context">WCAG 2.4.4</a></span><span style="color: lightgreen;">
</span><span style="color: lightgreen;"> </span><span style="color: lightgreen;"> </span><span style="color: lightgreen;"> </span><span style="color: lightgreen;"><a href="https://www.w3.org/WAI/WCAG21/Understanding/name-role-value">WCAG 4.1.2</a></span>

</code></pre>

## Valid
Expand Down

0 comments on commit 708d3e7

Please sign in to comment.