From 708d3e785c5d26c25ebb4801d95c7aebde86c327 Mon Sep 17 00:00:00 2001 From: Vasu Singh Date: Sun, 8 Oct 2023 03:35:28 +0530 Subject: [PATCH] refactor(linter): UseAnchorContent code action (#489) --- .../src/analyzers/a11y/use_anchor_content.rs | 33 ++++++++- .../a11y/useAnchorContent/invalid.jsx.snap | 72 ++++++++++++++++++- crates/biome_js_unicode_table/src/tables.rs | 8 ++- .../docs/linter/rules/use-anchor-content.md | 36 +++++++++- 4 files changed, 142 insertions(+), 7 deletions(-) diff --git a/crates/biome_js_analyze/src/analyzers/a11y/use_anchor_content.rs b/crates/biome_js_analyze/src/analyzers/a11y/use_anchor_content.rs index ca443277793f..aa15a86d6ce8 100644 --- a/crates/biome_js_analyze/src/analyzers/a11y/use_anchor_content.rs +++ b/crates/biome_js_analyze/src/analyzers/a11y/use_anchor_content.rs @@ -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. @@ -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 ""WCAG 2.4.4""\n ""WCAG 4.1.2""" + } )) } + + fn action(ctx: &RuleContext, _: &Self::State) -> Option { + 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 ""aria-hidden"" 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 diff --git a/crates/biome_js_analyze/tests/specs/a11y/useAnchorContent/invalid.jsx.snap b/crates/biome_js_analyze/tests/specs/a11y/useAnchorContent/invalid.jsx.snap index d4b2db3ce728..00af38ce718b 100644 --- a/crates/biome_js_analyze/tests/specs/a11y/useAnchorContent/invalid.jsx.snap +++ b/crates/biome_js_analyze/tests/specs/a11y/useAnchorContent/invalid.jsx.snap @@ -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 + ``` @@ -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 + ``` @@ -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 + ``` @@ -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 + ``` @@ -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. @@ -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 │ → → content + │ ----------- ``` @@ -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 + ``` @@ -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 + ``` @@ -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 + ``` @@ -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 + ``` @@ -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 + ``` diff --git a/crates/biome_js_unicode_table/src/tables.rs b/crates/biome_js_unicode_table/src/tables.rs index 3ed00b032140..7700038e9f9c 100644 --- a/crates/biome_js_unicode_table/src/tables.rs +++ b/crates/biome_js_unicode_table/src/tables.rs @@ -318,6 +318,7 @@ pub mod derived_property { ('ῠ', 'Ῥ'), ('ῲ', 'ῴ'), ('ῶ', 'ῼ'), + ('\u{200c}', '\u{200d}'), ('‿', '⁀'), ('⁔', '⁔'), ('ⁱ', 'ⁱ'), @@ -362,8 +363,7 @@ pub mod derived_property { ('〸', '〼'), ('ぁ', 'ゖ'), ('\u{3099}', 'ゟ'), - ('ァ', 'ヺ'), - ('ー', 'ヿ'), + ('ァ', 'ヿ'), ('ㄅ', 'ㄯ'), ('ㄱ', 'ㆎ'), ('ㆠ', 'ㆿ'), @@ -441,7 +441,7 @@ pub mod derived_property { ('Ａ', 'Ｚ'), ('＿', '＿'), ('ａ', 'ｚ'), - ('ｦ', 'ﾾ'), + ('･', 'ﾾ'), ('ￂ', 'ￇ'), ('ￊ', 'ￏ'), ('ￒ', 'ￗ'), @@ -782,6 +782,7 @@ pub mod derived_property { ('𫝀', '𫠝'), ('𫠠', '𬺡'), ('𬺰', '𮯠'), + ('\u{2ebf0}', '\u{2ee5d}'), ('丽', '𪘀'), ('𰀀', '𱍊'), ('𱍐', '𲎯'), @@ -1447,6 +1448,7 @@ pub mod derived_property { ('𫝀', '𫠝'), ('𫠠', '𬺡'), ('𬺰', '𮯠'), + ('\u{2ebf0}', '\u{2ee5d}'), ('丽', '𪘀'), ('𰀀', '𱍊'), ('𱍐', '𲎯'), diff --git a/website/src/content/docs/linter/rules/use-anchor-content.md b/website/src/content/docs/linter/rules/use-anchor-content.md index fca96f88ecc8..ff08f05eb96c 100644 --- a/website/src/content/docs/linter/rules/use-anchor-content.md +++ b/website/src/content/docs/linter/rules/use-anchor-content.md @@ -31,6 +31,12 @@ Refer to the references to learn about why this is important. ℹ All links on a page should have content that is accessible to screen readers. + ℹ 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. + + ℹ Follow these links for more information, + WCAG 2.4.4 + WCAG 4.1.2 + ```jsx @@ -47,6 +53,12 @@ Refer to the references to learn about why this is important. ℹ All links on a page should have content that is accessible to screen readers. + ℹ 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. + + ℹ Follow these links for more information, + WCAG 2.4.4 + WCAG 4.1.2 + ```jsx @@ -63,13 +75,19 @@ Refer to the references to learn about why this is important. ℹ All links on a page should have content that is accessible to screen readers. + ℹ 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. + + ℹ Follow these links for more information, + WCAG 2.4.4 + WCAG 4.1.2 + ```jsx content ``` -
a11y/useAnchorContent.js:1:1 lint/a11y/useAnchorContent ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
a11y/useAnchorContent.js:1:1 lint/a11y/useAnchorContent  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
   ✖ Provide screen reader accessible content when using `a` elements.
   
@@ -79,6 +97,16 @@ Refer to the references to learn about why this is important.
   
   ℹ All links on a page should have content that is accessible to screen readers.
   
+  ℹ 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.
+  
+  ℹ Follow these links for more information,
+     WCAG 2.4.4
+     WCAG 4.1.2
+  
+  ℹ Unsafe fix: Remove the aria-hidden attribute to allow the anchor element and its content visible to assistive technologies.
+  
+    1 │ <a·aria-hidden>content</a>
+      │    -----------            
 

 
 ```jsx
@@ -95,6 +123,12 @@ Refer to the references to learn about why this is important.
   
   ℹ All links on a page should have content that is accessible to screen readers.
   
+  ℹ 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.
+  
+  ℹ Follow these links for more information,
+     WCAG 2.4.4
+     WCAG 4.1.2
+
## Valid