fix(linter): Support cases where aria-hidden includes expressions (#1964)

The rule for
[jsx-a11y/img-redundant-alt](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/docs/rules/img-redundant-alt.md)
states that if aria-hidden is true, the rule will always succeed:

> The rule will first check if aria-hidden is true to determine whether
to enforce the rule. If the image is hidden, then rule will always
succeed.

The [img_redundant_alt
rule](https://github.com/oxc-project/oxc/blob/main/crates/oxc_linter/src/rules/jsx_a11y/img_redundant_alt.rs),
ported to Oxlint, was in an incompatible state because an error occurred
even when including aria-hidden={true}, as demonstrated below:
```jsx
// error
<img alt='photo of cool person' aria-hidden={true} />
```

This issue arose because the
[is_hidden_from_screen_reader](https://github.com/oxc-project/oxc/blob/main/crates/oxc_linter/src/utils/react.rs#L77-L95),
responsible for obtaining the state of aria-hidden, was not handling
cases where aria-hidden includes expressions. This PR addresses the
situation by adding support for cases where expressions are passed to
aria-hidden.
This commit is contained in:
keita hino 2024-01-10 07:33:55 +09:00 committed by GitHub
parent 2b7ca5962f
commit 8d9894ad40
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 5 additions and 0 deletions

View file

@ -219,6 +219,7 @@ fn test() {
(r"<img alt={() => {}} />", None),
(r"<img alt={function(e){}} />", None),
(r"<img aria-hidden={false} alt='Doing cool things.' />", None),
(r"<img alt='photo of cool person' aria-hidden={true} />", None),
(r"<UX.Layout>test</UX.Layout>", None),
(r"<img alt />", None),
(r"<img alt={imageAlt} />", None),

View file

@ -90,6 +90,10 @@ pub fn is_hidden_from_screen_reader(node: &JSXOpeningElement) -> bool {
has_jsx_prop_lowercase(node, "aria-hidden").map_or(false, |v| match get_prop_value(v) {
None => true,
Some(JSXAttributeValue::StringLiteral(s)) if s.value == "true" => true,
Some(JSXAttributeValue::ExpressionContainer(JSXExpressionContainer {
expression: JSXExpression::Expression(expr),
..
})) => expr.get_boolean_value().unwrap_or(false),
_ => false,
})
}