Merge pull request #2474 from NullVoxPopuli/nvp/template-lint-extract-rule-template-no-invalid-meta

Extract rule: template-no-invalid-meta

Author: NullVoxPopuli

README.md

@@ -210,6 +210,7 @@ rules in templates can be disabled with eslint directives with mustache or html
 | [template-no-inline-styles](docs/rules/template-no-inline-styles.md)                                         | disallow inline styles                                                  |    |    |    |
 | [template-no-input-placeholder](docs/rules/template-no-input-placeholder.md)                                 | disallow placeholder attribute on input elements                        |    |    |    |
 | [template-no-input-tagname](docs/rules/template-no-input-tagname.md)                                         | disallow tagName attribute on {{input}} helper                          |    |    |    |
+| [template-no-invalid-meta](docs/rules/template-no-invalid-meta.md)                                           | disallow invalid meta tags                                              |    |    |    |
 | [template-no-log](docs/rules/template-no-log.md)                                                             | disallow {{log}} in templates                                           |    |    |    |
 | [template-no-model-argument-in-route-templates](docs/rules/template-no-model-argument-in-route-templates.md) | disallow @model argument in route templates                             |    | 🔧 |    |
 | [template-no-multiple-empty-lines](docs/rules/template-no-multiple-empty-lines.md)                           | disallow multiple consecutive empty lines in templates                  |    |    |    |

docs/rules/template-no-invalid-meta.md

@@ -0,0 +1,117 @@
+# ember/template-no-invalid-meta
+
+<!-- end auto-generated rule header -->
+
+Disallow invalid meta tags.
+
+Meta tags must be well-formed and follow accessibility/usability best practices.
+
+## Rule Details
+
+This rule checks `<meta>` elements for the following issues:
+
+1. **Invalid charset** — `charset` must be `utf-8` (case-insensitive).
+2. **Missing `content`** — If `name`, `property`, `itemprop`, or `http-equiv` is present, a `content` attribute is required.
+3. **Missing identifier** — If `content` is present, one of `name`, `property`, `itemprop`, `http-equiv`, or `charset` must also be present.
+4. **`http-equiv="refresh"` redirect delay** — A meta refresh that redirects (contains `;`) must have a delay of `0`.
+5. **`http-equiv="refresh"` plain delay** — A meta refresh without a redirect must have a delay greater than 72000 seconds.
+6. **Viewport `user-scalable=no`** — Disabling user scaling harms accessibility.
+7. **Viewport `maximum-scale`** — Setting a maximum scale restricts zooming.
+
+## Redirects & Refresh
+
+Sometimes a page automatically redirects to a different page. When this happens after a timed delay, it is an unexpected change of context that may interrupt the user. Redirects without timed delays are okay, but please consider a server-side method for redirecting instead (method will vary based on your server type).
+
+## Orientation Lock
+
+When content is presented with a restriction to a specific orientation, users must orient their devices to view the content in the orientation that the author imposed. Some users have their devices mounted in a fixed orientation (e.g. on the arm of a power wheelchair), and if the content cannot be viewed in that orientation it creates problems for the user.
+
+## Examples
+
+### Incorrect
+
+```gjs
+<template>
+  <meta charset="iso-8859-1" />
+</template>
+```
+
+```gjs
+<template>
+  <meta name="description" />
+</template>
+```
+
+Missing `content` when `name` is present.
+
+```gjs
+<template>
+  <meta content="some value" />
+</template>
+```
+
+Missing identifier (`name`, `property`, `itemprop`, or `http-equiv`) when `content` is present.
+
+```gjs
+<template>
+  <meta http-equiv="refresh" content="5;url=https://example.com" />
+</template>
+```
+
+Redirect delay must be 0.
+
+```gjs
+<template>
+  <meta http-equiv="refresh" content="30" />
+</template>
+```
+
+Plain refresh delay must be greater than 72000.
+
+```gjs
+<template>
+  <meta name="viewport" content="width=device-width, user-scalable=no" />
+</template>
+```
+
+```gjs
+<template>
+  <meta name="viewport" content="width=device-width, maximum-scale=1" />
+</template>
+```
+
+### Correct
+
+```gjs
+<template>
+  <meta charset="utf-8" />
+</template>
+```
+
+```gjs
+<template>
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+</template>
+```
+
+```gjs
+<template>
+  <meta name="description" content="A description of the page" />
+</template>
+```
+
+```gjs
+<template>
+  <meta http-equiv="refresh" content="0;url=https://example.com" />
+</template>
+```
+
+## Migration
+
+- To fix, reduce the timed delay to zero, or use the appropriate server-side redirect method for your server type.
+- To fix orientation issues, remove references to `maximum-scale=1.0` and change `user-scalable=no` to `user-scalable=yes`.
+
+## References
+
+- [MDN - Meta charset](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta#attr-charset)
+- [WCAG - Meta Refresh](https://www.w3.org/TR/WCAG21/Understanding/timing-adjustable.html)

lib/rules/template-no-invalid-meta.js

@@ -0,0 +1,134 @@
+/** @type {import('eslint').Rule.RuleModule} */
+module.exports = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description: 'disallow invalid meta tags',
+      category: 'Best Practices',
+      url: 'https://github.com/ember-cli/eslint-plugin-ember/tree/master/docs/rules/template-no-invalid-meta.md',
+      templateMode: 'both',
+    },
+    fixable: null,
+    schema: [],
+    messages: {
+      invalidCharset: 'Meta charset should be "utf-8". Found: "{{charset}}".',
+      metaRefreshRedirect: 'A meta redirect should not have a delay value greater than zero.',
+      metaRefreshDelay: 'A meta refresh should have a delay greater than 72000 seconds.',
+      viewportUserScalable: 'A meta viewport should not restrict user-scalable.',
+      viewportMaximumScale: 'A meta viewport should not set a maximum scale on content.',
+      metaMissingContent:
+        'A meta content attribute must be defined if the name, property, itemprop, or http-equiv attribute is defined.',
+      metaMissingIdentifier:
+        'A meta content attribute cannot be defined if the name, property, itemprop, nor the http-equiv attributes are defined.',
+    },
+    originallyFrom: {
+      name: 'ember-template-lint',
+      rule: 'lib/rules/no-invalid-meta.js',
+      docs: 'docs/rule/no-invalid-meta.md',
+      tests: 'test/unit/rules/no-invalid-meta-test.js',
+    },
+  },
+
+  create(context) {
+    return {
+      // eslint-disable-next-line complexity
+      GlimmerElementNode(node) {
+        if (node.tag !== 'meta') {
+          return;
+        }
+
+        function findAttr(name) {
+          return node.attributes.find((a) => a.type === 'GlimmerAttrNode' && a.name === name);
+        }
+
+        function getAttrText(name) {
+          const attr = findAttr(name);
+          if (attr && attr.value && attr.value.type === 'GlimmerTextNode') {
+            return attr.value.chars;
+          }
+          return undefined;
+        }
+
+        const hasCharset = Boolean(findAttr('charset'));
+        const hasName = Boolean(findAttr('name'));
+        const hasHttpEquiv = Boolean(findAttr('http-equiv'));
+        const hasProperty = Boolean(findAttr('property'));
+        const hasItemprop = Boolean(findAttr('itemprop'));
+        const hasContent = Boolean(findAttr('content'));
+        const hasIdentifier = hasName || hasHttpEquiv || hasProperty || hasItemprop;
+
+        // Check for invalid charset value
+        const charsetValue = getAttrText('charset');
+        if (hasCharset && charsetValue) {
+          const normalizedCharset = charsetValue.toLowerCase().replaceAll('-', '');
+          if (normalizedCharset !== 'utf8') {
+            context.report({
+              node,
+              messageId: 'invalidCharset',
+              data: { charset: charsetValue },
+            });
+          }
+        }
+
+        // Check: identifier present but no content
+        if (hasIdentifier && !hasContent && !hasCharset) {
+          context.report({
+            node,
+            messageId: 'metaMissingContent',
+          });
+        }
+
+        // Check: content present but no identifier or charset
+        if (hasContent && !hasIdentifier && !hasCharset) {
+          context.report({
+            node,
+            messageId: 'metaMissingIdentifier',
+          });
+        }
+
+        // Check content-based validations
+        const contentValue = getAttrText('content');
+
+        if (hasContent && typeof contentValue === 'string') {
+          // http-equiv="refresh" checks
+          if (hasHttpEquiv) {
+            if (contentValue.includes(';')) {
+              // Redirect: should not have delay > 0
+              if (contentValue.charAt(0) !== '0') {
+                context.report({
+                  node,
+                  messageId: 'metaRefreshRedirect',
+                });
+              }
+            } else {
+              // Plain refresh: delay should be > 72000
+              const delay = Number.parseInt(contentValue, 10);
+              if (delay <= 72_000) {
+                context.report({
+                  node,
+                  messageId: 'metaRefreshDelay',
+                });
+              }
+            }
+          }
+
+          // Viewport checks
+          const userScalableRegExp = /user-scalable(\s*?)=(\s*?)no/gim;
+          if (userScalableRegExp.test(contentValue)) {
+            context.report({
+              node,
+              messageId: 'viewportUserScalable',
+            });
+          }
+
+          if (contentValue.includes('maximum-scale')) {
+            context.report({
+              node,
+              messageId: 'viewportMaximumScale',
+            });
+          }
+        }
+      },
+    };
+  },
+};