From 7c80e01a1d37185933daa49885c966a452dd7b3b Mon Sep 17 00:00:00 2001
From: Kilian McMahon <kil@kilmc.com>
Date: Fri, 30 Jul 2021 12:12:01 +0200
Subject: [PATCH 1/2] Add test case and implementation for finding roles in
 shadowRoot

---
 src/__tests__/helpers/CustomButton.js | 12 ++++++++++++
 src/__tests__/role.js                 | 28 +++++++++++++++++++++++++++
 src/role-helpers.js                   |  7 +++----
 3 files changed, 43 insertions(+), 4 deletions(-)
 create mode 100644 src/__tests__/helpers/CustomButton.js

diff --git a/src/__tests__/helpers/CustomButton.js b/src/__tests__/helpers/CustomButton.js
new file mode 100644
index 00000000..8ff69ac2
--- /dev/null
+++ b/src/__tests__/helpers/CustomButton.js
@@ -0,0 +1,12 @@
+export class CustomButton extends HTMLElement {
+  constructor() {
+    super()
+
+    this.attachShadow({mode: 'open'})
+
+    const button = document.createElement('button')
+    button.innerHTML = 'Button text'
+
+    this.shadowRoot.append(button)
+  }
+}
diff --git a/src/__tests__/role.js b/src/__tests__/role.js
index c7dc70c5..15e64d5a 100644
--- a/src/__tests__/role.js
+++ b/src/__tests__/role.js
@@ -1,6 +1,7 @@
 import {configure, getConfig} from '../config'
 import {getQueriesForElement} from '../get-queries-for-element'
 import {render, renderIntoDocument} from './helpers/test-utils'
+import {CustomButton} from './helpers/CustomButton'
 
 test('by default logs accessible roles when it fails', () => {
   const {getByRole} = render(`<h1>Hi</h1>`)
@@ -572,3 +573,30 @@ test('should find the input using type property instead of attribute', () => {
   const {getByRole} = render('<input type="124">')
   expect(getByRole('textbox')).not.toBeNull()
 })
+
+describe('Web Component Custom Elements', () => {
+  beforeAll(() => {
+    customElements.define('custom-button', CustomButton)
+  })
+
+  test('should find accessible roles in elements that contain a shadowRoot', () => {
+    const {getByRole} = render(`<custom-button />`)
+    expect(() => getByRole('article')).toThrowErrorMatchingInlineSnapshot(`
+"Unable to find an accessible element with the role "article"
+
+Here are the accessible roles:
+
+  button:
+
+  Name "Button text":
+  <button />
+
+  --------------------------------------------------
+
+Ignored nodes: comments, <script />, <style />
+<div>
+  <custom-button />
+</div>"
+`)
+  })
+})
diff --git a/src/role-helpers.js b/src/role-helpers.js
index 58fdfb6f..ca0e7bb3 100644
--- a/src/role-helpers.js
+++ b/src/role-helpers.js
@@ -148,10 +148,9 @@ function getRoles(container, {hidden = false} = {}) {
   function flattenDOM(node) {
     return [
       node,
-      ...Array.from(node.children).reduce(
-        (acc, child) => [...acc, ...flattenDOM(child)],
-        [],
-      ),
+      ...Array.from(
+        node.shadowRoot ? node.shadowRoot.children : node.children,
+      ).reduce((acc, child) => [...acc, ...flattenDOM(child)], []),
     ]
   }
 

From 2cc2867653975284e21a3ef0a36cebb7c84523e4 Mon Sep 17 00:00:00 2001
From: Kilian McMahon <kil@kilmc.com>
Date: Mon, 2 Aug 2021 14:19:14 +0200
Subject: [PATCH 2/2] Remove unnecessary file for test case

---
 src/__tests__/helpers/CustomButton.js | 12 ------------
 src/__tests__/role.js                 | 17 +++++++++++++++--
 2 files changed, 15 insertions(+), 14 deletions(-)
 delete mode 100644 src/__tests__/helpers/CustomButton.js

diff --git a/src/__tests__/helpers/CustomButton.js b/src/__tests__/helpers/CustomButton.js
deleted file mode 100644
index 8ff69ac2..00000000
--- a/src/__tests__/helpers/CustomButton.js
+++ /dev/null
@@ -1,12 +0,0 @@
-export class CustomButton extends HTMLElement {
-  constructor() {
-    super()
-
-    this.attachShadow({mode: 'open'})
-
-    const button = document.createElement('button')
-    button.innerHTML = 'Button text'
-
-    this.shadowRoot.append(button)
-  }
-}
diff --git a/src/__tests__/role.js b/src/__tests__/role.js
index 15e64d5a..31125a3f 100644
--- a/src/__tests__/role.js
+++ b/src/__tests__/role.js
@@ -1,7 +1,6 @@
 import {configure, getConfig} from '../config'
 import {getQueriesForElement} from '../get-queries-for-element'
 import {render, renderIntoDocument} from './helpers/test-utils'
-import {CustomButton} from './helpers/CustomButton'
 
 test('by default logs accessible roles when it fails', () => {
   const {getByRole} = render(`<h1>Hi</h1>`)
@@ -576,7 +575,21 @@ test('should find the input using type property instead of attribute', () => {
 
 describe('Web Component Custom Elements', () => {
   beforeAll(() => {
-    customElements.define('custom-button', CustomButton)
+    customElements.define(
+      'custom-button',
+      class CustomButton extends HTMLElement {
+        constructor() {
+          super()
+
+          this.attachShadow({mode: 'open'})
+
+          const button = document.createElement('button')
+          button.innerHTML = 'Button text'
+
+          this.shadowRoot.append(button)
+        }
+      },
+    )
   })
 
   test('should find accessible roles in elements that contain a shadowRoot', () => {