Extract rule: template-require-context-role

Author: NullVoxPopuli

README.md

@@ -202,6 +202,7 @@ rules in templates can be disabled with eslint directives with mustache or html
 | [template-no-unsupported-role-attributes](docs/rules/template-no-unsupported-role-attributes.md)                 | disallow ARIA attributes that are not supported by the element role              |    | 🔧 |    |
 | [template-no-whitespace-within-word](docs/rules/template-no-whitespace-within-word.md)                           | disallow excess whitespace within words (e.g. "W e l c o m e")                   |    |    |    |
 | [template-require-aria-activedescendant-tabindex](docs/rules/template-require-aria-activedescendant-tabindex.md) | require non-interactive elements with aria-activedescendant to have tabindex     |    | 🔧 |    |
+| [template-require-context-role](docs/rules/template-require-context-role.md)                                     | require ARIA roles to be used in appropriate context                             |    |    |    |
 | [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                                           |    |    |    |

docs/rules/template-require-context-role.md

@@ -0,0 +1,101 @@
+# ember/template-require-context-role
+
+<!-- end auto-generated rule header -->
+
+Requires certain ARIA roles to be used in appropriate context.
+
+Some ARIA roles must be contained within specific parent roles to be meaningful and accessible. For example, a `role="listitem"` must be inside an element with `role="list"`.
+
+## Rule Details
+
+This rule checks that context-dependent ARIA roles are used within the appropriate parent roles.
+
+Roles requiring context:
+
+- `listitem` → must be in `list`
+- `option` → must be in `listbox`
+- `tab` → must be in `tablist`
+- `menuitem`, `menuitemcheckbox`, `menuitemradio` → must be in `menu` or `menubar`
+- `treeitem` → must be in `tree`
+- `row` → must be in `table`, `grid`, `treegrid`, or `rowgroup`
+- And more...
+
+## Roles to check
+
+Format: role | required context role
+
+- columnheader | row
+- gridcell | row
+- listitem | group or list
+- menuitem | group, menu, or menubar
+- menuitemcheckbox | menu or menubar
+- menuitemradio | group, menu, or menubar
+- option | listbox
+- row | grid, rowgroup, or treegrid
+- rowgroup | grid
+- rowheader | row
+- tab | tablist
+- treeitem | group or tree
+
+## `<* role><* role /></*>`
+
+The required context role defines the owning container where this role is allowed. If a role has a required context, authors MUST ensure that an element with the role is contained inside (or owned by) an element with the required context role. For example, an element with `role="listitem"` is only meaningful when contained inside (or owned by) an element with `role="list"`. You may place intermediate elements with `role="presentation"` or `role="none"` to remove their semantic meaning.
+
+## Examples
+
+Examples of **incorrect** code for this rule:
+
+```gjs
+<template>
+  <div>
+    <span role="listitem">Item</span>
+  </div>
+</template>
+```
+
+```gjs
+<template>
+  <div>
+    <span role="tab">Tab 1</span>
+  </div>
+</template>
+```
+
+```gjs
+<template>
+  <div>
+    <span role="menuitem">Item</span>
+  </div>
+</template>
+```
+
+Examples of **correct** code for this rule:
+
+```gjs
+<template>
+  <ul role="list">
+    <li role="listitem">Item</li>
+  </ul>
+</template>
+```
+
+```gjs
+<template>
+  <div role="tablist">
+    <div role="tab">Tab 1</div>
+  </div>
+</template>
+```
+
+```gjs
+<template>
+  <div role="menu">
+    <div role="menuitem">Item</div>
+  </div>
+</template>
+```
+
+## References
+
+- [eslint-plugin-ember template-require-context-role](https://github.com/ember-cli/eslint-plugin-ember/blob/master/docs/rules/template-require-context-role.md)
+- [WAI-ARIA - Required Context Roles](https://www.w3.org/TR/wai-aria-1.2/#scope)

lib/rules/template-require-context-role.js

@@ -0,0 +1,126 @@
+const ROLES_REQUIRING_CONTEXT = {
+  listitem: ['list', 'group', 'directory'],
+  option: ['listbox', 'group'],
+  tab: ['tablist'],
+  menuitem: ['menu', 'menubar', 'group'],
+  menuitemcheckbox: ['menu', 'menubar', 'group'],
+  menuitemradio: ['menu', 'menubar', 'group'],
+  treeitem: ['tree', 'group'],
+  row: ['table', 'grid', 'treegrid', 'rowgroup'],
+  rowgroup: ['grid', 'table', 'treegrid'],
+  rowheader: ['row'],
+  columnheader: ['row'],
+  gridcell: ['row'],
+};
+
+/** @type {import('eslint').Rule.RuleModule} */
+module.exports = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description: 'require ARIA roles to be used in appropriate context',
+      category: 'Accessibility',
+      url: 'https://github.com/ember-cli/eslint-plugin-ember/tree/master/docs/rules/template-require-context-role.md',
+      templateMode: 'both',
+    },
+    fixable: null,
+    schema: [],
+    messages: {
+      missingContext:
+        'Role "{{role}}" must be contained in an element with one of these roles: {{requiredRoles}}',
+    },
+    originallyFrom: {
+      name: 'ember-template-lint',
+      rule: 'lib/rules/require-context-role.js',
+      docs: 'docs/rule/require-context-role.md',
+      tests: 'test/unit/rules/require-context-role-test.js',
+    },
+  },
+
+  create(context) {
+    const elementStack = [];
+
+    return {
+      GlimmerElementNode(node) {
+        elementStack.push(node);
+
+        const role = getRoleFromNode(node);
+
+        if (role && ROLES_REQUIRING_CONTEXT[role]) {
+          // Skip check if at root level (no parent elements — context may be external)
+          if (elementStack.length > 1 && !isInsideAriaHidden(elementStack)) {
+            const parentRole = getAccessibleParentRole(elementStack);
+            if (parentRole === undefined) {
+              // No non-transparent parent found (effectively root) — skip
+            } else if (!parentRole || !ROLES_REQUIRING_CONTEXT[role].includes(parentRole)) {
+              context.report({
+                node,
+                messageId: 'missingContext',
+                data: {
+                  role,
+                  requiredRoles: ROLES_REQUIRING_CONTEXT[role].join(', '),
+                },
+              });
+            }
+          }
+        }
+      },
+
+      'GlimmerElementNode:exit'() {
+        elementStack.pop();
+      },
+    };
+  },
+};
+
+function getRoleFromNode(node) {
+  const roleAttr = node.attributes?.find((a) => a.name === 'role');
+  if (roleAttr?.value?.type === 'GlimmerTextNode') {
+    return roleAttr.value.chars;
+  }
+  return null;
+}
+
+/**
+ * Check if any ancestor element in the stack has aria-hidden="true".
+ */
+function isInsideAriaHidden(elementStack) {
+  // Check ancestors (all elements except the current one)
+  for (let i = elementStack.length - 2; i >= 0; i--) {
+    const node = elementStack[i];
+    const ariaHidden = node.attributes?.find((a) => a.name === 'aria-hidden');
+    if (ariaHidden?.value?.type === 'GlimmerTextNode' && ariaHidden.value.chars === 'true') {
+      return true;
+    }
+  }
+  return false;
+}
+
+/**
+ * Get the role of the nearest non-transparent ancestor element.
+ * Transparent elements are those with role="presentation"/"none" or named blocks (tag starts with ':').
+ * Returns:
+ *   - a role string if a non-transparent ancestor with a role is found
+ *   - null if a non-transparent ancestor WITHOUT a role is found (breaks context)
+ *   - undefined if no non-transparent ancestor exists (root level)
+ */
+function getAccessibleParentRole(elementStack) {
+  for (let i = elementStack.length - 2; i >= 0; i--) {
+    const node = elementStack[i];
+
+    // Named blocks (e.g. <:content>) and <template> wrapper are transparent
+    if (node.tag && (node.tag.startsWith(':') || node.tag === 'template')) {
+      continue;
+    }
+
+    const role = getRoleFromNode(node);
+
+    // Presentation/none roles are transparent in the accessibility tree
+    if (role === 'presentation' || role === 'none') {
+      continue;
+    }
+
+    return role; // could be null (element with no role) or a role string
+  }
+  return undefined; // no non-transparent ancestor found
+}