fix: role for aside element when nested within sectioning content (#30)

* fix: role for aside element when nested within landmark

* Update .changeset/purple-trees-serve.md

Author: jlp-craigmorten

.changeset/purple-trees-serve.md

@@ -0,0 +1,5 @@
+---
+"html-aria": patch
+---
+
+Fix role for aside element when nested within sectioning content

src/get-role.ts

@@ -1,6 +1,7 @@
-import { ALL_ROLES, roles } from './lib/aria-roles.js';
+import { ALL_ROLES } from './lib/aria-roles.js';
 import { NO_CORRESPONDING_ROLE, tags } from './lib/html.js';
 import { calculateAccessibleName, firstMatchingToken, isEmptyAncestorList, virtualizeElement } from './lib/util.js';
+import { getAsideRole } from './tags/aside.js';
 import { getFooterRole } from './tags/footer.js';
 import { getHeaderRole } from './tags/header.js';
 import { getInputRole } from './tags/input.js';
@@ -56,6 +57,10 @@ export function getRole(element: VirtualElement | HTMLElement, options?: GetRole
     case 'area': {
       return attributes && !('href' in attributes) ? 'generic' : tag.defaultRole;
     }
+    case 'aside': {
+      const name = calculateAccessibleName({ tagName, attributes });
+      return name ? tag.defaultRole : getAsideRole(options);
+    }
     case 'header': {
       return getHeaderRole(options);
     }

src/lib/util.ts

@@ -1,11 +1,4 @@
-import type {
-  ARIAAttribute,
-  AncestorList,
-  AttributeData,
-  NameProhibitedAttributes,
-  TagName,
-  VirtualElement,
-} from '../types.js';
+import type { ARIAAttribute, AncestorList, NameProhibitedAttributes, TagName, VirtualElement } from '../types.js';
 
 /** Parse a list of roles, e.g. role="graphics-symbol img" */
 export function parseTokenList(tokenList: string): string[] {
@@ -62,6 +55,12 @@ export function calculateAccessibleName(element: VirtualElement): string | undef
   const { tagName, attributes } = element;
 
   switch (tagName) {
+    case 'aside': {
+      /**
+       * @see https://www.w3.org/TR/html-aam-1.0/#section-and-grouping-element-accessible-name-computation
+       */
+      return (attributes?.['aria-label'] || attributes?.['aria-labelledby']) as string;
+    }
     case 'img': {
       /**
        * According to spec, aria-label is technically allowed for <img> (even if alt is preferred)

src/tags/aside.ts

@@ -0,0 +1,22 @@
+import { tags } from '../lib/html.js';
+import { firstMatchingAncestor } from '../lib/util.js';
+import type { AncestorList } from '../types.js';
+
+function hasSectioningContentParent(ancestors: AncestorList) {
+  return !!firstMatchingAncestor(
+    [
+      { tagName: 'article', attributes: { role: 'article' } },
+      { tagName: 'aside', attributes: { role: 'complementary' } },
+      { tagName: 'nav', attributes: { role: 'navigation' } },
+      { tagName: 'section', attributes: { role: 'region' } },
+    ],
+    ancestors,
+  );
+}
+
+export function getAsideRole({ ancestors }: { ancestors?: AncestorList } = {}) {
+  if (!ancestors) {
+    return tags.aside.defaultRole;
+  }
+  return hasSectioningContentParent(ancestors) ? 'generic' : tags.aside.defaultRole;
+}

test/get-role.test.ts

@@ -31,6 +31,56 @@ describe('getRole', () => {
     ['area (no href)', { given: [{ tagName: 'area', attributes: {} }], want: 'generic' }],
     ['article', { given: [{ tagName: 'article' }], want: 'article' }],
     ['aside', { given: [{ tagName: 'aside' }], want: 'complementary' }],
+    [
+      'aside (name, sectioning article)',
+      {
+        given: [
+          { tagName: 'aside', attributes: { 'aria-label': 'My aside' } },
+          { ancestors: [{ tagName: 'article' }] },
+        ],
+        want: 'complementary',
+      },
+    ],
+    [
+      'aside (name, sectioning aside)',
+      {
+        given: [{ tagName: 'aside', attributes: { 'aria-label': 'My aside' } }, { ancestors: [{ tagName: 'aside' }] }],
+        want: 'complementary',
+      },
+    ],
+    [
+      'aside (name, sectioning nav)',
+      {
+        given: [{ tagName: 'aside', attributes: { 'aria-label': 'My aside' } }, { ancestors: [{ tagName: 'nav' }] }],
+        want: 'complementary',
+      },
+    ],
+    [
+      'aside (name, sectioning section)',
+      {
+        given: [
+          { tagName: 'aside', attributes: { 'aria-label': 'My aside' } },
+          { ancestors: [{ tagName: 'section' }] },
+        ],
+        want: 'complementary',
+      },
+    ],
+    [
+      'aside (no name, sectioning article)',
+      { given: [{ tagName: 'aside' }, { ancestors: [{ tagName: 'article' }] }], want: 'generic' },
+    ],
+    [
+      'aside (no name, sectioning aside)',
+      { given: [{ tagName: 'aside' }, { ancestors: [{ tagName: 'aside' }] }], want: 'generic' },
+    ],
+    [
+      'aside (no name, sectioning nav)',
+      { given: [{ tagName: 'aside' }, { ancestors: [{ tagName: 'nav' }] }], want: 'generic' },
+    ],
+    [
+      'aside (no name, sectioning section)',
+      { given: [{ tagName: 'aside' }, { ancestors: [{ tagName: 'section' }] }], want: 'generic' },
+    ],
     ['audio', { given: [{ tagName: 'audio' }], want: undefined }],
     ['b', { given: [{ tagName: 'b' }], want: 'generic' }],
     ['base', { given: [{ tagName: 'base' }], want: undefined }],