fix: remove generic containers inside other containers

Author: mmmurray

src/a11y-snapshot.ts

@@ -14,7 +14,7 @@ const flattenContainers = (nodes: AXNode[]): AXNode[] =>
       return [...acc, ...flattenContainers(children)]
     }
 
-    return [...acc, node]
+    return [...acc, { ...node, children: flattenContainers(children) }]
   }, [])
 
 const removeEmpty = ({ children = [], ...node }: AXNode): AXNode => {

test/a11y-snapshot.test.tsx

@@ -6,28 +6,28 @@ test('can create a11y snapshot from HTML string', async () => {
   const element = '<section><h1>Hello</h1><a href="/world">World</a></section>'
 
   expect(await a11ySnapshot(element)).toMatchInlineSnapshot(`
-"role: WebArea
-children:
-  -
-    role: region
+    "role: WebArea
     children:
       -
-        role: heading
-        name: Hello
-        level: 1
+        role: region
         children:
           -
-            role: text
+            role: heading
             name: Hello
-      -
-        role: link
-        name: World
-        children:
+            level: 1
+            children:
+              -
+                role: text
+                name: Hello
           -
-            role: text
+            role: link
             name: World
-"
-`)
+            children:
+              -
+                role: text
+                name: World
+    "
+  `)
 })
 
 test('can create a11y snapshot from DOM element', async () => {
@@ -37,21 +37,21 @@ test('can create a11y snapshot from DOM element', async () => {
   element.appendChild(heading)
 
   expect(await a11ySnapshot(element)).toMatchInlineSnapshot(`
-"role: WebArea
-children:
-  -
-    role: banner
+    "role: WebArea
     children:
       -
-        role: heading
-        name: 'hello header'
-        level: 1
+        role: banner
         children:
           -
-            role: text
+            role: heading
             name: 'hello header'
-"
-`)
+            level: 1
+            children:
+              -
+                role: text
+                name: 'hello header'
+    "
+  `)
 })
 
 test('can create a11y snapshot from React element', async () => {
@@ -63,28 +63,28 @@ test('can create a11y snapshot from React element', async () => {
   )
 
   expect(await a11ySnapshot(element)).toMatchInlineSnapshot(`
-"role: WebArea
-children:
-  -
-    role: region
+    "role: WebArea
     children:
       -
-        role: heading
-        name: Hello
-        level: 1
+        role: region
         children:
           -
-            role: text
+            role: heading
             name: Hello
-      -
-        role: link
-        name: World
-        children:
+            level: 1
+            children:
+              -
+                role: text
+                name: Hello
           -
-            role: text
+            role: link
             name: World
-"
-`)
+            children:
+              -
+                role: text
+                name: World
+    "
+  `)
 })
 
 test('should remove generic containers from a11y snapshot', async () => {
@@ -95,31 +95,46 @@ test('should remove generic containers from a11y snapshot', async () => {
         <h1>Hello</h1>
       </div>
       <div>
-        <a href="/world">World</a>
+        <div>
+          <div>
+            <a href="/world">World</a>
+          </div>
+        </div>
       </div>
+      <label>
+        <div>
+          <div>foo</div>
+        </div>
+      </label>
     </div>
   )
 
   expect(await a11ySnapshot(element)).toMatchInlineSnapshot(`
-"role: WebArea
-children:
-  -
-    role: heading
-    name: Hello
-    level: 1
+    "role: WebArea
     children:
       -
-        role: text
+        role: heading
         name: Hello
-  -
-    role: link
-    name: World
-    children:
+        level: 1
+        children:
+          -
+            role: text
+            name: Hello
       -
-        role: text
+        role: link
         name: World
-"
-`)
+        children:
+          -
+            role: text
+            name: World
+      -
+        role: Label
+        children:
+          -
+            role: text
+            name: foo
+    "
+  `)
 })
 
 test('a11y snapshot is affected by document styles', async () => {
@@ -140,15 +155,15 @@ test('a11y snapshot is affected by document styles', async () => {
   )
 
   expect(await a11ySnapshot(element)).toMatchInlineSnapshot(`
-"role: WebArea
-children:
-  -
-    role: link
-    name: World
+    "role: WebArea
     children:
       -
-        role: text
+        role: link
         name: World
-"
-`)
+        children:
+          -
+            role: text
+            name: World
+    "
+  `)
 })