-
-
Notifications
You must be signed in to change notification settings - Fork 518
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(linter): eslint-plugin-jsx-a11y iframe-has-title rule (correctne…
…ss) (#1589) ## Summary partof: #1141 I re-implemented iframe-has-title rule for jsx_a11y in Rust same as the original JS one, and moved also the test related to the rule to here. originals: - doc: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/docs/rules/iframe-has-title.md - code: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/src/rules/iframe-has-title.js - test: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/__tests__/src/rules/iframe-has-title-test.js
- Loading branch information
1 parent
2f90ca1
commit b573036
Showing
3 changed files
with
227 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
156 changes: 156 additions & 0 deletions
156
crates/oxc_linter/src/rules/jsx_a11y/iframe_has_title.rs
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,156 @@ | ||
use oxc_ast::{ | ||
ast::{Expression, JSXAttributeValue, JSXElementName, JSXExpression, JSXExpressionContainer}, | ||
AstKind, | ||
}; | ||
use oxc_diagnostics::{ | ||
miette::{self, Diagnostic}, | ||
thiserror::Error, | ||
}; | ||
use oxc_macros::declare_oxc_lint; | ||
use oxc_span::Span; | ||
|
||
use crate::{ | ||
context::LintContext, | ||
rule::Rule, | ||
utils::{get_prop_value, has_jsx_prop_lowercase}, | ||
AstNode, | ||
}; | ||
|
||
#[derive(Debug, Error, Diagnostic)] | ||
#[error( | ||
"eslint-plugin-jsx-a11y(iframe-has-title): Missing `title` attribute for the `iframe` element." | ||
)] | ||
#[diagnostic(severity(warning), help("Provide title property for iframe element."))] | ||
struct IframeHasTitleDiagnostic(#[label] pub Span); | ||
|
||
#[derive(Debug, Default, Clone)] | ||
pub struct IframeHasTitle; | ||
|
||
declare_oxc_lint!( | ||
/// ### What it does | ||
/// | ||
/// Enforce iframe elements have a title attribute. | ||
/// | ||
/// ### Why is this necessary? | ||
/// | ||
/// Screen reader users rely on a iframe title to describe the contents of the iframe. | ||
/// Navigating through iframe and iframe elements quickly becomes difficult and confusing for users of this technology if the markup does not contain a title attribute. | ||
/// | ||
/// ### What it checks | ||
/// | ||
/// This rule checks for title property on iframe element. | ||
/// | ||
/// ### Example | ||
/// ```javascript | ||
/// // Bad | ||
/// <iframe /> | ||
/// <iframe {...props} /> | ||
/// <iframe title="" /> | ||
/// <iframe title={''} /> | ||
/// <iframe title={``} /> | ||
/// <iframe title={undefined} /> | ||
/// <iframe title={false} /> | ||
/// <iframe title={true} /> | ||
/// <iframe title={42} /> | ||
/// | ||
/// // Good | ||
/// <iframe title="This is a unique title" /> | ||
/// <iframe title={uniqueTitle} /> | ||
/// ``` | ||
IframeHasTitle, | ||
correctness | ||
); | ||
|
||
impl Rule for IframeHasTitle { | ||
fn run<'a>(&self, node: &AstNode<'a>, ctx: &LintContext<'a>) { | ||
let AstKind::JSXOpeningElement(jsx_el) = node.kind() else { | ||
return; | ||
}; | ||
|
||
let JSXElementName::Identifier(iden) = &jsx_el.name else { | ||
return; | ||
}; | ||
|
||
let name = iden.name.as_str(); | ||
|
||
if name != "iframe" { | ||
return; | ||
} | ||
|
||
let alt_prop = if let Some(prop) = has_jsx_prop_lowercase(jsx_el, "title") { | ||
prop | ||
} else { | ||
ctx.diagnostic(IframeHasTitleDiagnostic(iden.span)); | ||
return; | ||
}; | ||
|
||
match get_prop_value(alt_prop) { | ||
Some(JSXAttributeValue::StringLiteral(str)) => { | ||
if !str.value.as_str().is_empty() { | ||
return; | ||
} | ||
} | ||
Some(JSXAttributeValue::ExpressionContainer(JSXExpressionContainer { | ||
expression: JSXExpression::Expression(expr), | ||
.. | ||
})) => { | ||
if expr.is_string_literal() { | ||
if let Expression::StringLiteral(str) = expr { | ||
if !str.value.as_str().is_empty() { | ||
return; | ||
} | ||
} | ||
if let Expression::TemplateLiteral(tmpl) = expr { | ||
if !tmpl.quasis.is_empty() | ||
& !tmpl.expressions.is_empty() | ||
& tmpl.quasis.iter().any(|q| !q.value.raw.as_str().is_empty()) | ||
{ | ||
return; | ||
} | ||
} | ||
} | ||
|
||
if expr.is_identifier_reference() & !expr.is_undefined() { | ||
return; | ||
} | ||
} | ||
_ => {} | ||
} | ||
|
||
ctx.diagnostic(IframeHasTitleDiagnostic(iden.span)); | ||
} | ||
} | ||
|
||
#[test] | ||
fn test() { | ||
use crate::tester::Tester; | ||
|
||
let pass = vec![ | ||
// DEFAULT ELEMENT TESTS | ||
(r"<div />;", None), | ||
(r"<iframe title='Unique title' />", None), | ||
(r"<iframe title={foo} />", None), | ||
(r"<FooComponent />", None), | ||
// TODO: When polymorphic components are supported | ||
// CUSTOM ELEMENT TESTS FOR COMPONENTS SETTINGS | ||
// (r"<FooComponent title='Unique title' />", None), | ||
]; | ||
|
||
let fail = vec![ | ||
// DEFAULT ELEMENT TESTS | ||
(r"<iframe />", None), | ||
(r"<iframe {...props} />", None), | ||
(r"<iframe title={undefined} />", None), | ||
(r"<iframe title='' />", None), | ||
(r"<iframe title={false} />", None), | ||
(r"<iframe title={true} />", None), | ||
(r"<iframe title={''} />", None), | ||
(r"<iframe title={``} />", None), | ||
(r"<iframe title={42} />", None), | ||
// TODO: When polymorphic components are supported | ||
// CUSTOM ELEMENT TESTS FOR COMPONENTS SETTINGS | ||
// (r"<FooComponent />", None), | ||
]; | ||
|
||
Tester::new(IframeHasTitle::NAME, pass, fail).with_jsx_a11y_plugin(true).test_and_snapshot(); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,68 @@ | ||
--- | ||
source: crates/oxc_linter/src/tester.rs | ||
expression: iframe_has_title | ||
--- | ||
⚠ eslint-plugin-jsx-a11y(iframe-has-title): Missing `title` attribute for the `iframe` element. | ||
╭─[iframe_has_title.tsx:1:1] | ||
1 │ <iframe /> | ||
· ────── | ||
╰──── | ||
help: Provide title property for iframe element. | ||
|
||
⚠ eslint-plugin-jsx-a11y(iframe-has-title): Missing `title` attribute for the `iframe` element. | ||
╭─[iframe_has_title.tsx:1:1] | ||
1 │ <iframe {...props} /> | ||
· ────── | ||
╰──── | ||
help: Provide title property for iframe element. | ||
|
||
⚠ eslint-plugin-jsx-a11y(iframe-has-title): Missing `title` attribute for the `iframe` element. | ||
╭─[iframe_has_title.tsx:1:1] | ||
1 │ <iframe title={undefined} /> | ||
· ────── | ||
╰──── | ||
help: Provide title property for iframe element. | ||
|
||
⚠ eslint-plugin-jsx-a11y(iframe-has-title): Missing `title` attribute for the `iframe` element. | ||
╭─[iframe_has_title.tsx:1:1] | ||
1 │ <iframe title='' /> | ||
· ────── | ||
╰──── | ||
help: Provide title property for iframe element. | ||
|
||
⚠ eslint-plugin-jsx-a11y(iframe-has-title): Missing `title` attribute for the `iframe` element. | ||
╭─[iframe_has_title.tsx:1:1] | ||
1 │ <iframe title={false} /> | ||
· ────── | ||
╰──── | ||
help: Provide title property for iframe element. | ||
|
||
⚠ eslint-plugin-jsx-a11y(iframe-has-title): Missing `title` attribute for the `iframe` element. | ||
╭─[iframe_has_title.tsx:1:1] | ||
1 │ <iframe title={true} /> | ||
· ────── | ||
╰──── | ||
help: Provide title property for iframe element. | ||
|
||
⚠ eslint-plugin-jsx-a11y(iframe-has-title): Missing `title` attribute for the `iframe` element. | ||
╭─[iframe_has_title.tsx:1:1] | ||
1 │ <iframe title={''} /> | ||
· ────── | ||
╰──── | ||
help: Provide title property for iframe element. | ||
|
||
⚠ eslint-plugin-jsx-a11y(iframe-has-title): Missing `title` attribute for the `iframe` element. | ||
╭─[iframe_has_title.tsx:1:1] | ||
1 │ <iframe title={``} /> | ||
· ────── | ||
╰──── | ||
help: Provide title property for iframe element. | ||
|
||
⚠ eslint-plugin-jsx-a11y(iframe-has-title): Missing `title` attribute for the `iframe` element. | ||
╭─[iframe_has_title.tsx:1:1] | ||
1 │ <iframe title={42} /> | ||
· ────── | ||
╰──── | ||
help: Provide title property for iframe element. | ||
|
||
|