Merge pull request #2722 from johanrd/refactor/presentational-children-from-aria-query

refactor(template-require-presentational-children): source role list from aria-query

Author: NullVoxPopuli

lib/rules/template-require-presentational-children.js

@@ -1,21 +1,11 @@
-// Roles that require all descendants to be presentational
-// https://w3c.github.io/aria-practices/#children_presentational
-const ROLES_REQUIRING_PRESENTATIONAL_CHILDREN = new Set([
-  'button',
-  'checkbox',
-  'img',
-  'meter',
-  'menuitemcheckbox',
-  'menuitemradio',
-  'option',
-  'progressbar',
-  'radio',
-  'scrollbar',
-  'separator',
-  'slider',
-  'switch',
-  'tab',
-]);
+const { roles } = require('aria-query');
+
+// Roles where descendants are presentational per the ARIA "Children
+// Presentational" rule. Derived from aria-query (role.childrenPresentational).
+// https://www.w3.org/TR/wai-aria-1.2/#childrenArePresentational
+const ROLES_REQUIRING_PRESENTATIONAL_CHILDREN = new Set(
+  [...roles.keys()].filter((role) => roles.get(role).childrenPresentational)
+);
 
 // Tags that do not have semantic meaning
 const NON_SEMANTIC_TAGS = new Set([

tests/lib/rules/template-require-presentational-children.js

@@ -35,6 +35,12 @@ ruleTester.run('template-require-presentational-children', rule, {
       <title>Title here</title>
       <circle cx="10" cy="10" r="10"></circle>
     </svg></template>`,
+    // SKIPPED_TAGS: <svg> is always skipped, even when its role has
+    // childrenPresentational (e.g. graphics-symbol via Graphics-ARIA).
+    `<template>
+    <svg role="graphics-symbol">
+      <circle cx="10" cy="10" r="10"></circle>
+    </svg></template>`,
     `<template>
       <MyButton role="tab">
         <:default>Button text</:default>
@@ -77,6 +83,28 @@ ruleTester.run('template-require-presentational-children', rule, {
         },
       ],
     },
+    // doc-pagebreak: DPUB-ARIA role with childrenPresentational.
+    {
+      code: '<template><div role="doc-pagebreak"><h2>pg</h2></div></template>',
+      output: null,
+      errors: [
+        {
+          message:
+            '<div> has a role of doc-pagebreak, it cannot have semantic descendants like <h2>',
+        },
+      ],
+    },
+    // graphics-symbol: Graphics-ARIA role with childrenPresentational; flags on non-svg host.
+    {
+      code: '<template><div role="graphics-symbol"><text>X</text></div></template>',
+      output: null,
+      errors: [
+        {
+          message:
+            '<div> has a role of graphics-symbol, it cannot have semantic descendants like <text>',
+        },
+      ],
+    },
   ],
 });
 
@@ -109,6 +137,12 @@ hbsRuleTester.run('template-require-presentational-children', rule, {
       <title>Title here</title>
       <circle cx="10" cy="10" r="10"></circle>
     </svg>`,
+    // SKIPPED_TAGS: <svg> is always skipped, even when its role has
+    // childrenPresentational (e.g. graphics-symbol via Graphics-ARIA).
+    `
+    <svg role="graphics-symbol">
+      <circle cx="10" cy="10" r="10"></circle>
+    </svg>`,
     `
       <MyButton role="tab">
         <:default>Button text</:default>
@@ -150,5 +184,27 @@ hbsRuleTester.run('template-require-presentational-children', rule, {
         },
       ],
     },
+    // doc-pagebreak: DPUB-ARIA role with childrenPresentational.
+    {
+      code: '<div role="doc-pagebreak"><h2>pg</h2></div>',
+      output: null,
+      errors: [
+        {
+          message:
+            '<div> has a role of doc-pagebreak, it cannot have semantic descendants like <h2>',
+        },
+      ],
+    },
+    // graphics-symbol: Graphics-ARIA role with childrenPresentational; flags on non-svg host.
+    {
+      code: '<div role="graphics-symbol"><text>X</text></div>',
+      output: null,
+      errors: [
+        {
+          message:
+            '<div> has a role of graphics-symbol, it cannot have semantic descendants like <text>',
+        },
+      ],
+    },
   ],
 });