From cb1438e1da99682244d580e61993794c45b73855 Mon Sep 17 00:00:00 2001 From: vasu Date: Sun, 8 Oct 2023 02:39:49 +0530 Subject: [PATCH 1/5] refactor(linter): UseAnchorContent code action --- .../src/analyzers/a11y/use_anchor_content.rs | 33 ++++++++- .../a11y/useAnchorContent/invalid.jsx.snap | 72 ++++++++++++++++++- .../docs/linter/rules/use-anchor-content.md | 36 +++++++++- 3 files changed, 137 insertions(+), 4 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..9cd9a4380ba6 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 the 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..cd21e6e5636c 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 the 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 the 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 the 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 the 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 the 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 the 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 the 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 the 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 the 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 the 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 the links for more information, + WCAG 2.4.4 + WCAG 4.1.2 + ``` 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..fd0158bb07d8 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 the 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 the 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 the 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 the 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 the links for more information,
+     WCAG 2.4.4
+     WCAG 4.1.2
+
## Valid From 364f018719141104109671c9865cdbd98d57ae50 Mon Sep 17 00:00:00 2001 From: vasu Date: Sun, 8 Oct 2023 02:44:20 +0530 Subject: [PATCH 2/5] refactor(linter): UseAnchorContent code action --- .../src/analyzers/a11y/use_anchor_content.rs | 2 +- .../a11y/useAnchorContent/invalid.jsx.snap | 22 +++++++++---------- .../docs/linter/rules/use-anchor-content.md | 10 ++++----- 3 files changed, 17 insertions(+), 17 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 9cd9a4380ba6..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 @@ -126,7 +126,7 @@ impl Rule for UseAnchorContent { } ).note( markup! { - "Follow the links for more information,\n ""WCAG 2.4.4""\n ""WCAG 4.1.2""" + "Follow these links for more information,\n ""WCAG 2.4.4""\n ""WCAG 4.1.2""" } )) } 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 cd21e6e5636c..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 @@ -36,7 +36,7 @@ invalid.jsx:2:5 lint/a11y/useAnchorContent ━━━━━━━━━━━━ 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 the links for more information, + i Follow these links for more information, WCAG 2.4.4 WCAG 4.1.2 @@ -59,7 +59,7 @@ invalid.jsx:3:3 lint/a11y/useAnchorContent ━━━━━━━━━━━━ 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 the links for more information, + i Follow these links for more information, WCAG 2.4.4 WCAG 4.1.2 @@ -82,7 +82,7 @@ invalid.jsx:4:3 lint/a11y/useAnchorContent ━━━━━━━━━━━━ 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 the links for more information, + i Follow these links for more information, WCAG 2.4.4 WCAG 4.1.2 @@ -105,7 +105,7 @@ invalid.jsx:5:3 lint/a11y/useAnchorContent ━━━━━━━━━━━━ 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 the links for more information, + i Follow these links for more information, WCAG 2.4.4 WCAG 4.1.2 @@ -128,7 +128,7 @@ invalid.jsx:6:3 lint/a11y/useAnchorContent ━━━━━━━━━━━━ 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 the links for more information, + i Follow these links for more information, WCAG 2.4.4 WCAG 4.1.2 @@ -151,7 +151,7 @@ invalid.jsx:7:3 lint/a11y/useAnchorContent FIXABLE ━━━━━━━━━ 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 the links for more information, + i Follow these links for more information, WCAG 2.4.4 WCAG 4.1.2 @@ -178,7 +178,7 @@ invalid.jsx:8:3 lint/a11y/useAnchorContent ━━━━━━━━━━━━ 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 the links for more information, + i Follow these links for more information, WCAG 2.4.4 WCAG 4.1.2 @@ -201,7 +201,7 @@ invalid.jsx:9:3 lint/a11y/useAnchorContent ━━━━━━━━━━━━ 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 the links for more information, + i Follow these links for more information, WCAG 2.4.4 WCAG 4.1.2 @@ -224,7 +224,7 @@ invalid.jsx:10:3 lint/a11y/useAnchorContent ━━━━━━━━━━━━ 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 the links for more information, + i Follow these links for more information, WCAG 2.4.4 WCAG 4.1.2 @@ -247,7 +247,7 @@ invalid.jsx:11:3 lint/a11y/useAnchorContent ━━━━━━━━━━━━ 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 the links for more information, + i Follow these links for more information, WCAG 2.4.4 WCAG 4.1.2 @@ -270,7 +270,7 @@ invalid.jsx:12:3 lint/a11y/useAnchorContent ━━━━━━━━━━━━ 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 the links for more information, + i Follow these links for more information, WCAG 2.4.4 WCAG 4.1.2 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 fd0158bb07d8..ff08f05eb96c 100644 --- a/website/src/content/docs/linter/rules/use-anchor-content.md +++ b/website/src/content/docs/linter/rules/use-anchor-content.md @@ -33,7 +33,7 @@ Refer to the references to learn about why this is important. ℹ 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 the links for more information, + ℹ Follow these links for more information, WCAG 2.4.4 WCAG 4.1.2 @@ -55,7 +55,7 @@ Refer to the references to learn about why this is important. ℹ 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 the links for more information, + ℹ Follow these links for more information, WCAG 2.4.4 WCAG 4.1.2 @@ -77,7 +77,7 @@ Refer to the references to learn about why this is important. ℹ 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 the links for more information, + ℹ Follow these links for more information, WCAG 2.4.4 WCAG 4.1.2 @@ -99,7 +99,7 @@ Refer to the references to learn about why this is important. ℹ 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 the links for more information, + ℹ Follow these links for more information, WCAG 2.4.4 WCAG 4.1.2 @@ -125,7 +125,7 @@ Refer to the references to learn about why this is important. ℹ 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 the links for more information, + ℹ Follow these links for more information, WCAG 2.4.4 WCAG 4.1.2 From d94d9e1041de5d0336513b52924504867bceedda Mon Sep 17 00:00:00 2001 From: vasu Date: Sun, 8 Oct 2023 03:10:15 +0530 Subject: [PATCH 3/5] refactor(linter): UseAnchorContent code action --- crates/biome_js_unicode_table/src/tables.rs | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) 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}'), ('丽', '𪘀'), ('𰀀', '𱍊'), ('𱍐', '𲎯'), From eaa73d91400e0be42d113625c7f211726e6285ac Mon Sep 17 00:00:00 2001 From: vasu Date: Fri, 12 Jan 2024 00:19:07 +0530 Subject: [PATCH 4/5] add myself to maintainer list --- CONTRIBUTING.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index e7c47537497b..c39ac02d1f7c 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -33,7 +33,6 @@ We can use help in a bunch of areas and any help is greatly appreciated! - [Changelog](#changelog) - [Writing a changelog line](#writing-a-changelog-line) - [Documentation](#documentation) - - [Magic comments](#magic-comments) - [Versioning](#versioning) - [Releasing](#releasing) - [Resources](#resources) @@ -415,3 +414,4 @@ Members are listed in alphabetical order. Members are free to use the full name, - [Nicolas Hedger @nhedger](https://github.com/nhedger) - [Victor Teles @victor-teles](https://github.com/victor-teles) - [Takayuki Maeda @TaKO8Ki](https://github.com/TaKO8Ki) +- [Vasu Singh @vasucp1207](https://github.com/vasucp1207) From a5971692fd26ae7d9333d8f16f2420584b75d208 Mon Sep 17 00:00:00 2001 From: vasu Date: Fri, 12 Jan 2024 00:36:37 +0530 Subject: [PATCH 5/5] add myself to maintainer list --- CONTRIBUTING.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index c39ac02d1f7c..3e53e695c4ad 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -33,6 +33,7 @@ We can use help in a bunch of areas and any help is greatly appreciated! - [Changelog](#changelog) - [Writing a changelog line](#writing-a-changelog-line) - [Documentation](#documentation) + - [Magic comments](#magic-comments) - [Versioning](#versioning) - [Releasing](#releasing) - [Resources](#resources)