Normalize whitespace in getAccessibilityTree element accessible names (#561)

Author: calebeby

.changeset/healthy-forks-share.md

@@ -0,0 +1,5 @@
+---
+'pleasantest': major
+---
+
+**Normalize whitespace in element accessible names in `getAccessibilityTree`**. Markup with elements which have an accessible name that includes irregular whitespace, like non-breaking spaces, will now have a different output for `getAccessibilityTree` snapshots. Previously, the whitespace was included, now, whitespace is replaced with a single space.

src/accessibility/browser.ts

@@ -112,7 +112,7 @@ export const getAccessibilityTree = (
     );
   let text = (selfIsInAccessibilityTree && role) || '';
   if (selfIsInAccessibilityTree) {
-    let name = computeAccessibleName(element);
+    let name = computeAccessibleName(element).replace(/\s+/g, ' ');
     if (
       element === document.documentElement &&
       role === 'document' &&

tests/accessibility/getAccessibilityTree.test.ts

@@ -137,6 +137,21 @@ test(
   }),
 );
 
+test(
+  'Whitespace is normalized in element names',
+  withBrowser(async ({ utils, page }) => {
+    // https://www.w3.org/TR/wai-aria-1.2/#tree_exclusion
+    await utils.injectHTML(
+      `<button>Between these words is a ->\u00A0<- nbsp</button>`,
+    );
+    // The nbsp is normalized to a space so in the snapshot it is just a space
+    expect(await getAccessibilityTree(page)).toMatchInlineSnapshot(`
+      document "pleasantest"
+        button "Between these words is a -> <- nbsp"
+    `);
+  }),
+);
+
 test(
   'hidden elements are excluded',
   withBrowser(async ({ utils, page }) => {