Skip to content

Commit

Permalink
feat(linter): eslint-plugin-jsx-a11y iframe-has-title rule (correctne…
Browse files Browse the repository at this point in the history
  • Loading branch information
Shinyaigeek committed Dec 3, 2023
1 parent 2f90ca1 commit b573036
Show file tree
Hide file tree
Showing 3 changed files with 227 additions and 1 deletion.
4 changes: 3 additions & 1 deletion crates/oxc_linter/src/rules.rs
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

Expand Down Expand Up @@ -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 changes: 156 additions & 0 deletions crates/oxc_linter/src/rules/jsx_a11y/iframe_has_title.rs
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();
}
68 changes: 68 additions & 0 deletions crates/oxc_linter/src/snapshots/iframe_has_title.snap
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.


0 comments on commit b573036

Please sign in to comment.