`getByTitle` for SVGs canot find `title` if it's not a direct child of `svg`

• @testing-library/react version: 11.2.7
• Testing Framework and version: jest 26x || 27x
• DOM Environment: 'jsdom' 16.x

Relevant code or config:

Source: https://testing-library.com/docs/queries/bytitle/

    const Test = () => (
        <>
            <span title="Delete" id="2"></span>
            <svg>
                <title>Close</title>
                <g><path /></g>
            </svg>
        </>
    );

VS

    const Test = () => (
        <>
            <span title="Delete" id="2"></span>
            <svg>
                <g>
                    <path>
                         <title>Close</title>
                    </path>
                </g>
            </svg>
       </>
    );

What you did:

render(<Test/>);

screen.getByTitle('Close');

What happened:

First Component - ✅
Second Component - ❌

TestingLibraryElementError: Unable to find an element with the title: Close.

Problem description:

Testing library cannot find Close because it's not a direct child of svg.

Suggested solution:

I should be able to find Close even if it's not a direct child of svg.

Start at the getByTitle query entry point and reproduce the nested SVG example from the issue, comparing it with the direct-child case. Add or update a regression test so screen.getByTitle('Close') succeeds when the title is nested, then run the relevant JavaScript test suite.