|
| 1 | +use biome_analyze::{ |
| 2 | + Ast, QueryMatch, Rule, RuleDiagnostic, context::RuleContext, declare_lint_rule, |
| 3 | +}; |
| 4 | +use biome_console::markup; |
| 5 | +use biome_js_syntax::{ |
| 6 | + AnyJsxChild, JsxElement, JsxOpeningElement, JsxSelfClosingElement, inner_string_text, |
| 7 | + jsx_ext::AnyJsxElement, |
| 8 | +}; |
| 9 | +use biome_rowan::AstNode; |
| 10 | +use biome_rule_options::no_ambiguous_anchor_text::NoAmbiguousAnchorTextOptions; |
| 11 | +use biome_string_case::StrOnlyExtension; |
| 12 | + |
| 13 | +use crate::a11y::is_hidden_from_screen_reader; |
| 14 | + |
| 15 | +declare_lint_rule! { |
| 16 | + /// Disallow ambiguous anchor descriptions. |
| 17 | + /// |
| 18 | + /// Enforces <a> values are not exact matches for the phrases "click here", "here", "link", "a link", or "learn more". |
| 19 | + /// Screen readers announce tags as links/interactive, but rely on values for context. |
| 20 | + /// Ambiguous anchor descriptions do not provide sufficient context for users. |
| 21 | + /// |
| 22 | + /// ## Examples |
| 23 | + /// |
| 24 | + /// ### Invalid |
| 25 | + /// |
| 26 | + /// ```jsx,expect_diagnostic |
| 27 | + /// const Invalid = () => <a>learn more</a>; |
| 28 | + /// ``` |
| 29 | + /// |
| 30 | + /// ### Valid |
| 31 | + /// |
| 32 | + /// ```jsx |
| 33 | + /// const Valid = () => <a>documentation</a>; |
| 34 | + /// ``` |
| 35 | + /// |
| 36 | + /// ## Options |
| 37 | + /// |
| 38 | + /// ### `words` |
| 39 | + /// |
| 40 | + /// The words option allows users to modify the strings that can be checked for in the anchor text. Useful for specifying other words in other languages. |
| 41 | + /// |
| 42 | + /// Default `["click here", "here", "link", "a link", "learn more"]` |
| 43 | + /// |
| 44 | + /// ```json,options |
| 45 | + /// { |
| 46 | + /// "options": { |
| 47 | + /// "words": ["click this"] |
| 48 | + /// } |
| 49 | + /// } |
| 50 | + /// ``` |
| 51 | + /// |
| 52 | + /// #### Invalid |
| 53 | + /// |
| 54 | + /// ```jsx,expect_diagnostic,use_options |
| 55 | + /// const Invalid = () => <a>click this</a>; |
| 56 | + /// ``` |
| 57 | + /// |
| 58 | + pub NoAmbiguousAnchorText { |
| 59 | + version: "next", |
| 60 | + name: "noAmbiguousAnchorText", |
| 61 | + language: "js", |
| 62 | + recommended: false, |
| 63 | + } |
| 64 | +} |
| 65 | + |
| 66 | +impl Rule for NoAmbiguousAnchorText { |
| 67 | + type Query = Ast<JsxOpeningElement>; |
| 68 | + type State = (); |
| 69 | + type Signals = Option<Self::State>; |
| 70 | + type Options = NoAmbiguousAnchorTextOptions; |
| 71 | + |
| 72 | + fn run(ctx: &RuleContext<Self>) -> Self::Signals { |
| 73 | + let binding = ctx.query(); |
| 74 | + let words = ctx.options().words(); |
| 75 | + |
| 76 | + let name = binding.name().ok()?; |
| 77 | + let jsx_name = name.as_jsx_name()?; |
| 78 | + let value_token = jsx_name.value_token().ok()?; |
| 79 | + if value_token.text_trimmed() != "a" { |
| 80 | + return None; |
| 81 | + } |
| 82 | + |
| 83 | + let parent = JsxElement::cast(binding.syntax().parent()?)?; |
| 84 | + let text = get_accessible_child_text(&parent); |
| 85 | + |
| 86 | + if words.contains(&text) { |
| 87 | + return Some(()); |
| 88 | + } |
| 89 | + |
| 90 | + None |
| 91 | + } |
| 92 | + |
| 93 | + fn diagnostic(ctx: &RuleContext<Self>, _state: &Self::State) -> Option<RuleDiagnostic> { |
| 94 | + let node = ctx.query(); |
| 95 | + let parent = node.syntax().parent()?; |
| 96 | + Some( |
| 97 | + RuleDiagnostic::new( |
| 98 | + rule_category!(), |
| 99 | + parent.text_range(), |
| 100 | + markup! { |
| 101 | + "No ambiguous anchor descriptions allowed." |
| 102 | + }, |
| 103 | + ) |
| 104 | + .note(markup! { |
| 105 | + "Ambiguous anchor descriptions do not provide sufficient context for screen reader users. Provide more context to these users." |
| 106 | + }), |
| 107 | + ) |
| 108 | + } |
| 109 | +} |
| 110 | + |
| 111 | +fn get_aria_label(node: &AnyJsxElement) -> Option<String> { |
| 112 | + let attribute = node.attributes().find_by_name("aria-label")?; |
| 113 | + let initializer = attribute.initializer()?; |
| 114 | + let value = initializer.value().ok()?; |
| 115 | + let text = value.as_jsx_string()?.inner_string_text().ok()?; |
| 116 | + |
| 117 | + Some(text.to_string()) |
| 118 | +} |
| 119 | + |
| 120 | +fn get_img_alt(node: &AnyJsxElement) -> Option<String> { |
| 121 | + let name = node.name().ok()?; |
| 122 | + let jsx_name = name.as_jsx_name()?; |
| 123 | + let value_token = jsx_name.value_token().ok()?; |
| 124 | + if value_token.text_trimmed() != "img" { |
| 125 | + return None; |
| 126 | + } |
| 127 | + |
| 128 | + let attribute = node.attributes().find_by_name("alt")?; |
| 129 | + let initializer = attribute.initializer()?; |
| 130 | + let value = initializer.value().ok()?; |
| 131 | + let jsx_string = value.as_jsx_string()?; |
| 132 | + let text = jsx_string.inner_string_text().ok()?; |
| 133 | + |
| 134 | + Some(text.to_string()) |
| 135 | +} |
| 136 | + |
| 137 | +fn standardize_space_and_case(input: String) -> String { |
| 138 | + input |
| 139 | + .chars() |
| 140 | + .filter(|c| !matches!(c, ',' | '.' | '?' | '¿' | '!' | '‽' | '¡' | ';' | ':')) |
| 141 | + .collect::<String>() |
| 142 | + .to_lowercase_cow() |
| 143 | + .split_whitespace() |
| 144 | + .collect::<Vec<_>>() |
| 145 | + .join(" ") |
| 146 | +} |
| 147 | + |
| 148 | +fn get_self_closing_accessible_text(node: &JsxSelfClosingElement) -> String { |
| 149 | + let any_jsx_element: AnyJsxElement = node.clone().into(); |
| 150 | + if is_hidden_from_screen_reader(&any_jsx_element) { |
| 151 | + return String::new(); |
| 152 | + } |
| 153 | + |
| 154 | + if let Some(aria_label) = get_aria_label(&any_jsx_element) { |
| 155 | + return standardize_space_and_case(aria_label); |
| 156 | + } |
| 157 | + |
| 158 | + if let Some(alt) = get_img_alt(&any_jsx_element) { |
| 159 | + return standardize_space_and_case(alt); |
| 160 | + } |
| 161 | + |
| 162 | + String::new() |
| 163 | +} |
| 164 | + |
| 165 | +fn get_accessible_child_text(node: &JsxElement) -> String { |
| 166 | + if let Ok(opening) = node.opening_element() { |
| 167 | + let any_jsx_element: AnyJsxElement = opening.clone().into(); |
| 168 | + if is_hidden_from_screen_reader(&any_jsx_element) { |
| 169 | + return String::new(); |
| 170 | + } |
| 171 | + |
| 172 | + if let Some(aria_label) = get_aria_label(&any_jsx_element) { |
| 173 | + return standardize_space_and_case(aria_label); |
| 174 | + } |
| 175 | + |
| 176 | + if let Some(alt) = get_img_alt(&any_jsx_element) { |
| 177 | + return standardize_space_and_case(alt); |
| 178 | + } |
| 179 | + }; |
| 180 | + |
| 181 | + let raw_child_text = node |
| 182 | + .children() |
| 183 | + .into_iter() |
| 184 | + .map(|child| match child { |
| 185 | + AnyJsxChild::JsxText(element) => { |
| 186 | + if let Ok(value_token) = element.value_token() { |
| 187 | + inner_string_text(&value_token).to_string() |
| 188 | + } else { |
| 189 | + String::new() |
| 190 | + } |
| 191 | + } |
| 192 | + AnyJsxChild::JsxElement(element) => get_accessible_child_text(&element), |
| 193 | + AnyJsxChild::JsxSelfClosingElement(element) => { |
| 194 | + get_self_closing_accessible_text(&element) |
| 195 | + } |
| 196 | + _ => String::new(), |
| 197 | + }) |
| 198 | + .collect::<Vec<String>>() |
| 199 | + .join(" "); |
| 200 | + |
| 201 | + standardize_space_and_case(raw_child_text) |
| 202 | +} |
0 commit comments