Add aria-expanded to getAccessibilityTree and <details>/<summary> (#451)

Author: calebeby

.changeset/silver-actors-jam.md

@@ -0,0 +1,9 @@
+---
+'pleasantest': major
+---
+
+Added `aria-expanded` support to `getAccessibilityTree` and fix handling for `<details>`/`<summary>`
+
+Now, elements which have the `aria-expanded` attribute will represent the state of that attribute in accessibility tree snapshots. `<details>`/`<summary>` elements will represent their expanded state in the tree as well.
+
+Also, for collapsed `<details>`/`<summary>` elements, the hidden content is now hidden in the accessibility tree, to match screen reader behavior.

src/accessibility/browser.ts

@@ -44,7 +44,13 @@ const getElementAccessibilityState = (element: Element): AccessibilityState => {
   if (
     (element as HTMLElement).hidden ||
     element.getAttribute('aria-hidden') === 'true' ||
-    computedStyle.display === 'none'
+    computedStyle.display === 'none' ||
+    (element.parentElement?.tagName === 'DETAILS' &&
+      !(element.parentElement as HTMLDetailsElement).open &&
+      !(
+        element.tagName === 'SUMMARY' &&
+        element.parentElement.firstElementChild === element
+      ))
   )
     return AccessibilityState.SelfAndDescendentsExcludedFromTree;
 
@@ -97,6 +103,18 @@ export const getAccessibilityTree = (
   if (selfIsInAccessibilityTree) {
     const name = computeAccessibleName(element);
     if (name) text += ` "${name}"`;
+    if (
+      element.ariaExpanded === 'true' ||
+      (element.tagName === 'SUMMARY' &&
+        (element.parentElement as HTMLDetailsElement).open)
+    )
+      text += ` (expanded=true)`;
+    if (
+      element.ariaExpanded === 'false' ||
+      (element.tagName === 'SUMMARY' &&
+        !(element.parentElement as HTMLDetailsElement).open)
+    )
+      text += ` (expanded=false)`;
     if (document.activeElement === element) text += ` (focused)`;
     if (includeDescriptions) {
       const description = computeAccessibleDescription(element);

tests/accessibility/getAccessibilityTree.test.ts

@@ -281,3 +281,68 @@ test(
     `);
   }),
 );
+
+test(
+  '<details>/<summary>',
+  withBrowser(async ({ utils, page, screen, user }) => {
+    await utils.injectHTML(`
+      <details>
+        <summary>
+          Click me!
+          <h1>Tags in summary do not preserve their semantic meaning</h1>
+        </summary>
+        <p>Some content</p>
+        <h2>Tags in details do preserve their semantic meaning</h2>
+      </details>
+    `);
+
+    // Starts collapsed
+    expect(await getAccessibilityTree(page)).toMatchInlineSnapshot(`
+      document
+        group
+          button "Click me! Tags in summary do not preserve their semantic meaning" (expanded=false)
+    `);
+
+    const toggle = await screen.getByText(/click me!/i);
+    await user.click(toggle);
+
+    // After toggling it should be expanded
+    expect(await getAccessibilityTree(page)).toMatchInlineSnapshot(`
+      document
+        group
+          button "Click me! Tags in summary do not preserve their semantic meaning" (expanded=true) (focused)
+          text "Some content"
+          heading "Tags in details do preserve their semantic meaning"
+            text "Tags in details do preserve their semantic meaning"
+    `);
+  }),
+);
+
+test(
+  'aria-expanded and aria-collapsed',
+  withBrowser(async ({ utils, page }) => {
+    await utils.injectHTML(`
+      <button aria-expanded="false">Click me!</button>
+    `);
+    expect(await getAccessibilityTree(page)).toMatchInlineSnapshot(`
+      document
+        button "Click me!" (expanded=false)
+    `);
+
+    await utils.injectHTML(`
+      <button aria-expanded="true">Click me!</button>
+    `);
+    expect(await getAccessibilityTree(page)).toMatchInlineSnapshot(`
+      document
+        button "Click me!" (expanded=true)
+    `);
+
+    await utils.injectHTML(`
+      <button>Click me!</button>
+    `);
+    expect(await getAccessibilityTree(page)).toMatchInlineSnapshot(`
+      document
+        button "Click me!"
+    `);
+  }),
+);