fix: Follow aria-labelledby and aria-describedby if they point to elements in the same shadow root (#827)

* fix: fix co-located elements in shadow DOM

Partially addresses #768

* chore: fix prettier

* get rid of seemingly redundant "co-located" term

* add changeset

Co-authored-by: eps1lon <[email protected]>

Author: nolanlawson

.changeset/violet-cooks-promise.md

@@ -0,0 +1,5 @@
+---
+"dom-accessibility-api": patch
+---
+
+Follow aria-labelledby and aria-describedby if they point to elements in the same shadow root.

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 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 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,13 @@ 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?