Skip to content
This repository has been archived by the owner on Aug 31, 2023. It is now read-only.

feat(rome_js_analyzer): rule useHtmlLang #4052

Merged
merged 3 commits into from
Dec 21, 2022
Merged

feat(rome_js_analyzer): rule useHtmlLang #4052

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ff434a5
feat(rome_js_analyzer): rule `useHtmlLang`
mrkldshv Dec 13, 2022
2ac0598
feat(rome_js_analyzer): adjust `useHtmlLang` rule and update docs
mrkldshv Dec 14, 2022
646cf7e
feat(rome_js_analyzer): handle `JsTemplateExpression`
mrkldshv Dec 17, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions crates/rome_diagnostics_categories/src/categories.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ define_dategories! {
"lint/a11y/useKeyWithClickEvents": "https://docs.rome.tools/lint/rules/useKeyWithClickEvents",
"lint/a11y/useKeyWithMouseEvents": "https://docs.rome.tools/lint/rules/useKeyWithMouseEvents",
"lint/a11y/useValidAnchor": "https://docs.rome.tools/lint/rules/useValidAnchor",
"lint/a11y/useHtmlLang": "https://docs.rome.tools/lint/rules/useHtmlLang",

// complexity
"lint/complexity/noExtraBooleanCast": "https://docs.rome.tools/lint/rules/noExtraBooleanCast",
Expand Down
3 changes: 2 additions & 1 deletion crates/rome_js_analyze/src/analyzers/a11y.rs
View file
Open in desktop

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

159 changes: 159 additions & 0 deletions crates/rome_js_analyze/src/analyzers/a11y/use_html_lang.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,159 @@
use rome_analyze::{context::RuleContext, declare_rule, Ast, Rule, RuleDiagnostic};
use rome_console::markup;
use rome_js_syntax::{
jsx_ext::AnyJsxElement, AnyJsxAttribute, AnyJsxAttributeValue, JsxAttribute, TextRange,
};
use rome_rowan::AstNode;

declare_rule! {
/// Enforce that `html` element has `lang` attribute.
/// This allows users to choose a language other than the default.
/// ## Examples
///
/// ### Invalid
///
/// ```jsx,expect_diagnostic
/// <html></html>
/// ```
///
/// ```jsx,expect_diagnostic
/// <html lang={""}></html>
/// ```
///
/// ```jsx,expect_diagnostic
/// <html lang={null}></html>
/// ```
///
/// ```jsx,expect_diagnostic
/// <html lang={undefined}></html>
/// ```
///
/// ```jsx,expect_diagnostic
/// <html lang={true}></html>
/// ```
///
/// ### Valid
///
/// ```jsx
/// <html lang="en"></html>
/// ```
///
/// ```jsx
/// <html lang={language}></html>
/// ```
///
/// ```jsx
/// <html {...props}></html>
/// ```
///
/// ```jsx
/// <html lang={""} {...props}></html>
/// ```
///
/// ## Accessibility guidelines
///
/// [WCAG 3.1.1](https://www.w3.org/WAI/WCAG21/Understanding/language-of-page)
pub(crate) UseHtmlLang {
version: "12.0.0",
name: "useHtmlLang",
recommended: true,
}
}

impl Rule for UseHtmlLang {
type Query = Ast<AnyJsxElement>;
type State = TextRange;
type Signals = Option<Self::State>;
type Options = ();

fn run(ctx: &RuleContext<Self>) -> Self::Signals {
let element = ctx.query();
let name = element.name().ok()?;
let name = name.as_jsx_name()?.value_token().ok()?;
let name_trimmed = name.text_trimmed();
if name_trimmed == "html" {
if let Some(lang_attribute) = element.find_attribute_by_name("lang") {
if element.has_trailing_spread_prop(lang_attribute.clone())
mrkldshv marked this conversation as resolved.
Show resolved Hide resolved
|| is_valid_lang_attribute(lang_attribute).is_some()
{
return None;
}
return Some(element.syntax().text_trimmed_range());
}
if !has_spread_prop(element) {
return Some(element.syntax().text_trimmed_range());
}
}
None
}

fn diagnostic(_ctx: &RuleContext<Self>, state: &Self::State) -> Option<RuleDiagnostic> {
Some(RuleDiagnostic::new(
rule_category!(),
state,
markup! {
"Provide a "<Emphasis>"lang"</Emphasis>" attribute when using the "<Emphasis>"html"</Emphasis>" element."
}
).note(
markup! {
"Setting a "<Emphasis>"lang"</Emphasis>" attribute on HTML document elements configures the language
used by screen readers when no user default is specified."
}
))
}
}

fn is_valid_lang_attribute(attr: JsxAttribute) -> Option<()> {
if attr.is_value_undefined_or_null() {
return None;
}

let attribute_value = attr.initializer()?.value().ok()?;

if let AnyJsxAttributeValue::JsxExpressionAttributeValue(expression) = attribute_value {
let expression = expression.expression().ok()?;

if expression.as_js_identifier_expression().is_some() {
return Some(());
}

if let Some(template_expression) = expression.as_js_template_expression() {
let template_element = template_expression
.elements()
.into_iter()
.find(|element| element.as_js_template_chunk_element().is_some());

if template_element.is_some() {
return Some(());
};
}

expression
.as_any_js_literal_expression()?
.as_js_boolean_literal_expression();

let string_expression = expression
.as_any_js_literal_expression()?
.as_js_string_literal_expression()?;
let string_expression_text = string_expression.inner_string_text().ok()?;

if string_expression_text.is_empty() {
return None;
}

return Some(());
leops marked this conversation as resolved.
Show resolved Hide resolved
}
let string_text = attribute_value.as_jsx_string()?.inner_string_text().ok()?;
if string_text.is_empty() {
return None;
}

Some(())
}

fn has_spread_prop(element: &AnyJsxElement) -> bool {
element
.attributes()
.into_iter()
.any(|attribute| matches!(attribute, AnyJsxAttribute::JsxSpreadAttribute(_)))
}
20 changes: 20 additions & 0 deletions crates/rome_js_analyze/tests/specs/a11y/useHtmlLang.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
<>
{/* invalid */}
<html />
<html></html>
<html lang=""></html>
<html lang={""}></html>
mrkldshv marked this conversation as resolved.
Show resolved Hide resolved
<html lang={``}></html>
<html lang={true}></html>
<html lang={false}></html>
<html lang={undefined}></html>
<html lang={null}></html>
<html {...props} lang=""></html>
{/* valid */}
<html lang="en"></html>
<html lang={"en"}></html>
<html lang={`en`}></html>
<html lang={lang}></html>
<html {...props}></html>
<html lang="" {...props}></html>
</>
Loading