fix: Handle self-referencing in aria-labelledby (#902)

* fix: Handle self-referencing in `aria-labelledby`

* Update sources/accessible-name-and-description.ts

Author: eps1lon

.changeset/heavy-falcons-melt.md

@@ -0,0 +1,5 @@
+---
+"dom-accessibility-api": patch
+---
+
+Fix a case of maximum call stack size exceeded when a node referenced itself in `aria-labelledby`.

sources/__tests__/accessible-name.js

@@ -407,6 +407,39 @@ test.each([
 		"a logo",
 	],
 	[` <input type="radio" data-test title="crazy"/>`, "crazy"],
+	[
+		`
+		<h2 id="lorem-heading">
+			Lorem ipsum
+			<a data-test aria-labelledby="lorem-heading" href="#lorem-heading" tabindex="-1">
+				<svg></svg>
+			</a>
+		</h2>
+	`,
+		"Lorem ipsum",
+	],
+	[
+		`
+		<label for="toggle-button" id="label" value="full">
+			<button
+				data-test
+				aria-expanded="false"
+				aria-haspopup="listbox"
+				aria-labelledby="label toggle-button"
+				id="toggle-button"
+				type="button"
+			>
+				<span>
+					Full Refund
+				</span>
+			</button>
+			<div>
+				Refund Type
+			</div>
+		</label>
+		`,
+		"Full Refund Refund Type",
+	],
 ])(`misc #%#`, (markup, expectedAccessibleName) => {
 	expect(markup).toRenderIntoDocumentAccessibleName(expectedAccessibleName);
 });

sources/accessible-name-and-description.ts

@@ -575,23 +575,34 @@ export function computeTextAlternative(
 		}
 
 		// 2B
-		const labelElements = queryIdRefs(current, "aria-labelledby");
+		const labelAttributeNode = isElement(current)
+			? current.getAttributeNode("aria-labelledby")
+			: null;
+		// TODO: Do we generally need to block query IdRefs of attributes we have already consulted?
+		const labelElements =
+			labelAttributeNode !== null && !consultedNodes.has(labelAttributeNode)
+				? queryIdRefs(current, "aria-labelledby")
+				: [];
 		if (
 			compute === "name" &&
 			!context.isReferenced &&
 			labelElements.length > 0
 		) {
+			// eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- Can't be null here otherwise labelElements would be empty
+			consultedNodes.add(labelAttributeNode!);
+
 			return labelElements
-				.map((element) =>
-					computeTextAlternative(element, {
+				.map((element) => {
+					// TODO: Chrome will consider repeated values i.e. use a node multiple times while we'll bail out in computeTextAlternative.
+					return computeTextAlternative(element, {
 						isEmbeddedInLabel: context.isEmbeddedInLabel,
 						isReferenced: true,
-						// thais isn't recursion as specified, otherwise we would skip
+						// this isn't recursion as specified, otherwise we would skip
 						// `aria-label` in
 						// <input id="myself" aria-label="foo" aria-labelledby="myself"
 						recursion: false,
-					})
-				)
+					});
+				})
 				.join(" ");
 		}