Sync with template-lint

Author: NullVoxPopuli

docs/rules/template-no-whitespace-for-layout.md

@@ -2,45 +2,34 @@
 
 <!-- end auto-generated rule header -->
 
-Disallow using multiple consecutive spaces for layout purposes in templates. CSS should be used for spacing and layout instead.
+Formatting of text through the use of multiple whitespace is entirely visual, and therefore is incompatible with screen-reading assistive technology tools.
 
-## Rule Details
-
-This rule discourages the use of multiple consecutive spaces (2 or more) for layout purposes in templates. CSS should be used for spacing and layout instead.
+The rule applies to the content of Handlebars AST TextNodes, and performs a RegExp search for two consecutive white space characters that might indicate the use of whitespace used for layout.
 
 ## Examples
 
-Examples of **incorrect** code for this rule:
-
-```gjs
-<template>
-  <div>Hello   World</div>
-</template>
-```
-
-```gjs
-<template>
-  <div>Text    with    spaces</div>
-</template>
-```
+This rule **forbids** the following:
 
 ```gjs
 <template>
-  <div>Multiple     spaces</div>
+  Mon.&nbsp;&nbsp;&nbsp;&nbsp;Eggs&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Tomato soup&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;House salad<br>
+  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Bacon&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Hamburger&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Fried chicken<br>
+  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Toast&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Onion rings&nbsp;&nbsp;&nbsp;&nbsp;Green beans<br>
+  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Cookie&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Mashed potatoes
 </template>
 ```
 
-Examples of **correct** code for this rule:
+This rule **allows** the following:
 
 ```gjs
 <template>
-  <div>Hello World</div>
+  <p>Start to finish</p>
 </template>
 ```
 
 ```gjs
 <template>
-  <div class="spaced-layout">Text with proper spacing</div>
+  <p>Start&nbsp;to&nbsp;Finish</p>
 </template>
 ```
 
@@ -53,4 +42,5 @@ To fix issues caused by using whitespace for layout, the following are recommend
 
 ## References
 
-- [eslint-plugin-ember template-no-whitespace-for-layout](https://github.com/ember-cli/eslint-plugin-ember/blob/master/docs/rules/template-no-whitespace-for-layout.md)
+- [F33: Using white space characters to create multiple columns in plain text content](https://www.w3.org/TR/WCAG20-TECHS/failures.html#F33)
+- [F34: Using white space characters to format tables in plain text content](https://www.w3.org/TR/WCAG20-TECHS/failures.html#F34)

lib/rules/template-no-whitespace-for-layout.js

@@ -1,4 +1,6 @@
 /** @type {import('eslint').Rule.RuleModule} */
+const ERROR_MESSAGE = 'Excess whitespace detected.';
+
 module.exports = {
   meta: {
     type: 'suggestion',
@@ -10,8 +12,7 @@ module.exports = {
     },
     schema: [],
     messages: {
-      noWhitespaceForLayout:
-        'Unexpected use of whitespace for layout. Use CSS for spacing instead of multiple spaces.',
+      noWhitespaceForLayout: ERROR_MESSAGE,
     },
     originallyFrom: {
       name: 'ember-template-lint',

tests/lib/rules/template-no-whitespace-for-layout.js

@@ -5,67 +5,64 @@
 const rule = require('../../../lib/rules/template-no-whitespace-for-layout');
 const RuleTester = require('eslint').RuleTester;
 
-const ruleTester = new RuleTester({
-  parser: require.resolve('ember-eslint-parser'),
-  parserOptions: { ecmaVersion: 2022, sourceType: 'module' },
-});
-
-ruleTester.run('template-no-whitespace-for-layout', rule, {
-  valid: [
-    '<template><div>Hello World</div></template>',
-    '<template><div>Text</div></template>',
-
-    '<template>Start to finish</template>',
-    '<template>Start&nbsp;to&nbsp;finish</template>',
-    '<template>Start<br>to<br>finish</template>',
-    `<template><div>
+const validHbs = [
+  'Start to finish',
+  'Start&nbsp;to&nbsp;finish',
+  'Start<br>to<br>finish',
+  `<div>
   example
-</div></template>`,
-    `<template><div
+</div>`,
+  `<div
   foo="bar"
   baz="qux"
 >
   example
-</div></template>`,
-  ],
-  invalid: [
-    {
-      code: '<template><div>Hello   World</div></template>',
-      output: null,
-      errors: [{ messageId: 'noWhitespaceForLayout' }],
-    },
-    {
-      code: '<template><div>Text    with    spaces</div></template>',
-      output: null,
-      errors: [{ messageId: 'noWhitespaceForLayout' }],
-    },
-    {
-      code: '<template><div>Multiple     spaces</div></template>',
-      output: null,
-      errors: [{ messageId: 'noWhitespaceForLayout' }],
-    },
+</div>`,
+];
+
+const invalidHbs = [
+  {
+    code: 'START  FINISH',
+    output: null,
+    errors: [{ message: 'Excess whitespace detected.' }],
+  },
+  {
+    code: 'START&nbsp;&nbsp;FINISH',
+    output: null,
+    errors: [{ message: 'Excess whitespace detected.' }],
+  },
+  {
+    code: 'START&nbsp; FINISH',
+    output: null,
+    errors: [{ message: 'Excess whitespace detected.' }],
+  },
+  {
+    code: 'START &nbsp;FINISH',
+    output: null,
+    errors: [{ message: 'Excess whitespace detected.' }],
+  },
+];
+
+function wrapTemplate(entry) {
+  if (typeof entry === 'string') {
+    return `<template>${entry}</template>`;
+  }
 
-    {
-      code: '<template>START  FINISH</template>',
-      output: null,
-      errors: [{ messageId: 'noWhitespaceForLayout' }],
-    },
-    {
-      code: '<template>START&nbsp;&nbsp;FINISH</template>',
-      output: null,
-      errors: [{ messageId: 'noWhitespaceForLayout' }],
-    },
-    {
-      code: '<template>START&nbsp; FINISH</template>',
-      output: null,
-      errors: [{ messageId: 'noWhitespaceForLayout' }],
-    },
-    {
-      code: '<template>START &nbsp;FINISH</template>',
-      output: null,
-      errors: [{ messageId: 'noWhitespaceForLayout' }],
-    },
-  ],
+  return {
+    ...entry,
+    code: `<template>${entry.code}</template>`,
+    output: entry.output ? `<template>${entry.output}</template>` : entry.output,
+  };
+}
+
+const gjsRuleTester = new RuleTester({
+  parser: require.resolve('ember-eslint-parser'),
+  parserOptions: { ecmaVersion: 2022, sourceType: 'module' },
+});
+
+gjsRuleTester.run('template-no-whitespace-for-layout', rule, {
+  valid: validHbs.map(wrapTemplate),
+  invalid: invalidHbs.map(wrapTemplate),
 });
 
 const hbsRuleTester = new RuleTester({
@@ -77,60 +74,6 @@ const hbsRuleTester = new RuleTester({
 });
 
 hbsRuleTester.run('template-no-whitespace-for-layout', rule, {
-  valid: [
-    'Start to finish',
-    'Start&nbsp;to&nbsp;finish',
-    'Start<br>to<br>finish',
-    `<div>
-  example
-</div>`,
-    `<div
-  foo="bar"
-  baz="qux"
->
-  example
-</div>`,
-  ],
-  invalid: [
-    {
-      code: 'START  FINISH',
-      output: null,
-      errors: [
-        {
-          message:
-            'Unexpected use of whitespace for layout. Use CSS for spacing instead of multiple spaces.',
-        },
-      ],
-    },
-    {
-      code: 'START&nbsp;&nbsp;FINISH',
-      output: null,
-      errors: [
-        {
-          message:
-            'Unexpected use of whitespace for layout. Use CSS for spacing instead of multiple spaces.',
-        },
-      ],
-    },
-    {
-      code: 'START&nbsp; FINISH',
-      output: null,
-      errors: [
-        {
-          message:
-            'Unexpected use of whitespace for layout. Use CSS for spacing instead of multiple spaces.',
-        },
-      ],
-    },
-    {
-      code: 'START &nbsp;FINISH',
-      output: null,
-      errors: [
-        {
-          message:
-            'Unexpected use of whitespace for layout. Use CSS for spacing instead of multiple spaces.',
-        },
-      ],
-    },
-  ],
+  valid: validHbs,
+  invalid: invalidHbs,
 });