Use document.title as fallback accessible name for html root element (#446)

Author: calebeby

.changeset/popular-beans-roll.md

@@ -0,0 +1,5 @@
+---
+'pleasantest': major
+---
+
+Use document.title as fallback implicit accessible name for html root element in accessibility tree snapshots

src/accessibility/browser.ts

@@ -101,7 +101,15 @@ export const getAccessibilityTree = (
     );
   let text = (selfIsInAccessibilityTree && role) || '';
   if (selfIsInAccessibilityTree) {
-    const name = computeAccessibleName(element);
+    let name = computeAccessibleName(element);
+    if (
+      element === document.documentElement &&
+      role === 'document' &&
+      !name &&
+      document.title
+    ) {
+      name = document.title;
+    }
     if (name) text += ` "${name}"`;
     if (
       element.ariaExpanded === 'true' ||

tests/accessibility/getAccessibilityTree.test.ts

@@ -12,9 +12,8 @@ test(
     expect(String(await getAccessibilityTree(htmlElement))).toEqual(
       String(await getAccessibilityTree(page)),
     );
-    // TODO: document's name should be from document.title (breaking change)
     expect(await getAccessibilityTree(page)).toMatchInlineSnapshot(`
-      document
+      document "example title"
         list
     `);
 
@@ -40,7 +39,7 @@ test(
       </main>
     `);
     expect(await getAccessibilityTree(page)).toMatchInlineSnapshot(`
-      document
+      document "pleasantest"
         main
           button "Add to cart"
           heading "hiiii"
@@ -54,7 +53,7 @@ test(
       </ul>
     `);
     expect(await getAccessibilityTree(page)).toMatchInlineSnapshot(`
-      document
+      document "pleasantest"
         list
           listitem
             text "something"
@@ -63,21 +62,21 @@ test(
     `);
     expect(await getAccessibilityTree(page, { includeText: true }))
       .toMatchInlineSnapshot(`
-        document
-          list
-            listitem
-              text "something"
-            listitem
-              text "something else"
-      `);
+      document "pleasantest"
+        list
+          listitem
+            text "something"
+          listitem
+            text "something else"
+    `);
     await utils.injectHTML(`
       <button aria-describedby="click-me-description">click me</button>
       <button aria-describedby="click-me-description"><div>click me</div></button>
       <button aria-describedby="click-me-description"><h1>click me</h1></button>
       <div id="click-me-description">extended description</div>
     `);
     expect(await getAccessibilityTree(page)).toMatchInlineSnapshot(`
-      document
+      document "pleasantest"
         button "click me"
           ↳ description: "extended description"
         button "click me"
@@ -88,24 +87,24 @@ test(
     `);
     expect(await getAccessibilityTree(page, { includeText: true }))
       .toMatchInlineSnapshot(`
-        document
-          button "click me"
-            ↳ description: "extended description"
-          button "click me"
-            ↳ description: "extended description"
-          button "click me"
-            ↳ description: "extended description"
-          text "extended description"
-      `);
+      document "pleasantest"
+        button "click me"
+          ↳ description: "extended description"
+        button "click me"
+          ↳ description: "extended description"
+        button "click me"
+          ↳ description: "extended description"
+        text "extended description"
+    `);
 
     expect(await getAccessibilityTree(page, { includeDescriptions: false }))
       .toMatchInlineSnapshot(`
-        document
-          button "click me"
-          button "click me"
-          button "click me"
-          text "extended description"
-      `);
+      document "pleasantest"
+        button "click me"
+        button "click me"
+        button "click me"
+        text "extended description"
+    `);
 
     await utils.injectHTML(`
       <label>
@@ -119,12 +118,12 @@ test(
 
     expect(await getAccessibilityTree(page, { includeText: true }))
       .toMatchInlineSnapshot(`
-        document
-          text "Label Text"
-          textbox "Label Text"
-          text "Label Text"
-          textbox "Label Text"
-      `);
+      document "pleasantest"
+        text "Label Text"
+        textbox "Label Text"
+        text "Label Text"
+        textbox "Label Text"
+    `);
   }),
 );
 
@@ -157,7 +156,7 @@ test(
       </div>
     `);
     expect(await getAccessibilityTree(page)).toMatchInlineSnapshot(`
-      document
+      document "pleasantest"
         button "A"
         button "E"
         button "G"
@@ -174,14 +173,14 @@ test(
     // Role="presentation" and role="none" are equivalent
     // They make it as if the outer element wasn't there.
     expect(await getAccessibilityTree(page)).toMatchInlineSnapshot(`
-      document
+      document "pleasantest"
         text "Sample Content"
     `);
     await utils.injectHTML(`<h1 role="none">Sample Content</h1>`);
     // Role="presentation" and role="none" are equivalent
     // They make it as if the outer element wasn't there.
     expect(await getAccessibilityTree(page)).toMatchInlineSnapshot(`
-      document
+      document "pleasantest"
         text "Sample Content"
     `);
 
@@ -198,7 +197,7 @@ test(
       </ul>
     `);
     expect(await getAccessibilityTree(page)).toMatchInlineSnapshot(`
-      document
+      document "pleasantest"
         text "Sample Content"
         text "More Sample Content"
         heading "Hi"
@@ -216,7 +215,7 @@ test(
       </ul>
     `);
     expect(await getAccessibilityTree(page)).toMatchInlineSnapshot(`
-      document
+      document "pleasantest"
         text "Sample Content"
         text "More Sample Content"
         listitem
@@ -233,7 +232,7 @@ test(
       </ul>
     `);
     expect(await getAccessibilityTree(page)).toMatchInlineSnapshot(`
-      document
+      document "pleasantest"
         text "Sample Content"
         text "More Sample Content"
         heading "Hi"
@@ -250,7 +249,7 @@ test(
       </ul>
     `);
     expect(await getAccessibilityTree(page)).toMatchInlineSnapshot(`
-      document
+      document "pleasantest"
         heading "Sample Content"
           listitem
             text "Sample Content"
@@ -269,14 +268,14 @@ test(
     `);
 
     expect(await getAccessibilityTree(page)).toMatchInlineSnapshot(`
-      document
+      document "pleasantest"
         button "Click me!"
     `);
 
     await user.click(await screen.getByRole('button'));
 
     expect(await getAccessibilityTree(page)).toMatchInlineSnapshot(`
-      document
+      document "pleasantest"
         button "Click me!" (focused)
     `);
   }),