mirror of
https://github.com/danbulant/oxc
synced 2026-05-24 12:21:58 +00:00
feat(linter): eslint-plugin-jsx-a11y iframe-has-title rule (correctness) (#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
This commit is contained in:
Shinobu Hayashi
GitHub
parent
2f90ca1b54
commit
b573036035
3 changed files with 227 additions and 1 deletions
|
|
@ -218,6 +218,7 @@ mod jsx_a11y {
|
|||
pub mod anchor_is_valid;
|
||||
pub mod heading_has_content;
|
||||
pub mod html_has_lang;
|
||||
pub mod iframe_has_title;
|
||||
pub mod img_redundant_alt;
|
||||
}
|
||||
|
||||
|
|
@ -412,5 +413,6 @@ oxc_macros::declare_all_lint_rules! {
|
|||
jsx_a11y::anchor_is_valid,
|
||||
jsx_a11y::html_has_lang,
|
||||
jsx_a11y::heading_has_content,
|
||||
jsx_a11y::img_redundant_alt
|
||||
jsx_a11y::iframe_has_title,
|
||||
jsx_a11y::img_redundant_alt,
|
||||
}
|
||||
|
|
|
|||
156
crates/oxc_linter/src/rules/jsx_a11y/iframe_has_title.rs
Normal file
156
crates/oxc_linter/src/rules/jsx_a11y/iframe_has_title.rs
Normal file
|
|
@ -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();
|
||||
}
|
||||
68
crates/oxc_linter/src/snapshots/iframe_has_title.snap
Normal file
68
crates/oxc_linter/src/snapshots/iframe_has_title.snap
Normal file
|
|
@ -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.
|
||||
|
||||
|
||||
Loading…
Reference in a new issue