@cronn/element-snapshot 0.10.0 → 0.12.0

package/dist/browser-lib.iife.js

@@ -0,0 +1,721 @@
+(function() {
+
+
+//#region src/browser/attribute.ts
+	function stringAttribute(value) {
+		return value !== null && value !== "" ? value : void 0;
+	}
+	function booleanAttribute(value) {
+		return value === true || value === "true" ? true : void 0;
+	}
+	function numericAttribute(value) {
+		if (value === null) return;
+		const parsedValue = parseInt(value);
+		return Number.isNaN(parsedValue) ? void 0 : parsedValue;
+	}
+	function enumAttribute(value, supportedValues) {
+		if (value === null || !supportedValues.has(value)) return;
+		return value;
+	}
+	function resolveElementReference(element, attributeName) {
+		const referenceId = element.getAttribute(attributeName);
+		if (referenceId === null) return null;
+		return element.ownerDocument.getElementById(referenceId);
+	}
+
+//#endregion
+//#region src/browser/children.ts
+	function snapshotChildren(node, excludedNodes = []) {
+		const children = Array.from(node.childNodes).map((node) => snapshotNodeRecursive(node, excludedNodes)).filter((childSnapshot) => childSnapshot !== null).flat();
+		return children.length > 0 ? children : void 0;
+	}
+
+//#endregion
+//#region src/utils/snapshot.ts
+	function filterSnapshots(options) {
+		const { filter, snapshots, recurse = false } = options;
+		return snapshots.flatMap((snapshot) => {
+			const isFilteredIn = filter(snapshot);
+			if (isFilteredIn && !recurse) return snapshot;
+			if (!isFilteredIn && recurse) return [];
+			const filteredChildren = hasChildren(snapshot) ? filterSnapshots({
+				filter,
+				snapshots: snapshot.children ?? [],
+				recurse
+			}) : [];
+			if (!isFilteredIn) return filteredChildren;
+			return {
+				...snapshot,
+				children: filteredChildren.length > 0 ? filteredChildren : void 0
+			};
+		});
+	}
+	function hasChildren(snapshot) {
+		return "children" in snapshot && snapshot.children !== void 0 && snapshot.children.length > 0;
+	}
+
+//#endregion
+//#region src/browser/text.ts
+	function snapshotTextNode(textNode) {
+		if (textNode.textContent === null) return null;
+		const normalizedText = normalizeText(textNode.textContent);
+		if (normalizedText.length === 0) return null;
+		return {
+			role: "text",
+			name: normalizedText
+		};
+	}
+	function snapshotPresentationalChildren(node) {
+		const accessibleTextContent = resolveAccessibleTextContent(node);
+		if (accessibleTextContent === void 0 || accessibleTextContent.length === 0) return;
+		return [{
+			role: "text",
+			name: accessibleTextContent
+		}];
+	}
+	function resolveAccessibleTextContent(node, excludedNodes = []) {
+		const children = snapshotChildren(node, excludedNodes);
+		if (children === void 0) return;
+		const normalizedText = normalizeText(filterSnapshots({
+			snapshots: children,
+			filter: (element) => element.role === "text"
+		}).map((textNode) => textNode.name).join(" "));
+		return normalizedText.length > 0 ? normalizedText : void 0;
+	}
+	function normalizeText(text) {
+		return text.replaceAll(/\s+/g, " ").trim();
+	}
+
+//#endregion
+//#region src/browser/name.ts
+	function resolveAccessibleName(element, includeTextContent = true) {
+		const labelledByElement = resolveElementReference(element, "aria-labelledby");
+		if (labelledByElement !== null) return resolveAccessibleTextContent(labelledByElement);
+		if (element.ariaLabel !== null) return element.ariaLabel;
+		if (includeTextContent) return resolveAccessibleTextContent(element);
+	}
+
+//#endregion
+//#region src/browser/state.ts
+	function disableableAttributes(element) {
+		return { disabled: booleanAttribute(isNativeInputElement(element) || element instanceof HTMLButtonElement ? element.hasAttribute("disabled") : false) ?? booleanAttribute(element.ariaDisabled) };
+	}
+	function selectableAttributes(element) {
+		return { selected: booleanAttribute(element.ariaSelected) };
+	}
+	function inputStateAttributes(element) {
+		const supportsHtmlAttributes = isNativeInputElement(element);
+		const readonly = booleanAttribute(supportsHtmlAttributes ? element.hasAttribute("readonly") : false);
+		const required = booleanAttribute(supportsHtmlAttributes ? element.hasAttribute("required") : false);
+		return {
+			readonly: readonly ?? booleanAttribute(element.ariaReadOnly),
+			...disableableAttributes(element),
+			required: required ?? booleanAttribute(element.ariaRequired),
+			invalid: booleanAttribute(element.ariaInvalid)
+		};
+	}
+	function isNativeInputElement(element) {
+		return element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement || element instanceof HTMLSelectElement;
+	}
+
+//#endregion
+//#region src/browser/button.ts
+	const PRESSED_VALUES = new Set([
+		"true",
+		"mixed",
+		"false"
+	]);
+	function snapshotButton(element) {
+		return {
+			role: "button",
+			name: resolveAccessibleName(element),
+			attributes: {
+				...disableableAttributes(element),
+				expanded: booleanAttribute(element.ariaExpanded),
+				pressed: resolvePressedAttribute(element)
+			},
+			children: snapshotChildren(element)
+		};
+	}
+	function resolvePressedAttribute(element) {
+		const pressed = enumAttribute(element.ariaPressed, PRESSED_VALUES);
+		if (pressed === "mixed") return pressed;
+		return booleanAttribute(pressed === "true");
+	}
+
+//#endregion
+//#region src/browser/description.ts
+	function discribableAttributes(element) {
+		return { description: resolveDescription(element) };
+	}
+	function resolveDescription(element) {
+		const describedByElement = resolveElementReference(element, "aria-describedby");
+		if (describedByElement !== null) return resolveAccessibleTextContent(describedByElement);
+		if (element.ariaDescription !== null) return element.ariaDescription;
+	}
+
+//#endregion
+//#region src/browser/container.ts
+	const CONTAINER_ROLES = new Set([
+		"paragraph",
+		"list",
+		"listitem",
+		"listbox",
+		"article",
+		"banner",
+		"complementary",
+		"contentinfo",
+		"form",
+		"main",
+		"navigation",
+		"region",
+		"search",
+		"descriptionlist",
+		"term",
+		"definition",
+		"table",
+		"grid",
+		"rowgroup",
+		"row",
+		"rowheader",
+		"cell",
+		"gridcell",
+		"alert",
+		"menu",
+		"tablist",
+		"tabpanel"
+	]);
+	function snapshotContainer(role, element) {
+		const children = snapshotChildren(element);
+		return {
+			role,
+			name: resolveAccessibleName(element, false),
+			children
+		};
+	}
+	function isContainerRole(role) {
+		return CONTAINER_ROLES.has(role);
+	}
+
+//#endregion
+//#region src/browser/selector.ts
+	function selectorList(...selectors) {
+		return selectors.join(",");
+	}
+	function roleSelector(roleName) {
+		return attributeSelector("role", roleName);
+	}
+	function attributeSelector(name, value) {
+		return `[${name}='${value}']`;
+	}
+
+//#endregion
+//#region src/browser/utils.ts
+	function getElementTagName(element) {
+		return element.tagName.toLowerCase();
+	}
+	function isWithinElement(element, containerSelector) {
+		return element.closest(containerSelector) !== null;
+	}
+
+//#endregion
+//#region src/browser/role.ts
+	const ELEMENT_ROLES = {
+		main: "main",
+		nav: "navigation",
+		form: "form",
+		header: "banner",
+		section: "region",
+		article: "article",
+		aside: "complementary",
+		search: "search",
+		footer: "contentinfo",
+		p: "paragraph",
+		h1: "heading",
+		h2: "heading",
+		h3: "heading",
+		h4: "heading",
+		h5: "heading",
+		h6: "heading",
+		ul: "list",
+		ol: "list",
+		li: "listitem",
+		a: "link",
+		button: "button",
+		input: resolveInputRole,
+		textarea: "textbox",
+		select: "combobox",
+		option: "option",
+		dl: "descriptionlist",
+		dt: "term",
+		dd: "definition",
+		table: "table",
+		thead: "rowgroup",
+		tbody: "rowgroup",
+		tfoot: "rowgroup",
+		tr: "row",
+		th: resolveTableHeaderCellRole,
+		td: "cell",
+		fieldset: "group",
+		progress: "progressbar",
+		hr: "separator",
+		img: "img"
+	};
+	const CONTEXT_DEPENDENT_ROLES = {
+		banner: isTopLevelBanner,
+		region: hasAccessibleName,
+		term: isWithinDescriptionList,
+		definition: isWithinDescriptionList,
+		listitem: isWithinList,
+		menuitem: isWithinMenu,
+		rowgroup: isWithinTableOrGrid,
+		row: isWithinTableOrGrid,
+		columnheader: isWithinTableRowOrGridRow,
+		rowheader: isWithinTableRowOrGridRow,
+		cell: isWithinTableRow,
+		gridcell: isWithinGridRow,
+		tab: isWithinTablist
+	};
+	const INPUT_ROLES = {
+		button: "button",
+		checkbox: "checkbox",
+		email: "textbox",
+		image: "button",
+		number: "spinbutton",
+		radio: "radio",
+		range: "slider",
+		reset: "button",
+		search: "searchbox",
+		submit: "button",
+		tel: "searchbox",
+		text: "textbox",
+		url: "textbox"
+	};
+	function parseElementRole(element) {
+		const resolvedElementRole = resolveElementRole(element);
+		if (resolvedElementRole === void 0) return;
+		const isValidInContext = CONTEXT_DEPENDENT_ROLES[resolvedElementRole];
+		if (isValidInContext !== void 0 && !isValidInContext(element)) return;
+		return resolvedElementRole;
+	}
+	function resolveElementRole(element) {
+		const explicitRole = element.role;
+		if (isIgnoredRole(explicitRole)) return;
+		if (explicitRole !== null && (hasRoleSpecificSnapshot(explicitRole) || isContainerRole(explicitRole))) return explicitRole;
+		const roleResolver = ELEMENT_ROLES[getElementTagName(element)];
+		if (roleResolver === void 0) return;
+		if (typeof roleResolver === "string") return roleResolver;
+		return roleResolver(element);
+	}
+	function isIgnoredRole(role) {
+		return role === "presentation" || role === "none";
+	}
+	function resolveInputRole(element) {
+		if (!(element instanceof HTMLInputElement)) return;
+		const roleResolver = INPUT_ROLES[element.type];
+		if (roleResolver === void 0) return "textbox";
+		if (typeof roleResolver === "string") return roleResolver;
+		return roleResolver(element);
+	}
+	const DISALLOWED_BANNER_CONTAINER_ELEMENTS = [
+		"article",
+		"aside",
+		"main",
+		"nav",
+		"section"
+	];
+	const DISALLOWED_BANNER_CONTAINER_ROLES = [
+		"article",
+		"complementary",
+		"main",
+		"navigation",
+		"region"
+	];
+	function isTopLevelBanner(element) {
+		return !isWithinElement(element, selectorList(...DISALLOWED_BANNER_CONTAINER_ELEMENTS, ...DISALLOWED_BANNER_CONTAINER_ROLES.map(roleSelector)));
+	}
+	function hasAccessibleName(element) {
+		return resolveAccessibleName(element, false) !== void 0;
+	}
+	function isWithinDescriptionList(element) {
+		return isWithinElement(element, "dl");
+	}
+	function resolveTableHeaderCellRole(element) {
+		if (!(element instanceof HTMLTableCellElement)) return;
+		switch (element.scope) {
+			case "col": return "columnheader";
+			case "row": return "rowheader";
+			default: return;
+		}
+	}
+	function isWithinTableOrGrid(element) {
+		return isWithinTable(element) || isWithinGrid(element);
+	}
+	function isWithinTable(element) {
+		return isWithinElement(element, selectorList("table", roleSelector("table")));
+	}
+	function isWithinGrid(element) {
+		return isWithinElement(element, roleSelector("grid"));
+	}
+	function isWithinTableRowOrGridRow(element) {
+		return isWithinTableRow(element) || isWithinGridRow(element);
+	}
+	function isWithinTableRow(element) {
+		const closestRow = element.closest(selectorList("tr", roleSelector("row")));
+		return closestRow !== null && isWithinTable(closestRow);
+	}
+	function isWithinGridRow(element) {
+		const closestRow = element.closest(selectorList("tr", roleSelector("row")));
+		return closestRow !== null && isWithinGrid(closestRow);
+	}
+	function isWithinList(element) {
+		return isWithinElement(element, selectorList("ul", "ol", roleSelector("list")));
+	}
+	function isWithinMenu(element) {
+		return isWithinElement(element, roleSelector("menu"));
+	}
+	function isWithinTablist(element) {
+		return isWithinElement(element, roleSelector("tablist"));
+	}
+
+//#endregion
+//#region src/browser/input.ts
+	function snapshotInput(element) {
+		if (element instanceof HTMLInputElement) return snapshotInputElement(element);
+		if (element instanceof HTMLTextAreaElement) return snapshotTextareaElement(element);
+		return null;
+	}
+	function snapshotInputElement(element) {
+		const inputRole = resolveInputRole(element);
+		if (inputRole === void 0 || inputRole === "button" || inputRole === "combobox") return null;
+		const value = resolveInputValue(element);
+		return {
+			role: inputRole,
+			name: resolveInputLabel(element),
+			attributes: {
+				value,
+				checked: resolveChecked(element),
+				...snapshotCommonInputAttributes(element, value === void 0)
+			}
+		};
+	}
+	function snapshotTextareaElement(element) {
+		const value = resolveInputValue(element);
+		return {
+			role: "textbox",
+			name: resolveInputLabel(element),
+			attributes: {
+				value,
+				...snapshotCommonInputAttributes(element, value === void 0)
+			}
+		};
+	}
+	function snapshotCommonInputAttributes(element, isEmpty) {
+		return {
+			...discribableAttributes(element),
+			placeholder: isEmpty ? resolvePlaceholder(element) : void 0,
+			...inputStateAttributes(element)
+		};
+	}
+	const CHECKED_INPUT_TYPES = new Set(["checkbox", "radio"]);
+	function resolveInputValue(element) {
+		if (element instanceof HTMLInputElement && CHECKED_INPUT_TYPES.has(element.type)) return;
+		return stringAttribute(element.value);
+	}
+	function resolveChecked(element) {
+		if (!(element instanceof HTMLInputElement)) return;
+		return element.checked ? true : void 0;
+	}
+	function resolveInputLabel(element) {
+		const accessibleName = resolveAccessibleName(element, false);
+		if (accessibleName !== void 0) return accessibleName;
+		if (element.id !== null) {
+			const referencedElement = element.ownerDocument.querySelector(`[for='${element.id}']`);
+			if (referencedElement !== null) return resolveAccessibleTextContent(referencedElement);
+		}
+		const closestLabel = element.closest("label");
+		if (closestLabel !== null) return resolveAccessibleTextContent(closestLabel, [element]);
+	}
+	function resolvePlaceholder(element) {
+		if (element instanceof HTMLSelectElement || element instanceof HTMLButtonElement) return;
+		return stringAttribute(element.placeholder);
+	}
+
+//#endregion
+//#region src/browser/combobox.ts
+	function snapshotCombobox(element) {
+		if (!isCombobox(element)) return null;
+		const options = snapshotOptions(element);
+		const value = resolveValue$1(element);
+		return {
+			role: "combobox",
+			name: resolveInputLabel(element),
+			attributes: {
+				value,
+				...snapshotCommonInputAttributes(element, value === void 0)
+			},
+			options
+		};
+	}
+	function isCombobox(element) {
+		if (element instanceof HTMLSelectElement) return element.role === null || element.role === "combobox";
+		if (element instanceof HTMLInputElement || element instanceof HTMLButtonElement) return element.role === "combobox";
+		return false;
+	}
+	function resolveValue$1(element) {
+		if (element instanceof HTMLButtonElement) return resolveAccessibleTextContent(element);
+		if (element instanceof HTMLInputElement) return resolveInputValue(element);
+		const selectedLabels = Array.from(element.selectedOptions).map((option) => option.label);
+		if (selectedLabels.length === 0) return;
+		if (selectedLabels.length === 1) return selectedLabels.at(0);
+		return selectedLabels;
+	}
+	function snapshotOptions(element) {
+		return resolveOptions(element).map(snapshotOption).filter((childSnapshot) => childSnapshot !== null);
+	}
+	function resolveOptions(element) {
+		if (element instanceof HTMLSelectElement) return Array.from(element.options);
+		const controlledElement = resolveElementReference(element, "aria-controls");
+		if (controlledElement === null) return [];
+		const optionSelector = selectorList("option", roleSelector("option"));
+		return Array.from(controlledElement.querySelectorAll(optionSelector));
+	}
+	function snapshotOption(element) {
+		return {
+			role: "option",
+			name: resolveAccessibleName(element),
+			attributes: { selected: element instanceof HTMLOptionElement ? booleanAttribute(element.selected) : booleanAttribute(element.ariaSelected) },
+			children: snapshotChildren(element)
+		};
+	}
+
+//#endregion
+//#region src/browser/dialog.ts
+	function snapshotDialogWithRole(role) {
+		return (element) => snapshotDialog(role, element);
+	}
+	function snapshotDialog(role, element) {
+		return {
+			role,
+			name: resolveAccessibleName(element, false),
+			attributes: {
+				...discribableAttributes(element),
+				modal: booleanAttribute(element.ariaModal)
+			},
+			children: snapshotChildren(element)
+		};
+	}
+
+//#endregion
+//#region src/browser/group.ts
+	function snapshotGroup(element) {
+		return {
+			role: "group",
+			name: resolveGroupName(element),
+			children: snapshotChildren(element)
+		};
+	}
+	function resolveGroupName(element) {
+		const legendElement = element instanceof HTMLFieldSetElement ? element.querySelector("legend") : null;
+		if (legendElement !== null) return resolveAccessibleTextContent(legendElement);
+		return resolveAccessibleName(element, false);
+	}
+	function snapshotRadiogroup(element) {
+		return {
+			role: "radiogroup",
+			name: resolveAccessibleName(element, false),
+			attributes: discribableAttributes(element),
+			children: snapshotChildren(element)
+		};
+	}
+
+//#endregion
+//#region src/browser/heading.ts
+	const LEVEL_REGEXP = /^H([1-6])$/;
+	function snapshotHeading(element) {
+		if (!(element instanceof HTMLHeadingElement)) return null;
+		return {
+			role: "heading",
+			name: resolveAccessibleName(element),
+			attributes: { level: resolveLevel(element) },
+			children: snapshotChildren(element)
+		};
+	}
+	function resolveLevel(element) {
+		return numericAttribute(LEVEL_REGEXP.exec(element.nodeName)?.at(1) ?? null);
+	}
+
+//#endregion
+//#region src/browser/image.ts
+	function snapshotImage(element) {
+		const imageName = resolveImageName(element);
+		if (imageName === void 0) return null;
+		return {
+			role: "img",
+			name: imageName
+		};
+	}
+	function resolveImageName(element) {
+		if (element instanceof HTMLImageElement) return stringAttribute(element.alt);
+		return resolveAccessibleName(element, true);
+	}
+
+//#endregion
+//#region src/browser/link.ts
+	function snapshotLink(element) {
+		return {
+			role: "link",
+			name: resolveAccessibleName(element),
+			attributes: linkAttributes(element),
+			children: snapshotChildren(element)
+		};
+	}
+	function linkAttributes(element) {
+		return { url: stringAttribute(element.getAttribute("href")) };
+	}
+
+//#endregion
+//#region src/browser/list.ts
+	function snapshotMenuitem(element) {
+		return {
+			role: "menuitem",
+			name: resolveAccessibleName(element),
+			attributes: {
+				...linkAttributes(element),
+				...disableableAttributes(element)
+			},
+			children: snapshotChildren(element)
+		};
+	}
+
+//#endregion
+//#region src/browser/progressbar.ts
+	function snapshotProgressbar(element) {
+		return {
+			role: "progressbar",
+			name: resolveAccessibleName(element, false),
+			attributes: { value: resolveValue(element) },
+			children: snapshotPresentationalChildren(element)
+		};
+	}
+	function resolveValue(element) {
+		if (element instanceof HTMLProgressElement) return element.value;
+		return numericAttribute(element.ariaValueNow);
+	}
+
+//#endregion
+//#region src/browser/separator.ts
+	function snapshotSeparator(element) {
+		return {
+			role: "separator",
+			children: snapshotPresentationalChildren(element)
+		};
+	}
+
+//#endregion
+//#region src/browser/tab.ts
+	function snapshotTab(element) {
+		return {
+			role: "tab",
+			name: resolveAccessibleName(element),
+			attributes: {
+				...disableableAttributes(element),
+				...selectableAttributes(element)
+			},
+			children: snapshotChildren(element)
+		};
+	}
+
+//#endregion
+//#region src/browser/table.ts
+	const SORT_ATTRIBUTES = new Set([
+		"ascending",
+		"descending",
+		"other"
+	]);
+	function snapshotColumnheader(element) {
+		return {
+			role: "columnheader",
+			name: resolveAccessibleName(element),
+			attributes: { sort: enumAttribute(element.ariaSort, SORT_ATTRIBUTES) },
+			children: snapshotChildren(element)
+		};
+	}
+
+//#endregion
+//#region src/browser/element.ts
+	const ROLE_SNAPSHOTS = {
+		button: snapshotButton,
+		checkbox: snapshotInput,
+		combobox: snapshotCombobox,
+		option: snapshotOption,
+		heading: snapshotHeading,
+		link: snapshotLink,
+		radio: snapshotInput,
+		searchbox: snapshotInput,
+		slider: snapshotInput,
+		spinbutton: snapshotInput,
+		textbox: snapshotInput,
+		dialog: snapshotDialogWithRole("dialog"),
+		alertdialog: snapshotDialogWithRole("alertdialog"),
+		tab: snapshotTab,
+		menuitem: snapshotMenuitem,
+		columnheader: snapshotColumnheader,
+		group: snapshotGroup,
+		radiogroup: snapshotRadiogroup,
+		progressbar: snapshotProgressbar,
+		img: snapshotImage,
+		separator: snapshotSeparator
+	};
+	function snapshotElement(element) {
+		return snapshotNodeRecursive(element);
+	}
+	function snapshotNodeRecursive(node, excludedNodes = []) {
+		const snapshot = snapshotNodeByType(node, excludedNodes);
+		if (snapshot === null) return [];
+		if (Array.isArray(snapshot)) return snapshot;
+		return [snapshot];
+	}
+	function snapshotNodeByType(node, excludedNodes) {
+		if (excludedNodes.includes(node)) return null;
+		if (node.nodeType === Node.TEXT_NODE) return snapshotTextNode(node);
+		if (!isSupportedElement(node) || isHiddenElement(node)) return null;
+		const elementRole = parseElementRole(node);
+		if (elementRole === void 0) return snapshotChildren(node, excludedNodes) ?? null;
+		if (hasRoleSpecificSnapshot(elementRole)) {
+			const snapshotByRole = ROLE_SNAPSHOTS[elementRole];
+			return snapshotByRole(node);
+		}
+		return snapshotContainer(elementRole, node);
+	}
+	const UNSUPPORTED_ELEMENTS = new Set([
+		"style",
+		"script",
+		"noscript",
+		"picture",
+		"audio",
+		"video",
+		"figure",
+		"template"
+	]);
+	function isSupportedElement(node) {
+		if (!(node instanceof HTMLElement || node instanceof SVGElement)) return false;
+		const tagName = getElementTagName(node);
+		return !UNSUPPORTED_ELEMENTS.has(tagName);
+	}
+	function hasRoleSpecificSnapshot(role) {
+		return role in ROLE_SNAPSHOTS;
+	}
+	function isHiddenElement(element) {
+		if (element.hasAttribute("hidden")) return true;
+		if (booleanAttribute(element.ariaHidden) === true) return true;
+		const cssStyles = window.getComputedStyle(element);
+		return cssStyles.display === "none" || cssStyles.visibility === "hidden" || cssStyles.visibility === "collapse";
+	}
+
+//#endregion
+//#region src/browser-lib.ts
+	window.snapshotElement = snapshotElement;
+
+//#endregion
+})();