fix: fix co-located elements in shadow DOM

Partially addresses eps1lon#768

sources/__tests__/accessible-description.js

@@ -63,3 +63,17 @@ describe("wpt copies", () => {
 		testMarkup(markup, expectedAccessibleName)
 	);
 });
+
+describe("content in shadow DOM", () => {
+	it("works for aria-labelledby on co-located elements in same shadow root", () => {
+		const container = renderIntoDocument('<div></div>')
+		const div = container.querySelector('div')
+		div.attachShadow({ mode: 'open' }).innerHTML = `
+			<div id="theDescription">This is a button</div>
+			<button aria-describedby="theDescription">Click me</button>
+		`
+
+		const button = div.shadowRoot.querySelector('button')
+		expect(computeAccessibleDescription(button)).toEqual('This is a button')
+	})
+})

sources/__tests__/accessible-name.js

@@ -589,3 +589,17 @@ describe("options.hidden", () => {
 		);
 	});
 });
+
+describe("content in shadow DOM", () => {
+	it("works for aria-labelledby on co-located elements in same shadow root", () => {
+		const container = renderIntoDocument('<div></div>')
+		const div = container.querySelector('div')
+		div.attachShadow({ mode: 'open' }).innerHTML = `
+			<label id="theLabel">Type here</label>
+			<input type="text" aria-labelledby="theLabel">
+		`
+
+		const input = div.shadowRoot.querySelector('input')
+		expect(computeAccessibleName(input)).toEqual('Type here')
+	})
+})

sources/util.ts

@@ -90,8 +90,11 @@ export function queryIdRefs(node: Node, attributeName: string): Element[] {
 		// eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- safe due to hasAttribute check
 		const ids = node.getAttribute(attributeName)!.split(" ");
 
+		// Browsers that don't support shadow DOM won't have getRootNode
+		const root = node.getRootNode ? node.getRootNode() as (Document | ShadowRoot) : node.ownerDocument;
+
 		return ids
-			.map((id) => node.ownerDocument.getElementById(id))
+			.map((id) => root.getElementById(id))
 			.filter(
 				(element: Element | null): element is Element => element !== null
 				// TODO: why does this not narrow?