Extract rule: template-require-iframe-title

README.md

@@ -197,6 +197,7 @@ rules in templates can be disabled with eslint directives with mustache or html
 | [template-no-nested-interactive](docs/rules/template-no-nested-interactive.md)                         | disallow nested interactive elements                                             |    |    |    |
 | [template-no-nested-landmark](docs/rules/template-no-nested-landmark.md)                               | disallow nested landmark elements                                                |    |    |    |
 | [template-no-pointer-down-event-binding](docs/rules/template-no-pointer-down-event-binding.md)         | disallow pointer down event bindings                                             |    |    |    |
+| [template-require-iframe-title](docs/rules/template-require-iframe-title.md)                           | require iframe elements to have a title attribute                                |    |    |    |
 | [template-require-input-label](docs/rules/template-require-input-label.md)                             | require label for form input elements                                            |    |    |    |
 | [template-require-lang-attribute](docs/rules/template-require-lang-attribute.md)                       | require lang attribute on html element                                           |    |    |    |
 | [template-require-mandatory-role-attributes](docs/rules/template-require-mandatory-role-attributes.md) | require mandatory ARIA attributes for ARIA roles                                 |    |    |    |

docs/rules/template-require-iframe-title.md

@@ -0,0 +1,36 @@
+# ember/template-require-iframe-title
+
+<!-- end auto-generated rule header -->
+
+## `<iframe>`
+
+`<iframe>` elements must have a unique title property to indicate its content to the user.
+
+This rule takes no arguments.
+
+## Examples
+
+This rule **allows** the following:
+
+```gjs
+<template>
+  <iframe title='This is a unique title' />
+  <iframe title={{someValue}} />
+</template>
+```
+
+This rule **forbids** the following:
+
+```gjs
+<template>
+  <iframe />
+  <iframe title='' />
+</template>
+```
+
+## References
+
+- [Deque University](https://dequeuniversity.com/rules/axe/1.1/frame-title)
+- [Technique H65: Using the title attribute of the frame and iframe elements](https://www.w3.org/TR/2014/NOTE-WCAG20-TECHS-20140408/H64)
+- [WCAG Success Criterion 2.4.1 - Bypass Blocks](https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-skip.html)
+- [WCAG Success Criterion 4.1.2 - Name, Role, Value](https://www.w3.org/TR/UNDERSTANDING-WCAG20/ensure-compat-rsv.html)

lib/rules/template-require-iframe-title.js

@@ -0,0 +1,89 @@
+/** @type {import('eslint').Rule.RuleModule} */
+module.exports = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description: 'require iframe elements to have a title attribute',
+      category: 'Accessibility',
+      url: 'https://github.com/ember-cli/eslint-plugin-ember/tree/master/docs/rules/template-require-iframe-title.md',
+      templateMode: 'both',
+    },
+    schema: [],
+    messages: {
+      missingTitle: '<iframe> elements must have a unique title property.',
+    },
+    originallyFrom: {
+      name: 'ember-template-lint',
+      rule: 'lib/rules/require-iframe-title.js',
+      docs: 'docs/rule/require-iframe-title.md',
+      tests: 'test/unit/rules/require-iframe-title-test.js',
+    },
+  },
+  create(context) {
+    const knownTitles = [];
+
+    return {
+      GlimmerElementNode(node) {
+        if (node.tag !== 'iframe') {
+          return;
+        }
+
+        // Skip if aria-hidden or hidden
+        const hasAriaHidden = node.attributes?.some((a) => a.name === 'aria-hidden');
+        const hasHidden = node.attributes?.some((a) => a.name === 'hidden');
+        if (hasAriaHidden || hasHidden) {
+          return;
+        }
+
+        // Check for title attribute
+        const titleAttr = node.attributes?.find((a) => a.name === 'title');
+        if (!titleAttr) {
+          context.report({ node, messageId: 'missingTitle' });
+          return;
+        }
+
+        if (titleAttr.value) {
+          switch (titleAttr.value.type) {
+            case 'GlimmerTextNode': {
+              const value = titleAttr.value.chars.trim();
+              if (value.length === 0) {
+                context.report({ node, messageId: 'missingTitle' });
+              } else {
+                // Check for duplicate titles
+                const existingIdx = knownTitles.findIndex(([val]) => val === value);
+                if (existingIdx === -1) {
+                  knownTitles.push([value, node]);
+                } else {
+                  context.report({ node, messageId: 'missingTitle' });
+                }
+              }
+              break;
+            }
+            case 'GlimmerMustacheStatement': {
+              // title={{false}} → BooleanLiteral false is invalid
+              if (titleAttr.value.path?.type === 'GlimmerBooleanLiteral') {
+                context.report({ node, messageId: 'missingTitle' });
+              }
+              break;
+            }
+            case 'GlimmerConcatStatement': {
+              // title="{{false}}" → ConcatStatement with single BooleanLiteral part
+              const parts = titleAttr.value.parts || [];
+              if (
+                parts.length === 1 &&
+                parts[0].type === 'GlimmerMustacheStatement' &&
+                parts[0].path?.type === 'GlimmerBooleanLiteral'
+              ) {
+                context.report({ node, messageId: 'missingTitle' });
+              }
+              break;
+            }
+            default: {
+              break;
+            }
+          }
+        }
+      },
+    };
+  },
+};

tests/lib/rules/template-require-iframe-title.js

@@ -0,0 +1,118 @@
+const rule = require('../../../lib/rules/template-require-iframe-title');
+const RuleTester = require('eslint').RuleTester;
+
+const ruleTester = new RuleTester({
+  parser: require.resolve('ember-eslint-parser'),
+  parserOptions: { ecmaVersion: 2022, sourceType: 'module' },
+});
+
+ruleTester.run('template-require-iframe-title', rule, {
+  valid: [
+    '<template><iframe title="Video"></iframe></template>',
+    '<template><iframe title="Map" src="/map"></iframe></template>',
+    '<template><iframe aria-hidden="true"></iframe></template>',
+    '<template><iframe hidden></iframe></template>',
+
+    '<template><iframe title="Welcome to the Matrix!" /></template>',
+    '<template><iframe title={{someValue}} /></template>',
+    '<template><iframe title="" aria-hidden /></template>',
+    '<template><iframe title="" hidden /></template>',
+    '<template><iframe title="foo" /><iframe title="bar" /></template>',
+  ],
+  invalid: [
+    {
+      code: '<template><iframe src="/content"></iframe></template>',
+      output: null,
+      errors: [{ messageId: 'missingTitle' }],
+    },
+    {
+      code: '<template><iframe title=""></iframe></template>',
+      output: null,
+      errors: [{ messageId: 'missingTitle' }],
+    },
+
+    {
+      code: '<template><iframe title="foo" /><iframe title="foo" /></template>',
+      output: null,
+      errors: [{ messageId: 'missingTitle' }],
+    },
+    {
+      code: '<template><iframe title="foo" /><iframe title="boo" /><iframe title="foo" /><iframe title="boo" /></template>',
+      output: null,
+      errors: [{ messageId: 'missingTitle' }, { messageId: 'missingTitle' }],
+    },
+    {
+      code: '<template><iframe src="12" /></template>',
+      output: null,
+      errors: [{ messageId: 'missingTitle' }],
+    },
+    {
+      code: '<template><iframe src="12" title={{false}} /></template>',
+      output: null,
+      errors: [{ messageId: 'missingTitle' }],
+    },
+    {
+      code: '<template><iframe src="12" title="{{false}}" /></template>',
+      output: null,
+      errors: [{ messageId: 'missingTitle' }],
+    },
+    {
+      code: '<template><iframe src="12" title="" /></template>',
+      output: null,
+      errors: [{ messageId: 'missingTitle' }],
+    },
+  ],
+});
+
+const hbsRuleTester = new RuleTester({
+  parser: require.resolve('ember-eslint-parser/hbs'),
+  parserOptions: {
+    ecmaVersion: 2022,
+    sourceType: 'module',
+  },
+});
+
+hbsRuleTester.run('template-require-iframe-title', rule, {
+  valid: [
+    '<iframe title="Welcome to the Matrix!" />',
+    '<iframe title={{someValue}} />',
+    '<iframe title="" aria-hidden />',
+    '<iframe title="" hidden />',
+    '<iframe title="foo" /><iframe title="bar" />',
+  ],
+  invalid: [
+    {
+      code: '<iframe title="foo" /><iframe title="foo" />',
+      output: null,
+      errors: [{ message: '<iframe> elements must have a unique title property.' }],
+    },
+    {
+      code: '<iframe title="foo" /><iframe title="boo" /><iframe title="foo" /><iframe title="boo" />',
+      output: null,
+      errors: [
+        { message: '<iframe> elements must have a unique title property.' },
+        { message: '<iframe> elements must have a unique title property.' },
+      ],
+    },
+    {
+      code: '<iframe src="12" />',
+      output: null,
+      errors: [{ message: '<iframe> elements must have a unique title property.' }],
+    },
+    {
+      code: '<iframe src="12" title={{false}} />',
+      output: null,
+      errors: [{ message: '<iframe> elements must have a unique title property.' }],
+    },
+    {
+      code: '<iframe src="12" title="{{false}}" />',
+      output: null,
+      errors: [{ message: '<iframe> elements must have a unique title property.' }],
+    },
+    {
+      code: '<iframe src="12" title="" />',
+      output: null,
+      errors: [{ message: '<iframe> elements must have a unique title property.' }],
+    },
+  ],
+});