Include roles from shadowDOM in Error message

[kilmc]

What: Adds a check which improves Error messages for folks testing Web Components using getByRole.

Note: This PR is focused on getting a correct Error message and not a passing test. This fix will be most useful to folks using dom-testing-library in conjunction with the wrapper library referenced in this comment in #413.

Why: When testing Web Components the returned error is incorrect. The example below walks you through this case.

<div>
  <h2>An example</h2>
  <custom-button />
</div>

Contents of the shadowDOM for <custom-button>

<button>Button text</button>

Below is a test assertion with a minor typo in it.

expect(screen.getByRole('button', { name: 'Button texx' })).toBeVisible() // Throws an error

Before the change in this PR the error message returned is:

There are no accessible roles. But there might be some inaccessible roles. If you wish to access them, then set the `hidden` option to `true`. Learn more about this here: https://testing-library.com/docs/dom-testing-library/api-queries#byrole

After the change the error becomes:

"Unable to find an accessible element with the role "button" and name "Button texx"

      Here are the accessible roles:

        button:

        Name "Button text":
        <button />

        --------------------------------------------------

How: Adds a check for node.shadowRoot in flattenDom to ensure children inside of Web Components are traversed.

Checklist:

• [ ] Documentation added to the docs site N/A
• [x] Tests
• [ ] TypeScript definitions updated N/A
• [x] Ready to be merged

[codesandbox-ci[bot]]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 2cc2867653975284e21a3ef0a36cebb7c84523e4:

Sandbox	Source
react-testing-library-examples	Configuration

[kilmc]

Is there anything I can do to move this along, even if it's going to be rejected?