fix(linter/aria-proptypes): allow template literals with expressions for string-type ARIA props

crates/oxc_linter/src/rules/jsx_a11y/aria_proptypes.rs

@@ -136,6 +136,13 @@ fn is_valid_value_for_aria_prop_type(
             matches!(value_string.as_str(), "true" | "false" | "mixed")
         }
         AriaPropType::String | AriaPropType::Id => {
+            // Template literals with expressions always produce strings at runtime
+            if let JSXAttributeValue::ExpressionContainer(container) = value
+                && let JSXExpression::TemplateLiteral(t) = &container.expression
+                && t.single_quasi().is_none()
+            {
+                return true;
+            }
             parse_aria_prop_value_as_string(value, false).is_some()
         }
         AriaPropType::Integer | AriaPropType::Number => {
@@ -150,6 +157,15 @@ fn is_valid_value_for_aria_prop_type(
             }
         }
         AriaPropType::IdList => {
+            // Template literals with expressions always produce strings at runtime and are
+            // valid for ID list ARIA props (e.g., `${id}-label` or `${id}-label ${id}-help-text`).
+            if let JSXAttributeValue::ExpressionContainer(container) = value
+                && let JSXExpression::TemplateLiteral(t) = &container.expression
+                && t.single_quasi().is_none()
+            {
+                return true;
+            }
+
             let Some(value_string) = parse_aria_prop_value_as_string(value, false) else {
                 return false;
             };
@@ -364,6 +380,7 @@ fn test() {
         "<div aria-hidden={!false} />",
         "<div aria-hidden />",
         "<div aria-hidden={false} />",
+        "<div aria-hidden={!!foo} />",
         "<div aria-hidden={!true} />",
         r#"<div aria-hidden={!"yes"} />"#,
         "<div aria-hidden={foo} />",
@@ -375,13 +392,17 @@ fn test() {
         r#"<div aria-label="" />"#,
         "<div aria-label />",
         "<div aria-label={`Close`} />",
+        "<div aria-label={`Hello ${foo}`} />",
+        "<div aria-label={`foo-${id}`} />",
+        "<div aria-label={`foo-${id} bar`} />",
         "<div aria-label={foo} />",
         "<div aria-label={foo.bar} />",
         "<div aria-label={null} />",
         "<div aria-label={undefined} />",
         r#"<input aria-invalid={error ? "true" : "false"} />"#,
         r#"<input aria-invalid={undefined ? "true" : "false"} />"#,
         "<div aria-checked={true} />",
+        "<div aria-checked={!!foo} />",
         r#"<div aria-checked="true" />"#,
         r#"<div aria-checked={"false"} />"#,
         "<div aria-checked={!false} />",
@@ -491,6 +512,15 @@ fn test() {
         "<div aria-labelledby={foo.bar} />",
         "<div aria-labelledby={null} />",
         "<div aria-labelledby={undefined} />",
+        // Ensure that template literals with expressions are allowed for idlist aria props.
+        "<div aria-labelledby={`${id}-label`} />",
+        "<div aria-labelledby={`${id}`} />",
+        "<div aria-labelledby={`${id}-label ${id}-help-text`} />",
+        "<div aria-describedby={`${id}-label`} />",
+        "<div aria-describedby={`${id}`} />",
+        "<div aria-describedby={`${foo.bar}`} />",
+        "<div aria-describedby={`${id}-label ${id}-help-text`} />",
+        "<div aria-describedby={`${foo.bar}-label ${foo.bar}-help-text`} />",
     ];
 
     let fail = vec![
@@ -533,6 +563,12 @@ fn test() {
         r#"<div aria-relevant={"false"} />"#,
         r#"<div aria-relevant="additions removalss" />"#,
         r#"<div aria-relevant="additions removalss " />"#,
+        // Fails because these should not allow boolean values or numbers.
+        "<div aria-labelledby={true} />",
+        "<div aria-labelledby={false} />",
+        "<div aria-labelledby={123} />",
+        // Fails because this is a string, and so not interpolated.
+        r#"<div aria-hidden={"!!foo"} />"#,
     ];
 
     Tester::new(AriaProptypes::NAME, AriaProptypes::PLUGIN, pass, fail).test_and_snapshot();

crates/oxc_linter/src/snapshots/jsx_a11y_aria_proptypes.snap

@@ -312,3 +312,35 @@ source: crates/oxc_linter/src/tester.rs
    ╰────
   help: The valid value for 'aria-relevant' is: a space-separated list of the following tokens: additions, all, removals, text.
         You can find a list of valid ARIA state and property values at https://www.w3.org/TR/wai-aria/#x6-7-definitions-of-states-and-properties-all-aria-attributes
+
+  ⚠ eslint-plugin-jsx-a11y(aria-proptypes): This is not a valid ARIA state and property value for 'aria-labelledby'.
+   ╭─[aria_proptypes.tsx:1:6]
+ 1 │ <div aria-labelledby={true} />
+   ·      ──────────────────────
+   ╰────
+  help: The valid value for 'aria-labelledby' is: a space-separated list of element IDs.
+        You can find a list of valid ARIA state and property values at https://www.w3.org/TR/wai-aria/#x6-7-definitions-of-states-and-properties-all-aria-attributes
+
+  ⚠ eslint-plugin-jsx-a11y(aria-proptypes): This is not a valid ARIA state and property value for 'aria-labelledby'.
+   ╭─[aria_proptypes.tsx:1:6]
+ 1 │ <div aria-labelledby={false} />
+   ·      ───────────────────────
+   ╰────
+  help: The valid value for 'aria-labelledby' is: a space-separated list of element IDs.
+        You can find a list of valid ARIA state and property values at https://www.w3.org/TR/wai-aria/#x6-7-definitions-of-states-and-properties-all-aria-attributes
+
+  ⚠ eslint-plugin-jsx-a11y(aria-proptypes): This is not a valid ARIA state and property value for 'aria-labelledby'.
+   ╭─[aria_proptypes.tsx:1:6]
+ 1 │ <div aria-labelledby={123} />
+   ·      ─────────────────────
+   ╰────
+  help: The valid value for 'aria-labelledby' is: a space-separated list of element IDs.
+        You can find a list of valid ARIA state and property values at https://www.w3.org/TR/wai-aria/#x6-7-definitions-of-states-and-properties-all-aria-attributes
+
+  ⚠ eslint-plugin-jsx-a11y(aria-proptypes): This is not a valid ARIA state and property value for 'aria-hidden'.
+   ╭─[aria_proptypes.tsx:1:6]
+ 1 │ <div aria-hidden={"!!foo"} />
+   ·      ─────────────────────
+   ╰────
+  help: The valid value for 'aria-hidden' is: 'true' or 'false'.
+        You can find a list of valid ARIA state and property values at https://www.w3.org/TR/wai-aria/#x6-7-definitions-of-states-and-properties-all-aria-attributes