Normalize whitespace in getAccessibilityTree (#345)

Author: calebeby

.changeset/fuzzy-pandas-mate.md

@@ -0,0 +1,9 @@
+---
+'pleasantest': major
+---
+
+Normalize whitespace in `getAccessibilityTree`
+
+Now anytime there is contiguous whitespace in text strings it is collapsed into a single space. This matches the behavior of browser accessibility trees.
+
+This is a breaking change because it changes the `getAccessibilityTree` output, and may break your snapshots. Update your snapshots with Jest and review the changes.

src/accessibility/browser.ts

@@ -165,7 +165,8 @@ export const getAccessibilityTree = (
     if (node instanceof Element) {
       printedChild = getAccessibilityTree(node, opts, requiredOwnedElements);
     } else if (includeText && !(node instanceof Comment)) {
-      const trimmedText = node.nodeValue?.trim();
+      // Trim whitespace from ends and normalize all whitespace to a single space
+      const trimmedText = node.nodeValue?.trim().replace(/\s+/g, ' ');
       if (!trimmedText) continue;
 
       printedChild = `text "${trimmedText}"`;

tests/accessibility/getAccessibilityTree.test.ts

@@ -60,14 +60,12 @@ test(
           listitem
             text "something else"
     `);
-    expect(await getAccessibilityTree(page, { includeText: true }))
+    expect(await getAccessibilityTree(page, { includeText: false }))
       .toMatchInlineSnapshot(`
         document "pleasantest"
           list
             listitem
-              text "something"
             listitem
-              text "something else"
       `);
     await utils.injectHTML(`
       <button aria-describedby="click-me-description">click me</button>
@@ -85,7 +83,7 @@ test(
           ↳ description: "extended description"
         text "extended description"
     `);
-    expect(await getAccessibilityTree(page, { includeText: true }))
+    expect(await getAccessibilityTree(page, { includeText: false }))
       .toMatchInlineSnapshot(`
         document "pleasantest"
           button "click me"
@@ -94,7 +92,6 @@ test(
             ↳ description: "extended description"
           button "click me"
             ↳ description: "extended description"
-          text "extended description"
       `);
 
     expect(await getAccessibilityTree(page, { includeDescriptions: false }))
@@ -116,14 +113,28 @@ test(
       <input type="text" id="input"/>
     `);
 
-    expect(await getAccessibilityTree(page, { includeText: true }))
-      .toMatchInlineSnapshot(`
-        document "pleasantest"
-          text "Label Text"
-          textbox "Label Text"
-          text "Label Text"
-          textbox "Label Text"
-      `);
+    expect(await getAccessibilityTree(page)).toMatchInlineSnapshot(`
+      document "pleasantest"
+        text "Label Text"
+        textbox "Label Text"
+        text "Label Text"
+        textbox "Label Text"
+    `);
+
+    // Make sure whitespace is normalized
+    await utils.injectHTML(`
+         <h1>
+
+
+         Hello  
+           world
+       </h1>
+    `);
+    expect(await getAccessibilityTree(page)).toMatchInlineSnapshot(`
+      document "pleasantest"
+        heading "Hello world" (level=1)
+          text "Hello world"
+    `);
   }),
 );