Email accessibility testing tools

/* A11Y Email console snippet generated from Firefox build v31. Paste into DevTools console. */

(() => {
const root = (window.A11Y_EMAIL = window.A11Y_EMAIL || {});
const ids = (root.ids = {
	report: 'a11y-email-report',
	styles: 'a11y-email-styles',
	svg: 'a11y-email-tabstops-svg',
	imageOverlay: 'a11y-email-image-overlay',
	listOverlay: 'a11y-email-list-overlay',
	headingsOverlay: 'a11y-email-headings-overlay',
	overlay: 'a11y-email-geometry-overlay'
});

root.defaults = {
	headings: false,
	links: false,
	tabStops: false,
	emailMeta: false,
	images: false,
	tables: false,
	tableLinearise: false,
	textSpacing: false,
	baseFontSize: 16
};

root.escapeHtml = (value) => String(value ?? '')
	.replaceAll('&', '&')
	.replaceAll('<', '&lt;')
	.replaceAll('>', '&gt;')
	.replaceAll('"', '&quot;')
	.replaceAll("'", '&#39;');

root.escapeAttr = root.escapeHtml;

root.ensureHead = () => {
	if (document.head) return document.head;
	const head = document.createElement('head');
	document.documentElement.prepend(head);
	return head;
};

root.ensureBody = () => {
	if (document.body) {
	const position = getComputedStyle(document.body).position;
	if (position === 'static') document.body.style.position = 'relative';
	return document.body;
	}
	const body = document.createElement('body');
	body.style.position = 'relative';
	document.documentElement.appendChild(body);
	return body;
};

root.removeById = (id) => {
	document.getElementById(id)?.remove();
};

root.isInternalElement = (el) => {
	if (!el || !(el instanceof Element)) return false;
	return Boolean(el.closest(`#${ids.report}, #a11y-email-console-ui, #${ids.overlay}, #${ids.imageOverlay}, #${ids.listOverlay}, #${ids.headingsOverlay}`));
};

root.isTrackingPixel = (el) => {
	if (!(el instanceof HTMLImageElement)) return false;
	const rect = el.getBoundingClientRect();
	const w = Math.round(rect.width);
	const h = Math.round(rect.height);
	if ((w <= 1 && h <= 1) || (el.width <= 1 && el.height <= 1)) return true;
	const src = (el.getAttribute('src') || '').toLowerCase();
	const alt = (el.getAttribute('alt') || '').trim();
	return (src.includes('tracking') || src.includes('openrate') || src.includes('pixel')) && !alt;
};

root.isMeaningfulVisibleContent = (el) => {
	if (!(el instanceof Element)) return false;
	if (root.isInternalElement(el) || !root.visible(el)) return false;
	if (el.matches('script,style,meta,link,noscript,template')) return false;
	if (el.matches('img') && root.isTrackingPixel(el)) return false;
	if (el.children.length === 0) {
	const text = (el.textContent || '').replace(/\s+/g, ' ').trim();
	return Boolean(text) || el.matches('img,svg,button,input,select,textarea,a,video,audio,iframe');
	}
	return false;
};

root.visible = (el) => {
	if (!el || !(el instanceof Element)) return false;
	if (root.isInternalElement(el)) return false;
	const node = el;
	if (typeof node.checkVisibility === 'function') {
	try { return node.checkVisibility(); } catch {}
	}
	const style = getComputedStyle(el);
	if (style.display === 'none' || style.visibility === 'hidden' || style.opacity === '0') return false;
	const rect = el.getBoundingClientRect();
	return rect.width > 0 && rect.height > 0;
};

root.getDirectText = (el) => Array.from(el.childNodes)
	.filter((node) => node.nodeType === Node.TEXT_NODE)
	.map((node) => String(node.textContent || '').replace(/\s+/g, ' ').trim())
	.filter(Boolean)
	.join(' ')
	.trim();

root.getFontSize = (el) => {
	const size = parseFloat(getComputedStyle(el).fontSize);
	return Number.isFinite(size) ? size : 0;
};

root.getAccessibleName = (el) => {
	if (!(el instanceof Element)) return '';
	if (root.isInternalElement(el)) return '';
	const ariaLabel = el.getAttribute('aria-label');
	if (ariaLabel && ariaLabel.trim()) return ariaLabel.trim();

	const labelledby = el.getAttribute('aria-labelledby');
	if (labelledby) {
	const parts = labelledby
		.split(/\s+/)
		.map((id) => document.getElementById(id)?.textContent || '')
		.map((text) => text.replace(/\s+/g, ' ').trim())
		.filter(Boolean);
	if (parts.length) return parts.join(' ').trim();
	}

	const title = el.getAttribute('title');
	if (title && title.trim()) return title.trim();

	const text = (el.textContent || '').replace(/\s+/g, ' ').trim();
	if (text) return text;

	const img = el.querySelector?.('img[alt]');
	const alt = img ? (img.getAttribute('alt') || '').trim() : '';
	return alt || '';
};

root.makeSection = (title, bodyHtml) => `<section class="a11y-section"><h2>${root.escapeHtml(title)}</h2>${bodyHtml}</section>`;

root.annotationText = (prefix, value) => `${prefix}: "${value}"`;

root.clearHeadingAnnotations = () => {
	document.querySelectorAll('[data-a11y-heading]').forEach((el) => {
	el.removeAttribute('data-a11y-heading');
	el.removeAttribute('data-a11y-heading-level');
	el.removeAttribute('data-a11y-heading-order');
	el.removeAttribute('data-a11y-heading-label');
	el.removeAttribute('data-a11y-heading-kind');
	el.removeAttribute('data-text');
	el.classList.remove('a11y-heading-highlight', 'a11y-heading-issue', 'a11y-heading-alt');
	});
};

root.clearLargeTextAnnotations = () => {
	document.querySelectorAll('[data-a11y-large-text]').forEach((el) => {
	el.removeAttribute('data-a11y-large-text');
	el.removeAttribute('data-a11y-large-text-label');
	el.removeAttribute('data-a11y-large-text-size');
	el.classList.remove('a11y-large-text-highlight', 'a11y-large-text-issue');
	});
};

root.clearTableAnnotations = () => {
	document.querySelectorAll('[data-a11y-table]').forEach((el) => {
	el.removeAttribute('data-a11y-table');
	el.removeAttribute('data-a11y-table-label');
	el.removeAttribute('data-a11y-table-status');
	el.classList.remove('a11y-table-highlight', 'a11y-table-issue', 'a11y-table-possible-list');
	});
	document.querySelectorAll('[data-a11y-table-row-issue], [data-a11y-table-body-issue]').forEach((el) => {
	el.removeAttribute('data-a11y-table-row-issue');
	el.removeAttribute('data-a11y-table-body-issue');
	el.classList.remove('a11y-table-row-issue', 'a11y-table-body-issue');
	if (el instanceof HTMLElement) {
		el.style.outline = '';
		el.style.outlineOffset = '';
	}
	});
};

root.clearImageAnnotations = () => {
	document.querySelectorAll('[data-a11y-image]').forEach((el) => {
	el.removeAttribute('data-a11y-image');
	el.removeAttribute('data-a11y-image-label');
	el.removeAttribute('data-a11y-image-status');
	el.classList.remove('a11y-image-present', 'a11y-image-empty', 'a11y-image-missing');
	if (el instanceof HTMLElement) {
		el.style.outline = '';
		el.style.outlineOffset = '';
	}
	});
	root.removeById(ids.imageOverlay);
	root.removeById(ids.overlay);
};

root.clearLinkAnnotations = () => {
	document.querySelectorAll('[data-textlink], [data-a11y-link]').forEach((el) => {
	el.removeAttribute('data-textlink');
	el.removeAttribute('data-a11y-link');
	el.removeAttribute('data-a11y-link-label');
	el.classList.remove('a11y-link-highlight', 'a11y-link-issue', 'a11y-link-ok', 'a11y-link-focus', 'a11y-link-image-label', 'a11y-link-image-missing', 'a11y-link-image-wrap');
	if (el instanceof HTMLElement) {
		el.style.outline = '';
		el.style.outlineOffset = '';
		el.style.display = '';
	}
	el.querySelectorAll?.('[data-a11y-link-image]').forEach((img) => {
		img.removeAttribute('data-a11y-link-image');
		if (img instanceof HTMLElement) {
		img.style.outline = '';
		img.style.outlineOffset = '';
		}
	});
	});
};

root.clearAll = () => {
	root.removeById(ids.report);
	root.removeById(ids.styles);
	root.removeById(ids.svg);
	root.removeById(ids.imageOverlay);
	root.removeById(ids.overlay);
	root.removeById(ids.listOverlay);
	root.removeById(ids.headingsOverlay);
	root.clearHeadingAnnotations();
	root.clearLargeTextAnnotations();
	root.clearTableAnnotations();
	document.body?.classList.remove('a11y-table-linearise');
	root.clearImageAnnotations();
	root.clearLinkAnnotations();
	document.querySelectorAll('[data-a11y-annotate], [data-text], [data-textlink], [data-a11y-list], [data-a11y-tabable], [data-a11y-tabstop-handlers], [data-a11y-link-image]').forEach((el) => {
	el.removeAttribute('data-a11y-annotate');
	el.removeAttribute('data-text');
	el.removeAttribute('data-textlink');
	el.removeAttribute('data-a11y-list');
	el.removeAttribute('data-a11y-tabable');
	el.removeAttribute('data-a11y-list-possible');
	el.removeAttribute('data-a11y-table-row-issue');
	el.removeAttribute('data-a11y-table-body-issue');
	el.removeAttribute('data-a11y-tabstop-handlers');
	el.classList.remove('-js-tabable', 'a11y-heading-highlight', 'a11y-heading-issue', 'a11y-heading-alt', 'a11y-large-text-highlight', 'a11y-large-text-issue', 'a11y-table-highlight', 'a11y-table-issue', 'a11y-table-possible-list', 'a11y-table-row-issue', 'a11y-table-body-issue', 'a11y-image-present', 'a11y-image-empty', 'a11y-image-missing', 'a11y-link-highlight', 'a11y-link-issue', 'a11y-link-ok', 'a11y-link-focus', 'a11y-link-image-label', 'a11y-link-image-missing', 'a11y-link-image-wrap', 'a11y-possible-list-highlight');
	if (el instanceof HTMLElement) {
		el.style.outline = '';
		el.style.outlineOffset = '';
	}
	});
	root.clearTextSpacing?.();
};

root.setTableLinearise = (enabled) => {
	const body = root.ensureBody();
	document.querySelectorAll('.a11y-preserve-hidden').forEach((el) => el.classList.remove('a11y-preserve-hidden'));
	document.querySelectorAll('table[data-a11y-linearise-width]').forEach((table) => {
	table.style.removeProperty('--a11y-linearise-width');
	table.removeAttribute('data-a11y-linearise-width');
	});
	if (enabled) {
	document.querySelectorAll('table').forEach((table) => {
		const width = Math.round(table.getBoundingClientRect().width);
		if (width > 0) {
		table.setAttribute('data-a11y-linearise-width', String(width));
		table.style.setProperty('--a11y-linearise-width', `${width}px`);
		}
	});
	document.querySelectorAll('table, table *').forEach((el) => {
		try {
		const style = getComputedStyle(el);
		if (style.display === 'none' || style.visibility === 'hidden' || el.hidden || el.getAttribute('aria-hidden') === 'true') {
			el.classList.add('a11y-preserve-hidden');
		}
		} catch {}
	});
	}
	body.classList.toggle('a11y-table-linearise', Boolean(enabled));
};

root.reportShellCss = `
#a11y-email-report{font:400 14px/1.5 system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:#222;background:transparent;border:0;margin:0;padding:0;display:block;max-width:100%;box-sizing:border-box}
#a11y-email-report h2{font:600 18px/1.3 system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;margin:0 0 8px}
#a11y-email-report h3{font:600 15px/1.3 system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;margin:12px 0 6px}
#a11y-email-report ol,#a11y-email-report ul{margin:8px 0 0 20px;padding:0}
#a11y-email-report li{margin:4px 0}
#a11y-email-report code,#a11y-email-report kbd{background:#fff;border:1px solid #ccc;border-radius:4px;padding:0 .3em}
#a11y-email-report .warn{color:#c00000;font-weight:600}
#a11y-email-report .ok{color:#087f23;font-weight:600}
#a11y-email-report .muted{color:#555}
#a11y-email-report table{border-collapse:collapse;width:100%}
#a11y-email-report td,#a11y-email-report th{border:1px solid #ddd;padding:4px 6px;vertical-align:top}
#a11y-email-report .a11y-section{margin-bottom:16px}
#a11y-email-report .a11y-annotation-prefix{font-weight:400}
#a11y-email-report .a11y-annotation-quote{font-style:italic}
#a11y-email-report .a11y-annotation-note{color:#b00020;font-weight:600}
#a11y-email-report .a11y-compact-list{margin:8px 0 0 0;padding:0 !important;list-style:none}
#a11y-email-report .a11y-compact-list li{margin:4px 0}
#a11y-email-report .a11y-report-linkname{color:#0b5e20 !important;text-decoration:underline !important;font-weight:400 !important}
#a11y-email-report .a11y-status-pill{display:inline-flex;align-items:center;min-width:2.2em;padding:2px 8px;border-radius:999px;background:#555;color:#fff;font:700 11px/1 system-ui;white-space:nowrap}
#a11y-email-report .a11y-status-pill.ok{background:#087f23}
#a11y-email-report .a11y-status-pill.warn{background:#b00020}
#a11y-email-report .a11y-status-pill.info{background:#0057d9;color:#fff}
#a11y-email-report .a11y-large-size-pill{background:#0057d9 !important;color:#fff !important}
#a11y-email-report .a11y-large-prompt{color:#0057d9;font-weight:500}
#a11y-email-report .a11y-report-linkname{color:#0b5e20 !important;text-decoration:underline !important;font-weight:400 !important}
.a11y-inline-badge{position:absolute;inset:0 auto auto 0;z-index:10;pointer-events:none;display:inline-flex;align-items:flex-start;justify-content:flex-start;gap:4px;background:#0057d9;color:#fff;padding:2px 6px;font:600 12px/1.2 system-ui;border-radius:3px;box-shadow:0 0 0 1px rgba(0,0,0,.15);max-width:calc(100vw - 24px);white-space:nowrap}
.a11y-highlight{outline:3px dotted #0057d9 !important;outline-offset:2px !important;position:relative}
.a11y-highlight-ok{outline:3px solid #087f23 !important;outline-offset:2px !important;position:relative}
.a11y-focus{outline:3px dashed #0057d9 !important;outline-offset:2px !important}
#a11y-email-tabstops-svg{position:absolute;inset:0;overflow:visible;z-index:10000;pointer-events:none;margin:0}
#a11y-email-tabstops-svg .line{stroke:#0057d9;stroke-width:4px}
#a11y-email-tabstops-svg rect{fill:#0057d9;stroke:#0057d9;stroke-width:1px}
#a11y-email-tabstops-svg text{fill:#fff;font-size:10px;font-weight:700}
#a11y-email-tabstops-svg rect.-js-focused{fill:#0057d9 !important}
.a11y-textspacing, .a11y-textspacing *{line-height:1.5 !important;letter-spacing:0.12em !important;word-spacing:0.16em !important}
font-family:inherit !important;font-size:inherit !important;font-weight:inherit;font-style:inherit}
.a11y-textspacing p,.a11y-textspacing li,.a11y-textspacing td,.a11y-textspacing th,.a11y-textspacing a,.a11y-textspacing span,.a11y-textspacing div{word-break:normal;overflow-wrap:anywhere}
.a11y-table-linearise table{display:block !important;width:var(--a11y-linearise-width, auto) !important;max-width:100% !important;box-sizing:border-box}.a11y-table-linearise tbody,.a11y-table-linearise tr,.a11y-table-linearise table,.a11y-table-linearise td,.a11y-table-linearise th{display:block !important;width:100% !important;box-sizing:border-box;text-align:left !important;clear:both !important}
.a11y-table-linearise .a11y-preserve-hidden{display:none !important}
.a11y-table-linearise [hidden],.a11y-table-linearise [aria-hidden="true"]{display:none !important}
.a11y-table-linearise td,.a11y-table-linearise th{border-left:0 !important;border-right:0 !important}
.a11y-table-linearise table{margin-bottom:12px}
.a11y-table-linearise tr{padding:4px 0}
.a11y-table-linearise td,.a11y-table-linearise th{padding:4px 6px}
.a11y-heading-highlight{position:relative;outline-offset:2px !important;outline:3px solid #087f23 !important}
.a11y-heading-highlight::after{content:attr(data-a11y-heading-label);position:absolute;top:0;right:0;transform:translate(4px,-50%);background:#087f23;color:#fff;padding:2px 6px;border-radius:999px;font:700 11px/1 system-ui;box-shadow:0 0 0 1px rgba(0,0,0,.15);pointer-events:none;z-index:2;white-space:nowrap}
.a11y-heading-issue{outline-style:dashed !important;outline-color:#c00000 !important}
.a11y-heading-issue::after{background:#c00000}
.a11y-heading-alt{outline-style:solid !important;outline-color:#087f23 !important}
.a11y-heading-flag{display:inline-flex;align-items:center;justify-content:center;min-width:2.4em;padding:2px 6px;border-radius:999px;background:#087f23;color:#fff;font:700 11px/1 system-ui;white-space:nowrap;flex:none}
.a11y-heading-row{display:flex;align-items:flex-start;gap:8px;margin:0 0 6px}
.a11y-heading-copy{min-width:0;flex:1}
.a11y-heading-issue-text{color:#b00020;font-weight:600}
.a11y-large-text-highlight{position:relative;outline:3px dashed #0057d9 !important;outline-offset:2px !important}
.a11y-large-text-highlight::before{content:attr(data-a11y-large-text-label);position:absolute;top:0;right:0;transform:translate(4px,-50%);background:#0057d9;color:#fff;padding:2px 6px;border-radius:999px;font:700 11px/1 system-ui;box-shadow:0 0 0 1px rgba(0,0,0,.15);pointer-events:none;z-index:2;white-space:nowrap}
.a11y-large-text-issue{outline-style:dashed !important;outline-color:#0057d9 !important}
.a11y-table-highlight{position:relative;outline:1px solid #087f23 !important;outline-offset:2px !important}
.a11y-table-highlight::before{content:attr(data-a11y-table-label);position:absolute;top:0;right:0;transform:translate(4px,-50%);background:#087f23;color:#fff;padding:2px 6px;border-radius:999px;font:700 11px/1 system-ui;box-shadow:0 0 0 1px rgba(0,0,0,.15);pointer-events:none;z-index:2;white-space:nowrap}
.a11y-table-issue{outline-style:dotted !important;outline-color:#c00000 !important}
.a11y-table-possible-list{outline:3px dashed #0057d9 !important;outline-offset:2px !important}
.a11y-table-row-issue, .a11y-table-body-issue{outline:2px dotted #c00000 !important;outline-offset:2px !important}
.a11y-image-present{outline:3px solid #087f23 !important;outline-offset:2px !important}
.a11y-image-empty{outline:3px dashed #0057d9 !important;outline-offset:2px !important}
.a11y-image-missing{outline:3px dotted #c00000 !important;outline-offset:2px !important}
.a11y-link-ok{outline:4px solid #087f23 !important;outline-offset:2px !important}
.a11y-link-focus{outline:4px dashed #0057d9 !important;outline-offset:2px !important}
.a11y-link-issue{outline:4px dotted #c00000 !important;outline-offset:2px !important;display:inline-block;position:relative}
.a11y-link-image-wrap{display:inline-block;position:relative}
.a11y-link-ok img,.a11y-link-highlight img{outline:2px solid #087f23 !important;outline-offset:2px !important}
.a11y-link-issue img{outline:2px dotted #c00000 !important;outline-offset:2px !important}
.a11y-link-focus img{outline:2px dashed #0057d9 !important;outline-offset:2px !important}
.a11y-link-image-label{position:relative;display:inline-block}
.a11y-link-image-label::before{box-sizing:border-box;content:attr(data-a11y-link-label);color:#fff;background-color:#0057d9;text-shadow:0 0 1px #000;z-index:2;align-items:flex-start;justify-content:flex-start;width:max-content;min-height:100%;padding:2px 6px;font:500 14px/1.3 sans-serif;display:flex;position:absolute;inset:0 0 auto auto;transform:translate(4px,-50%)}
[data-textlink]{--a-outline-color:#c00000;--a-outline-width:4px;--a-outline-style:dotted;--a-outline-offset:2px;display:inline-block;position:relative}
[data-textlink]:after{box-sizing:border-box;content:attr(data-textlink);color:#fff;background-color:#c00000;text-shadow:0 0 1px #000;z-index:1;align-items:center;width:max-content;min-height:100%;margin-left:8px;padding:2px 6px;font:500 14px/1.3 sans-serif;display:flex;position:absolute;inset:0 -100% auto 100%}
.a11y-possible-list-highlight{outline:3px dashed #0057d9 !important;outline-offset:2px !important}
.a11y-possible-list-highlight::before{content:'Possible visual list';position:absolute;top:0;right:0;transform:translate(4px,-50%);background:#0057d9;color:#fff;padding:2px 6px;border-radius:999px;font:700 11px/1 system-ui;box-shadow:0 0 0 1px rgba(0,0,0,.15);pointer-events:none;z-index:2;white-space:nowrap}
.a11y-tabindex-issue{outline:2px dotted #c00000 !important;outline-offset:2px !important;position:relative}
[data-text]:not(.a11y-heading-highlight):not(.a11y-image-empty){display:inline-block;position:relative;outline:2px dotted #c00000 !important;outline-offset:2px !important}
[data-text]:not(.a11y-heading-highlight):not(.a11y-image-empty)::after{box-sizing:border-box;content:attr(data-text);color:#fff;background-color:#c00000;text-shadow:0 0 1px #000;z-index:1;align-items:center;width:max-content;min-height:100%;margin-left:8px;padding:2px 6px;font:500 14px/1.3 sans-serif;display:flex;position:absolute;inset:0 -100% auto 100%}
.a11y-image-empty[data-text]{outline:2px dashed #0057d9 !important;outline-offset:2px !important;position:relative}
.a11y-image-empty[data-text]::after{background-color:#0057d9 !important}
`;
})();




(() => {
const root = window.A11Y_EMAIL;

root.injectStyles = (css) => {
	const id = root.ids.styles;
	let style = document.getElementById(id);
	if (style) return style;
	style = document.createElement('style');
	style.id = id;
	style.textContent = css;
	root.ensureHead().appendChild(style);
	return style;
};

root.toggleReport = (html) => {
	let out = document.getElementById(root.ids.report);
	if (!out) {
	out = document.createElement('output');
	out.id = root.ids.report;
	out.className = 'a11y-report';
	out.setAttribute('role', 'region');
	out.setAttribute('aria-label', 'Accessibility report');
	const panel = document.getElementById('a11y-email-console-ui');
	if (panel) {
		panel.appendChild(out);
	} else {
		root.ensureBody().prepend(out);
	}
	}
	out.innerHTML = html;
	return out;
};

root.ensureGeometryOverlay = () => {
	let overlay = document.getElementById(root.ids.overlay);
	if (overlay) return overlay;
	overlay = document.createElement('div');
	overlay.id = root.ids.overlay;
	overlay.setAttribute('aria-hidden', 'true');
	Object.assign(overlay.style, {
	position: 'fixed',
	inset: '0',
	pointerEvents: 'none',
	zIndex: '2147483646',
	overflow: 'visible'
	});
	document.documentElement.appendChild(overlay);
	return overlay;
};

root.makeGeometryBadge = (text, theme = 'blue') => {
	const badge = document.createElement('span');
	badge.className = `a11y-geometry-badge a11y-theme-${theme}`;
	badge.textContent = text;
	return badge;
};

root.positionGeometryBadge = (badge, target, corner = 'top-right', dx = 4, dy = 0) => {
	const rect = target.getBoundingClientRect();
	let left = rect.right + dx;
	let top = rect.top + dy;

	if (corner === 'top-left') {
	left = rect.left + dx;
	top = rect.top + dy;
	} else if (corner === 'top-right-inside') {
	left = Math.max(0, rect.right - dx);
	top = rect.top + dy;
	badge.style.transform = 'translate(-100%, 0)';
	} else if (corner === 'mid-right') {
	left = rect.right + dx;
	top = rect.top + (rect.height / 2) + dy;
	badge.style.transform = 'translate(0, -50%)';
	}

	badge.style.left = `${Math.round(left)}px`;
	badge.style.top = `${Math.round(top)}px`;
};

root.renderGeometryOverlay = () => {
	root.removeById(root.ids.overlay);
	const overlay = root.ensureGeometryOverlay();
	const handled = new WeakMap();

	const add = (el, text, theme, corner = 'top-right', dx = 4, dy = 0) => {
	if (!(el instanceof Element) || !root.visible(el) || !text) return;
	const existing = handled.get(el) || new Set();
	const key = `${theme}|${corner}|${text}`;
	if (existing.has(key)) return;
	existing.add(key);
	handled.set(el, existing);
	const badge = root.makeGeometryBadge(text, theme);
	root.positionGeometryBadge(badge, el, corner, dx, dy);
	overlay.appendChild(badge);
	};

	Array.from(document.querySelectorAll('[data-a11y-heading="true"]')).forEach((el) => {
	const issue = el.classList.contains('a11y-heading-issue');
	add(el, el.dataset.a11yHeadingLabel || 'H', issue ? 'red' : 'green', 'top-right-inside', 2, 0);
	if (el.dataset.text) {
		add(el, el.dataset.text, 'red', 'mid-right', 8, 0);
	}
	});

	Array.from(document.querySelectorAll('[data-a11y-large-text="true"]')).forEach((el) => {
	add(el, el.dataset.a11yLargeTextLabel || '', 'blue', 'top-right-inside', 2, 0);
	});

	Array.from(document.querySelectorAll('[data-a11y-link="true"]')).forEach((el) => {
	const label = el.dataset.a11yLinkLabel || '';
	const issue = el.getAttribute('data-textlink') || '';
	if (label) add(el, label, el.classList.contains('a11y-link-image-missing') ? 'red' : 'green', 'top-right', 4, 0);
	if (issue) add(el, issue, 'red', 'mid-right', 8, 0);
	});

	Array.from(document.querySelectorAll('[data-a11y-image="true"]')).forEach((el) => {
	const status = el.dataset.a11yImageStatus || 'present';
	const label = el.dataset.a11yImageLabel || '';
	const theme = status === 'missing' ? 'red' : (status === 'empty' ? 'blue' : 'green');
	if (label) add(el, label, theme, 'top-left', 0, 0);
	});

	Array.from(document.querySelectorAll('[data-a11y-table="true"]')).forEach((el) => {
	const label = el.dataset.a11yTableLabel || '';
	const theme = el.dataset.a11yTableStatus === 'issue' ? 'red' : (el.classList.contains('a11y-table-possible-list') ? 'blue' : 'green');
	if (label) add(el, label, theme, 'top-right-inside', 2, 0);
	if (el.dataset.text) add(el, el.dataset.text, 'red', 'mid-right', 8, 0);
	});

	Array.from(document.querySelectorAll('[data-text]:not([data-a11y-image]):not([data-a11y-table]):not([data-a11y-heading])')).forEach((el) => {
	add(el, el.getAttribute('data-text') || '', el.classList.contains('a11y-image-empty') ? 'blue' : 'red', 'mid-right', 8, 0);
	});
};

if (!window.__a11yGeometryOverlayHandlers) {
	const rerender = () => {
	if (document.getElementById(root.ids.overlay)) {
		root.renderGeometryOverlay();
	}
	};
	window.addEventListener('scroll', rerender, true);
	window.addEventListener('resize', rerender, true);
	window.__a11yGeometryOverlayHandlers = true;
}

root.reportShellCss = `
#a11y-email-report{font:400 14px/1.5 system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:#222;background:transparent;border:0;margin:0;padding:0;display:block;max-width:100%;box-sizing:border-box}
#a11y-email-report h2{font:600 18px/1.3 system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;margin:0 0 8px}
#a11y-email-report h3{font:600 15px/1.3 system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;margin:12px 0 6px}
#a11y-email-report ol,#a11y-email-report ul{margin:8px 0 0 20px;padding:0}
#a11y-email-report li{margin:4px 0}
#a11y-email-report code,#a11y-email-report kbd{background:#fff;border:1px solid #ccc;border-radius:4px;padding:0 .3em}
#a11y-email-report .warn{color:#c00000;font-weight:600}
#a11y-email-report .ok{color:#087f23;font-weight:600}
#a11y-email-report .muted{color:#555}
#a11y-email-report .a11y-status-pill{display:inline-flex;align-items:center;justify-content:center;min-width:2.4em;padding:2px 8px;border-radius:999px;background:#666;color:#fff;font:700 12px/1 system-ui;white-space:nowrap;flex:none}
#a11y-email-report .a11y-status-pill.info,#a11y-email-report .a11y-large-size-pill{background:#0057d9 !important;color:#fff !important}
#a11y-email-report .a11y-large-prompt{color:#0057d9;font-weight:500}
#a11y-email-report .a11y-report-linkname{color:#0b5e20 !important;text-decoration:underline !important;font-weight:400 !important}
.a11y-section{margin:0 0 16px}
.a11y-heading-row{display:flex;align-items:flex-start;gap:8px}
.a11y-heading-flag{display:inline-flex;align-items:center;justify-content:center;min-width:32px;padding:2px 8px;border-radius:999px;background:#087f23;color:#fff;font:700 12px/1 system-ui}
.a11y-heading-copy{display:inline-block}
.a11y-annotation-prefix{font-weight:400}
.a11y-annotation-quote{font-weight:700}
.a11y-annotation-note{color:#c00000;font-weight:700}
.a11y-compact-list{margin-left:20px}
.a11y-geometry-badge{position:fixed;pointer-events:none;display:inline-flex;align-items:flex-start;justify-content:flex-start;padding:2px 6px;font:600 12px/1.2 system-ui;border-radius:3px;box-shadow:0 0 0 1px rgba(0,0,0,.15);max-width:min(360px, calc(100vw - 16px));white-space:normal;word-break:break-word}
.a11y-theme-blue{background:#0057d9;color:#fff}
.a11y-theme-red{background:#c00000;color:#fff}
.a11y-theme-green{background:#087f23;color:#fff}
.a11y-heading-highlight{outline:2px solid #087f23 !important;outline-offset:2px !important}
.a11y-heading-issue{outline:2px dotted #c00000 !important}
.a11y-large-text-highlight{outline:2px dashed #0057d9 !important;outline-offset:2px !important}
.a11y-table-highlight{outline:1px solid #b7efc5 !important;outline-offset:2px !important}
.a11y-table-issue{outline:2px dotted #c00000 !important}
.a11y-table-possible-list{outline:2px dashed #0057d9 !important}
.a11y-link-highlight{outline:2px solid #087f23 !important;outline-offset:2px !important}
.a11y-link-issue{outline:2px dotted #c00000 !important}
.a11y-link-focus{outline:2px dashed #0057d9 !important}
.a11y-image-present{outline:2px solid #087f23 !important;outline-offset:2px !important}
.a11y-image-empty{outline:2px dashed #0057d9 !important;outline-offset:2px !important}
.a11y-image-missing{outline:2px dotted #c00000 !important;outline-offset:2px !important}
#a11y-email-tabstops-svg{--bg-color:yellow;--focus-color:#0057d9}
#a11y-email-tabstops-svg .line{stroke:var(--bg-color);stroke-width:4px}
#a11y-email-tabstops-svg rect{fill:var(--bg-color);stroke:#000;stroke-width:1px}
#a11y-email-tabstops-svg text{fill:#000;font-size:10px;font-weight:700}
#a11y-email-tabstops-svg rect.-js-focused{fill:var(--focus-color) !important}
body.a11y-table-linearise table{width:var(--a11y-linearise-width, auto) !important;max-width:100% !important;box-sizing:border-box}body.a11y-table-linearise table:not([role=main]){width:var(--a11y-linearise-width, auto) !important;max-width:var(--a11y-linearise-width, auto) !important;margin-left:auto !important;margin-right:auto !important;box-sizing:border-box}body.a11y-table-linearise table:not([role=main]),body.a11y-table-linearise table:not([role=main]) tbody,body.a11y-table-linearise table:not([role=main]) thead,body.a11y-table-linearise table:not([role=main]) tfoot,body.a11y-table-linearise table:not([role=main]) tr{display:block !important;width:100% !important;box-sizing:border-box}body.a11y-table-linearise table:not([role=main]) :is(table,th,td){display:block !important;text-align:left !important;outline:1px solid #0f0 !important;clear:both !important;margin-left:0 !important;padding-left:0 !important;width:100% !important;box-sizing:border-box}body.a11y-table-linearise .a11y-preserve-hidden{display:none !important}
body.a11y-table-linearise table:not([role=main]) tr{margin:0 0 8px !important}
body.a11y-table-linearise [hidden],body.a11y-table-linearise [aria-hidden="true"],body.a11y-table-linearise [style*="display:none"],body.a11y-table-linearise [style*="display: none"]{display:none !important}
`;
})();




(() => {
const root = window.A11Y_EMAIL;

const decodeEntities = (value) => {
	const area = document.createElement('textarea');
	area.innerHTML = String(value || '');
	return area.value;
};

const getWholeDocumentMarkup = () => {
	try {
	return document.documentElement ? document.documentElement.outerHTML || '' : '';
	} catch (error) {
	return '';
	}
};

const extractRoundrectOpenTags = (html) => {
	const source = decodeEntities(String(html || ''));
	return source.match(/<v:roundrect\b[^>]*>/gi) || [];
};

const getAltStateFromTag = (tagText) => {
	const match = String(tagText || '').match(/\balt\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s>]+))/i);
	if (!match) return 'missing';
	const value = decodeEntities(match[1] != null ? match[1] : (match[2] != null ? match[2] : match[3] || ''));
	return value === '' ? 'empty' : 'present';
};

const scanMarkupForOutlook = () => {
	const html = getWholeDocumentMarkup();
	const tags = extractRoundrectOpenTags(html);
	if (!tags.length) {
	return { foundRoundrect: false, missingAlt: false, tagsChecked: 0 };
	}

	let missingAlt = false;
	for (const tag of tags) {
	const altState = getAltStateFromTag(tag);
	if (altState !== 'empty') {
		missingAlt = true;
	}
	}

	return { foundRoundrect: true, missingAlt, tagsChecked: tags.length };
};

const isAcceptableLabel = (value) => {
	const label = String(value || '').trim().toLowerCase();
	return label === 'santander' || label === 'santander email';
};

const visibleContentNodes = () => Array.from(document.body ? document.body.querySelectorAll('*') : [])
	.filter((el) => root.visible(el))
	.filter((el) => !root.isInternalElement(el))
	.filter((el) => !el.closest('#a11y-email-tabstops-svg'))
	.filter((el) => !el.closest('#a11y-email-console-ui'));

const outerVisibleTable = () => {
	const tables = Array.from(document.querySelectorAll('table')).filter(root.visible);
	if (!tables.length) return null;
	return tables.find((table) => !tables.some((other) => other !== table && other.contains(table))) || tables[0];
};

root.checkEmailMeta = () => {
	const findings = [];
	const candidates = Array.from(document.querySelectorAll('main, [role="main"]')).filter(root.visible);
	const validMain = candidates.find((el) =>
	(el.getAttribute('role') || '').toLowerCase() === 'main' &&
	(el.getAttribute('dir') || '').toLowerCase() === 'ltr' &&
	isAcceptableLabel(el.getAttribute('aria-label'))
	);
	const fallbackTable = outerVisibleTable();
	const container = validMain || fallbackTable || candidates[0] || document.body;

	const visibleNodes = Array.from(document.body.querySelectorAll('*')).filter(root.isMeaningfulVisibleContent).filter((el) => {
	if (el.closest(`#${root.ids.panel}`)) return false;
	if (el instanceof HTMLImageElement) {
		const w = Number(el.getAttribute('width') || 0);
		const h = Number(el.getAttribute('height') || 0);
		if ((w <= 1 && h <= 1) || /tracking|open/i.test(el.getAttribute('alt') || '')) return false;
	}
	return true;
	});
	const outsideNodes = visibleNodes.filter((el) => el !== container && !container.contains(el));

	const checks = [
	['role', (container.getAttribute('role') || '').toLowerCase() === 'main', 'Expected role="main" on a single enclosing content container'],
	['dir', (container.getAttribute('dir') || '').toLowerCase() === 'ltr', 'Expected dir="ltr" on the same content container'],
	['aria-label', isAcceptableLabel(container.getAttribute('aria-label')), 'Expected aria-label="Santander" or aria-label="Santander email" on the same content container'],
	['encloses', outsideNodes.length === 0, outsideNodes.length === 0 ? 'OK' : 'Expected visible email content to sit within that same single content container'],
	['lang', (container.getAttribute('lang') || '').toLowerCase() === 'en-gb', 'Suggestion: add lang="en-gb" to the same content container']
	];

	for (const [key, pass, message] of checks) {
	if (!pass && key !== 'lang') findings.push({ key, issue: message, el: container });
	}

	const outlookScan = scanMarkupForOutlook();
	const outlookIssue = outlookScan.foundRoundrect && outlookScan.missingAlt;
	if (outlookIssue) {
	findings.push({
		key: 'outlook-roundrect',
		issue: 'Email contains a hidden Outlook v:roundrect image component which is missing an alt text. Please report to the developers to repair.',
		el: container
	});
	}

	const html = root.makeSection('Email container rules', `
	<p>Checks for a single enclosing HTML email container.</p>
	<ul>
		${checks.map(([, pass, msg]) => `<li>${pass ? '<span class="ok">OK</span>' : '<span class="warn">Issue</span>'} - ${root.escapeHtml(msg)}</li>`).join('')}
		<li>${outlookIssue ? '<span class="warn">Issue</span> - Email contains a hidden Outlook v:roundrect image component which is missing an alt text. Please report to the developers to repair.' : '<span class="ok">OK</span> - No hidden Outlook v:roundrect image component issue found.'}</li>
	</ul>
	<p class="muted">- Container inspected: <code>${root.escapeHtml(container.tagName.toLowerCase())}</code></p>
	`);

	return { findings, html };
};
})();




(() => {
const root = window.A11Y_EMAIL;
const headingSelector = ':is(h1,h2,h3,h4,h5,h6,[role="heading"])';
const candidateSelector = 'body *';

const directText = (el) => root.getDirectText(el);

const qualifies = (el, baseFontSize) => {
	if (!(el instanceof HTMLElement)) return false;
	if (!root.visible(el)) return false;
	if (el.closest('a[href]')) return false;
	if (el.closest(headingSelector)) return false;
	if (el.closest(`#${root.ids.report}, #${root.ids.svg}, #${root.ids.imageOverlay}`)) return false;
	const text = directText(el);
	if (!text) return false;
	return root.getFontSize(el) > baseFontSize + 0.1;
};

root.checkLargeText = (baseFontSize = 16) => {
	root.clearLargeTextAnnotations();
	const candidates = Array.from(document.querySelectorAll(candidateSelector)).filter((el) => qualifies(el, baseFontSize));
	const findings = [];

	for (const el of candidates) {
	const fontSize = root.getFontSize(el);
	const parent = el.parentElement;
	if (parent && parent instanceof HTMLElement && qualifies(parent, baseFontSize) && root.getFontSize(parent) >= fontSize) {
		continue;
	}

	const text = directText(el);
	if (!text) continue;

	el.dataset.a11yLargeText = 'true';
	el.dataset.a11yLargeTextLabel = `${Math.round(fontSize)}px`;
	el.dataset.a11yLargeTextSize = String(Math.round(fontSize));
	el.classList.add('a11y-large-text-highlight');

	findings.push({
		el,
		text,
		fontSize: Math.round(fontSize),
		issue: `Text is larger than the base font size (${baseFontSize}px) and is not marked as a heading`
	});
	}

	const html = root.makeSection('Large text', `
	<p>Please review the large text outlined in dashed blue and consider whether it should be marked up as a heading.</p>
	<p>A heading should introduce the content that follows, so it’s perfectly fine for some text to remain styled as large text rather than being treated as a heading.</p>
	<p>${findings.length ? 'Large text detected.' : 'No large text detected.'}</p>
	`);

	return { findings, html };
};
})();




(() => {
const root = window.A11Y_EMAIL;

const getLevel = (el) => {
	const aria = el.getAttribute('aria-level');
	if (aria) {
	const parsed = parseInt(aria, 10);
	if (!Number.isNaN(parsed) && parsed >= 1 && parsed <= 6) return parsed;
	}
	const match = el.tagName.match(/^H([1-6])$/i);
	return match ? parseInt(match[1], 10) : 6;
};

const getHeadingText = (el) => {
	const text = (el.textContent || '').trim();
	const img = el.querySelector('img');
	const altAttr = img ? img.getAttribute('alt') : null;
	const alt = altAttr === null ? null : altAttr.trim();
	return { text, img, alt, altAttr };
};

const docOrder = (a, b) => {
	if (!a || !b || a === b) return 0;
	const pos = a.compareDocumentPosition(b);
	if (pos & Node.DOCUMENT_POSITION_FOLLOWING) return -1;
	if (pos & Node.DOCUMENT_POSITION_PRECEDING) return 1;
	return 0;
};

root.checkHeadings = (options = {}) => {
	const selector = ':is(h1,h2,h3,h4,h5,h6,[role="heading"])';
	const headings = Array.from(document.querySelectorAll(selector)).filter(root.visible);
	const findings = [];
	const largeTextFindings = Array.isArray(options.largeTextFindings) ? options.largeTextFindings : [];
	const visibleH1s = headings.filter((el) => getLevel(el) === 1);
	let previous = 0;
	let h1Count = 0;
	let order = 0;

	root.clearHeadingAnnotations();

	for (const el of headings) {
	const level = getLevel(el);
	const { text, img, alt, altAttr } = getHeadingText(el);
	const fromAlt = Boolean(img && !text && alt);
	const missingAlt = Boolean(img && !text && altAttr === null);
	const emptyAlt = Boolean(img && !text && altAttr !== null && alt === '');
	let issue = '';
	const labelText = `H${level}`;
	let displayText = text;

	order += 1;
	el.dataset.a11yHeading = 'true';
	el.dataset.a11yHeadingLevel = String(level);
	el.dataset.a11yHeadingOrder = String(order);
	el.dataset.a11yHeadingLabel = labelText;
	el.classList.add('a11y-heading-highlight');

	if (fromAlt) {
		displayText = alt;
		el.dataset.a11yHeadingAlt = 'true';
		el.dataset.a11yHeadingKind = 'alt';
		el.classList.add('a11y-heading-alt');
	} else if (missingAlt) {
		issue = 'MISSING alt text';
	} else if (emptyAlt) {
		issue = 'Empty alt text';
	}

	if (!text && !fromAlt && !img) issue = issue || `Empty H${level} heading`;
	if (level === 1) {
		h1Count += 1;
		if (visibleH1s.length > 1 && h1Count > 1) {
		issue = issue ? `${issue} Only one H1 heading is allowed.` : 'Only one H1 heading is allowed.';
		}
	}
	if (previous && level > previous + 1) issue = issue ? `${issue} Should be a H${previous + 1}, or lower, but it's a H${level}` : `Should be a H${previous + 1}, or lower, but it's a H${level}`;

	if (issue) {
		el.setAttribute('data-text', issue);
		el.classList.add('a11y-heading-issue');
	}

	findings.push({ level, text: displayText || (alt ?? '') || '(empty)', issue, el, order, fromAlt, missingAlt, emptyAlt, type: 'heading' });
	previous = level;
	}

	if (!document.querySelector('h1, [role="heading"][aria-level="1"]')) {
	findings.unshift({ level: 1, text: 'MISSING H1', issue: 'A H1 heading is a requirement', synthetic: true, order: 0, fromAlt: false, type: 'heading' });
	}

	const merged = [];
	for (const f of findings) merged.push(f);
	for (const f of largeTextFindings) merged.push({ ...f, type: 'largeText' });
	merged.sort((a, b) => {
	if (a.synthetic && !b.synthetic) return -1;
	if (!a.synthetic && b.synthetic) return 1;
	if (!a.el || !b.el) return 0;
	return docOrder(a.el, b.el);
	});

	let currentLevel = 1;
	const rows = merged.map((f) => {
	if (f.type === 'largeText') {
		const indent = Math.max(0, currentLevel * 18);
		return `<li class="a11y-heading-row a11y-large-row" style="margin-left:${indent}px"><span class="a11y-status-pill info a11y-large-size-pill">${root.escapeHtml(String(f.fontSize))}px</span><span class="a11y-heading-copy a11y-large-copy">${root.escapeHtml(f.text)} <span class="a11y-large-prompt">- Is this a heading?</span></span></li>`;
	}

	currentLevel = Number(f.level) || currentLevel;
	const indent = Math.max(0, (currentLevel - 1) * 18);
	const chip = `<span class="a11y-heading-flag">${root.escapeHtml(`H${currentLevel}`)}</span>`;
	if (f.fromAlt) {
		const issueMarkup = f.issue ? ` <strong class="a11y-annotation-note">- ${root.escapeHtml(f.issue)}</strong>` : '';
		return `<li class="a11y-heading-row" style="margin-left:${indent}px">${chip}<span class="a11y-heading-copy"><span class="a11y-annotation-prefix">alt=</span> <strong class="a11y-annotation-quote">&quot;${root.escapeHtml(f.text)}&quot;</strong>${issueMarkup}</span></li>`;
	}
	if (f.emptyAlt) {
		return `<li class="a11y-heading-row" style="margin-left:${indent}px">${chip}<span class="a11y-heading-copy"><strong class="a11y-annotation-note">- Empty alt text</strong></span></li>`;
	}
	if (f.missingAlt) {
		return `<li class="a11y-heading-row" style="margin-left:${indent}px">${chip}<span class="a11y-heading-copy"><strong class="a11y-annotation-note">- MISSING alt text</strong></span></li>`;
	}
	const issueMarkup = f.issue ? ` <strong class="a11y-annotation-note">- ${root.escapeHtml(f.issue)}</strong>` : '';
	return `<li class="a11y-heading-row" style="margin-left:${indent}px">${chip}<span class="a11y-heading-copy"><strong>${root.escapeHtml(f.text)}</strong>${issueMarkup}</span></li>`;
	}).join('');

	const html = root.makeSection('Headings and large text', `
	<p><strong>Check:</strong> heading structure, empty headings, H1 usage, heading order, headings made from image alt text, and non-heading large text.</p>
	<ol>
		<li>Is there a single main <code>H1</code> heading at the top of the page?</li>
		<li>Are headings arranged in a logical order from H1 to H6?</li>
		<li>Do all headings clearly describe the content that follows?</li>
		<li>Have all empty headings been removed?</li>
		<li>Please review the large text outlined in dashed blue and consider whether it should be marked up as a heading.</li>
	</ol>
	<p>Please review the large text outlined in dashed blue and consider whether it should be marked up as a heading.</p>
	<p>A heading should introduce the content that follows, so it’s perfectly fine for some text to remain styled as large text rather than being treated as a heading.</p>
	<ol class="a11y-compact-list">${rows}</ol>
	`);

	return { findings, html };
};
})();




(() => {
const root = window.A11Y_EMAIL;

const normalize = (value) => String(value || '').replace(/\s+/g, ' ').trim();

const getVisibleText = (node) => {
	if (!node) return '';
	if (node.nodeType === Node.TEXT_NODE) return normalize(node.textContent || '');
	if (node.nodeType !== Node.ELEMENT_NODE) return '';
	const el = node;
	if (!root.visible(el)) return '';
	if (el.matches('img,svg,script,style,noscript')) return '';
	const parts = [];
	for (const child of Array.from(el.childNodes)) {
	const text = getVisibleText(child);
	if (text) parts.push(text);
	}
	return normalize(parts.join(' '));
};

const getLinkInfo = (link) => {
	const img = link.querySelector('img');
	const visibleText = getVisibleText(link);
	const altAttr = img ? img.getAttribute('alt') : null;
	const alt = altAttr === null ? null : normalize(altAttr);
	const hasImage = Boolean(img);
	const hasImageAlt = alt !== null && alt !== '';
	const imageAltMissing = hasImage && !hasImageAlt;
	const ariaLabel = normalize(link.getAttribute('aria-label') || '');
	const accessibleName = ariaLabel || visibleText || (hasImageAlt ? alt : '');

	return {
	img,
	visibleText,
	alt,
	hasImage,
	hasImageAlt,
	imageAltMissing,
	accessibleName
	};
};

const sameTextDifferentHref = (allLinks, current, text, href) => {
	if (!text || !href) return false;
	for (const other of allLinks) {
	if (other === current) continue;
	const otherHref = normalize(other.getAttribute('href') || '');
	if (!otherHref) continue;
	const otherText = normalize(other.dataset.a11yLinkName || '');
	if (otherText && otherText === text && otherHref !== href) return true;
	}
	return false;
};

const isGeneric = (text) => {
	const value = normalize(text).toLowerCase();
	return ['see all', 'see more', 'view all', 'view more', 'read more', 'more', 'click here', 'here', 'find out more'].includes(value);
};

const isDocumentLink = (link) => {
	const href = link.href || '';
	if (href.startsWith('javascript:')) return false;
	return ['.pdf', '.xlsx', '.docx', '.pptx'].some((ext) => href.toLowerCase().includes(ext));
};

const fileExt = (href) => {
	try {
	const url = new URL(href);
	url.search = '';
	url.hash = '';
	const path = url.pathname.toLowerCase();
	const match = path.match(/\.([a-z0-9]+)$/i);
	return (match?.[1] || '').toLowerCase();
	} catch {
	return '';
	}
};

root.checkLinks = () => {
	root.clearLinkAnnotations();
	const links = Array.from(document.querySelectorAll('a'));
	const findings = [];
	const issueFlags = {
	missingHref: false,
	duplicate: false,
	imageAltMissing: false
	};

	for (const link of links) {
	if (!root.visible(link)) continue;

	const { img, alt, hasImage, hasImageAlt, imageAltMissing, accessibleName } = getLinkInfo(link);
	const hrefRaw = normalize(link.getAttribute('href') || '');
	const inTable = Boolean(link.closest('table'));
	const issueParts = [];

	link.dataset.a11yLink = 'true';
	link.dataset.a11yLinkName = accessibleName || '';
	link.classList.add('a11y-link-highlight');
	link.style.outlineOffset = '2px';

	if (hasImage) {
		link.dataset.a11yLinkLabel = hasImageAlt ? alt : 'Link image without alt text';
		link.classList.add('a11y-link-image-label', 'a11y-link-image-wrap');
		link.style.outlineOffset = '2px';
		link.style.display = 'inline-block';
		link.style.outline = '4px solid #087f23';
		if (img) {
		img.setAttribute('data-a11y-link-image', 'true');
		img.style.outline = '2px solid #087f23';
		img.style.outlineOffset = '2px';
		img.style.display = 'inline-block';
		}
		if (!hasImageAlt) link.classList.add('a11y-link-image-missing');
	}

	if (!hrefRaw) {
		issueParts.push('MISSING HREF');
		issueFlags.missingHref = true;
	}

	if (hasImage && imageAltMissing) {
		issueParts.push('Link image without alt text');
		issueFlags.imageAltMissing = true;
	}

	if (hrefRaw && !hasImageAlt && accessibleName && sameTextDifferentHref(links, link, accessibleName, hrefRaw)) {
		issueParts.push('Duplicated text with different destination');
		issueFlags.duplicate = true;
	}

	if (hrefRaw && accessibleName && isGeneric(accessibleName)) {
		issueParts.push('Link text is too generic');
	}

	if (hrefRaw && !inTable && (link.getAttribute('target') || '').toLowerCase() === '_blank') {
		const after = getComputedStyle(link, '::after').content;
		if (after === 'none') issueParts.push('Link should clearly indicate that it opens in a new window or tab');
	}

	if (hrefRaw && isDocumentLink(link)) {
		const ext = fileExt(link.href);
		if (ext && !normalize(accessibleName || '').toLowerCase().includes(ext)) {
		issueParts.push('Document link should include the file format and size');
		}
	}

	const issue = issueParts.join('. ').trim();
	if (issue) {
		link.setAttribute('data-textlink', issueParts[0] === 'MISSING HREF' && issueParts.length === 1 ? 'MISSING HREF' : issue);
		link.classList.add('a11y-link-issue');
		link.classList.remove('a11y-link-ok');
		if (hasImage) {
		link.style.outline = '4px dotted #c00000';
		if (img) img.style.outline = '2px dotted #c00000';
		}
	} else if (accessibleName) {
		link.classList.add('a11y-link-ok');
		link.style.outline = '4px solid #087f23';
		if (hasImage && img) img.style.outline = '2px solid #087f23';
	}

	if (!link.dataset.a11yLinkHandlers) {
		link.dataset.a11yLinkHandlers = 'true';
		link.addEventListener('focus', () => link.classList.add('a11y-link-focus'));
		link.addEventListener('blur', () => link.classList.remove('a11y-link-focus'));
	}

	const baseName = accessibleName || (hasImage && imageAltMissing ? 'Link image without alt text' : '(empty)');
	const reportName = baseName;

	findings.push({
		el: link,
		accessibleName: baseName,
		reportName,
		alt,
		href: hrefRaw,
		issue,
		hasImage: Boolean(img),
		hasImageAlt,
		imageAltMissing,
		issueParts
	});
	}

	const html = root.makeSection('Links', `
	<ol>
		<li>Can the link text be understood on its own, without relying on the content around it?</li>
		<li>Does the link text avoid general terms like "Find out more" or "Click here"?</li>
		<li>Does the link text accurately describe the destination it goes to?</li>
		<li>Do links using the same text go to the same destination?</li>
		<li>Do text links use more than just colour, to be distinguishable?</li>
	</ol>
	<p>All links are listed below by accessible name.</p>
	<ol class="a11y-compact-list">
		${findings.map((f) => {
		const name = root.escapeHtml(f.reportName || f.accessibleName);
		const primaryIssue = Array.isArray(f.issueParts) && f.issueParts.length ? f.issueParts[0] : '';
		const isWarn = ['MISSING HREF', 'Duplicated text with different destination', 'Link image without alt text'].includes(primaryIssue);
		const issueHtml = isWarn ? ` <strong class="warn">- ${root.escapeHtml(primaryIssue)}</strong>` : '';
		return `
			<li class="a11y-heading-row">
			<span class="a11y-heading-flag">LINK</span>
			<span class="a11y-heading-copy"><span class="a11y-report-linkname">${name}</span>${issueHtml}</span>
			</li>
		`;
		}).join('')}
	</ol>
	`);

	return { findings, html };
};
})();




(() => {
const root = window.A11Y_EMAIL;

root.renderImageOverlay = () => {};

root.checkImages = () => {
	const images = Array.from(document.querySelectorAll('img')).filter(root.visible);
	const findings = [];

	for (const img of images) {
	const role = (img.getAttribute('role') || '').toLowerCase();
	const altAttr = img.getAttribute('alt');
	const alt = altAttr === null ? null : altAttr.trim();
	const noneRole = role === 'presentation' || role === 'none';
	const status = noneRole ? 'none' : (alt === null ? 'missing' : (alt === '' ? 'empty' : 'present'));

	img.setAttribute('data-a11y-image', 'true');
	img.dataset.a11yImageStatus = status;
	img.classList.remove('a11y-image-present', 'a11y-image-empty', 'a11y-image-missing');
	img.removeAttribute('data-text');

	if (status === 'missing') {
		img.classList.add('a11y-image-missing');
		img.setAttribute('data-text', 'MISSING ALT TEXT');
		img.dataset.a11yImageLabel = 'MISSING ALT TEXT';
	} else if (status === 'empty') {
		img.classList.add('a11y-image-empty');
		img.setAttribute('data-text', 'Decorative');
		img.dataset.a11yImageLabel = 'Decorative';
	} else if (status === 'none') {
		img.classList.add('a11y-image-present');
		img.setAttribute('data-text', 'None');
		img.dataset.a11yImageLabel = 'None';
	} else {
		img.classList.add('a11y-image-present');
		img.dataset.a11yImageLabel = alt;
	}

	findings.push({
		el: img,
		alt,
		status,
		decorative: status === 'empty' || status === 'none',
		issue: status === 'missing' ? 'Image alt-text is missing' : ''
	});
	}

	const html = root.makeSection('Images and alt text', `
	<p>Please manually check all image alt texts are appropriate, and that decorative images do not add any extra meaning to the content.</p>
	<ul>
		<li><span class="a11y-key-swatch a11y-key-swatch-green"></span> Outline solid green + alt text - check the alt text is relevant.</li>
		<li><span class="a11y-key-swatch a11y-key-swatch-blue"></span> Outline dashed blue + &quot;Decorative&quot; - Check image does not add any further meaning to the content.</li>
		<li><span class="a11y-key-swatch a11y-key-swatch-green"></span> Outline solid green + &quot;None&quot; - Image has no role and empty alt text.</li>
		<li><span class="a11y-key-swatch a11y-key-swatch-red"></span> Outline dotted red + &quot;MISSING ALT TEXT&quot; - Image requires an alt text.</li>
	</ul>
	`);

	return { findings, html };
};
})();




(() => {
const root = window.A11Y_EMAIL;

root.checkTables = () => {
	const tables = Array.from(document.querySelectorAll('table')).filter(root.visible);
	const findings = [];

	root.clearTableAnnotations();

	for (const table of tables) {
	const role = (table.getAttribute('role') || '').toLowerCase();
	const hasRole = table.hasAttribute('role');
	let status = 'ok';
	let label = '';

	table.dataset.a11yTable = 'true';
	table.classList.remove('a11y-table-highlight', 'a11y-table-issue', 'a11y-table-possible-list');
	table.removeAttribute('data-text');

	if (!hasRole) {
		status = 'issue';
		label = 'MISSING ROLE';
		table.classList.add('a11y-table-issue');
			} else if (role === 'presentation' || role === 'none') {
		status = 'ok';
		label = '';
		table.classList.add('a11y-table-highlight');
	} else {
		status = 'info';
		label = role || 'role';
		table.classList.add('a11y-table-possible-list');
	}

	table.dataset.a11yTableStatus = status;
	if (label) table.dataset.a11yTableLabel = label; else table.removeAttribute('data-a11y-table-label');

	findings.push({ el: table, role, hasRole, status, hasIssues: status === 'issue' });
	}

	const missingRoles = findings.filter((f) => !f.hasRole).length;
	const unexpectedRoles = findings.filter((f) => f.hasRole && f.role && f.role !== 'presentation' && f.role !== 'none');
	const unexpectedRoleNames = Array.from(new Set(unexpectedRoles.map((f) => f.role))).join(', ');

	const bullets = [];
	bullets.push('Tables with light green solid outline are marked correctly as presentational.');
	bullets.push('Tables with red dotted outline do not have a role stated.');
	bullets.push('It is expected for the outermost table to have a role of "main".');
	if (missingRoles) bullets.push('Table(s) found with a MISSING ROLE.');
	if (unexpectedRoles.length) bullets.push(`Table(s) found with an unexpected role: ${unexpectedRoleNames}.`);
	if (!missingRoles && !unexpectedRoles.length) bullets.push('No issues found.');

	const html = root.makeSection('Tables', `
	<ul>${bullets.map((b) => `<li>${root.escapeHtml(b)}</li>`).join('')}</ul>
	`);

	return { findings, html };
};
})();




(() => {
const root = window.A11Y_EMAIL;

const textOf = (el) => (el.textContent || '').replace(/\s+/g, ' ').trim();
const visibleImgs = (el) => Array.from(el.querySelectorAll('img')).filter(root.visible);
const rowCells = (row) => Array.from(row.children).filter((node) => node.matches?.('td,th'));
const directRows = (table) => Array.from(table.children).flatMap((child) => {
	if (child.matches?.('tr')) return [child];
	if (child.matches?.('tbody,thead,tfoot')) return Array.from(child.children).filter((row) => row.matches?.('tr'));
	return [];
}).filter((row) => root.visible(row) && row.closest('table') === table);

const normalizeText = (value) => (value || '').replace(/\s+/g, ' ').replace(/\u00a0/g, ' ').trim();

const cellTextWithoutNestedTables = (cell) => {
	const clone = cell.cloneNode(true);
	clone.querySelectorAll('table').forEach((table) => table.remove());
	clone.querySelectorAll('img,svg,picture,source').forEach((node) => node.remove());
	return normalizeText(clone.textContent || '');
};

const cellVisibleImgsInSameTable = (cell, table) => Array.from(cell.querySelectorAll('img')).filter((img) => root.visible(img) && img.closest('table') === table);

const cellIsSpacer = (cell, table) => {
	const text = cellTextWithoutNestedTables(cell);
	const imgs = cellVisibleImgsInSameTable(cell, table);
	const style = `${cell.getAttribute('style') || ''} ${cell.style?.cssText || ''}`;
	const widthAttr = parseInt(cell.getAttribute('width') || '0', 10);
	const rect = typeof cell.getBoundingClientRect === 'function' ? cell.getBoundingClientRect() : { width: 0, height: 0 };
	const tinyWidth = (widthAttr > 0 && widthAttr <= 24) || (rect.width > 0 && rect.width <= 24);
	const spacerStyle = /font-size:\s*0|line-height:\s*0|height:\s*(?:0|10|15|20)px/i.test(style);
	return (!text && imgs.length === 0) || (tinyWidth && !text) || spacerStyle;
};

const classifyCell = (cell, table) => {
	const hasImage = cellVisibleImgsInSameTable(cell, table).length > 0;
	const hasText = Boolean(cellTextWithoutNestedTables(cell));
	const isSpacer = cellIsSpacer(cell, table);
	return { hasImage, hasText, hasContent: hasImage || hasText, isSpacer };
};

const nestedOwnedTable = (row, ownerTable) => {
	const candidates = Array.from(row.querySelectorAll('table')).filter((table) => table !== ownerTable && table.closest('table') === ownerTable);
	if (candidates.length !== 1) return null;
	const cellText = normalizeText(row.textContent || '');
	const candidateText = normalizeText(candidates[0].textContent || '');
	if (cellText && candidateText && cellText !== candidateText) return null;
	return candidates[0];
};

const classifyRowInTable = (row, table) => {
	const cells = rowCells(row);
	if (!cells.length) return 'spacer-row';

	const contentCells = cells
	.map((cell) => ({ cell, meta: classifyCell(cell, table) }))
	.filter((entry) => entry.meta.hasContent || !entry.meta.isSpacer);

	if (!contentCells.length || contentCells.every((entry) => entry.meta.isSpacer || !entry.meta.hasContent)) {
	return 'spacer-row';
	}

	const meaningfulCells = contentCells.filter((entry) => entry.meta.hasContent && !entry.meta.isSpacer);
	if (meaningfulCells.length >= 2) {
	const first = meaningfulCells[0].meta;
	const last = meaningfulCells[meaningfulCells.length - 1].meta;
	if (first.hasImage && !first.hasText && !last.hasImage && last.hasText) return 'list-row';
	}

	const nested = nestedOwnedTable(row, table);
	if (nested) {
	const nestedRows = directRows(nested);
	if (nestedRows.length === 1) {
		const nestedType = classifyRowInTable(nestedRows[0], nested);
		if (nestedType === 'list-row') return 'list-row';
		if (nestedType === 'spacer-row') return 'spacer-row';
	}
	}

	return 'other-row';
};

const detectVisualList = (table) => {
	const rows = directRows(table);
	let maxRun = 0;
	let currentRun = 0;
	let found = false;
	for (const row of rows) {
	const type = classifyRowInTable(row, table);
	if (type === 'list-row') {
		currentRun += 1;
		maxRun = Math.max(maxRun, currentRun);
		found = true;
		continue;
	}
	if (type === 'spacer-row') {
		continue;
	}
	currentRun = 0;
	}
	return maxRun;
};

const analyseCoding = (table) => {
	const tbody = table.querySelector(':scope > tbody');
	if (!tbody) return { hasListRole: false, correct: false, partial: false, itemCount: 0 };
	const tbodyRole = (tbody.getAttribute('role') || '').toLowerCase();
	if (tbodyRole !== 'list') return { hasListRole: false, correct: false, partial: false, itemCount: 0 };

	const rows = Array.from(tbody.querySelectorAll(':scope > tr')).filter((row) => root.visible(row) && row.closest('table') === table);
	let itemCount = 0;
	let partial = false;
	for (const row of rows) {
	const role = (row.getAttribute('role') || '').toLowerCase();
	const hidden = row.getAttribute('aria-hidden') === 'true';
	const spacer = !textOf(row) && visibleImgs(row).length === 0;
	if (role === 'listitem') {
		itemCount += 1;
		continue;
	}
	if (spacer && hidden) continue;
	partial = true;
	}
	const correct = !partial && itemCount >= 2;
	if (itemCount < 2) partial = true;
	return { hasListRole: true, correct, partial, itemCount };
};

root.checkVisualLists = () => {
	const tables = Array.from(document.querySelectorAll('table')).filter(root.visible);
	const findings = [];
	let foundVisualLists = false;
	let issues = false;

	for (const table of tables) {
	const visualCount = detectVisualList(table);
	const coding = analyseCoding(table);
	const isVisualList = visualCount >= 2;
	if (!isVisualList && !coding.hasListRole) continue;

	foundVisualLists = foundVisualLists || isVisualList || coding.hasListRole;
	table.dataset.a11yTable = 'true';
	table.dataset.a11yTableLabel = isVisualList ? 'Possible visual list' : 'list';

	const hasIssue = (isVisualList && !coding.correct) || coding.partial || (coding.hasListRole && coding.itemCount < 2);
	if (hasIssue) {
		issues = true;
		table.dataset.a11yTableStatus = 'issue';
		table.classList.add('a11y-table-issue');
		table.classList.remove('a11y-table-highlight', 'a11y-table-possible-list');
		table.setAttribute('data-text', 'List coding issue');
	} else {
		table.dataset.a11yTableStatus = isVisualList ? 'info' : 'ok';
		table.classList.remove('a11y-table-issue');
		table.removeAttribute('data-text');
		table.classList.add(isVisualList ? 'a11y-table-possible-list' : 'a11y-table-highlight');
	}
	findings.push({ el: table, isVisualList, hasIssue, coding });
	}

	const html = root.makeSection('Visual lists', `
	<ul>
		<li>${issues ? 'Issues found.' : 'No issues found.'}</li>
		<li>${foundVisualLists ? 'List(s) found which require visual conformation.' : 'A visual check is in order.'}</li>
	</ul>
	`);

	return { findings, html };
};
})();



(() => {
const root = window.A11Y_EMAIL;
const selector = ':is(a[href],area[href],audio[controls],button,embed[src],iframe,input,select,summary,textarea,video,[contenteditable],[tabindex]):not([hidden],:disabled,[tabindex^="-"])';

const radioTarget = (name) => {
	if (!name) return null;
	const radios = Array.from(document.querySelectorAll(`input[type="radio"][name="${name.replaceAll('"', '\\"')}"]`));
	if (!radios.length) return null;
	return radios.find((r) => r.checked) || radios[0];
};

const isEmailLikePage = () => {
	const tableCount = document.querySelectorAll('table').length;
	return tableCount >= 4 || Boolean(document.querySelector('[aria-label="Santander email"], [aria-label="Santander"]'));
};

root.renderTabStopsOverlay = (findings) => {
	root.removeById(root.ids.svg);

	const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
	svg.id = root.ids.svg;
	svg.setAttribute('aria-hidden', 'true');
	Object.assign(svg.style, {
	position: 'absolute',
	inset: '0',
	overflow: 'visible',
	zIndex: '10000',
	pointerEvents: 'none',
	margin: '0'
	});

	const make = (tag) => document.createElementNS('http://www.w3.org/2000/svg', tag);
	const lineGroup = make('g');
	const markerGroup = make('g');

	const placed = [];
	for (const finding of findings) {
	const rect = finding.el.getBoundingClientRect();
	const x = Math.round(rect.left + rect.width / 2 + window.scrollX);
	const y = Math.round(rect.top + rect.height / 2 + window.scrollY);
	placed.push({ finding, x, y });
	}

	for (let i = 1; i < placed.length; i += 1) {
	const prev = placed[i - 1];
	const curr = placed[i];
	const line = make('line');
	line.setAttribute('x1', String(prev.x));
	line.setAttribute('y1', String(prev.y));
	line.setAttribute('x2', String(curr.x));
	line.setAttribute('y2', String(curr.y));
	line.setAttribute('class', 'line');
	lineGroup.append(line);
	}

	for (const { finding, x, y } of placed) {
	const rectMarker = make('rect');
	rectMarker.setAttribute('x', String(x - 12));
	rectMarker.setAttribute('y', String(y - 12));
	rectMarker.setAttribute('width', '24');
	rectMarker.setAttribute('height', '24');
	markerGroup.append(rectMarker);

	const text = make('text');
	text.setAttribute('x', String(x));
	text.setAttribute('y', String(y));
	text.setAttribute('text-anchor', 'middle');
	text.setAttribute('dominant-baseline', 'central');
	text.textContent = String(finding.order);
	markerGroup.append(text);

	if (!finding.el.dataset.a11yTabstopHandlers) {
		finding.el.dataset.a11yTabstopHandlers = 'true';
		finding.el.addEventListener('focus', () => rectMarker.classList.add('-js-focused'));
		finding.el.addEventListener('blur', () => rectMarker.classList.remove('-js-focused'));
	}
	}

	svg.append(lineGroup);
	svg.append(markerGroup);
	root.ensureBody().appendChild(svg);
};

root.checkTabStops = () => {
	const candidates = Array.from(document.querySelectorAll(selector));
	const usedRadioGroups = new Set();
	const findings = [];
	let order = 0;

	for (const el of candidates) {
	if (!root.visible(el)) continue;
	let target = el;
	if (el instanceof HTMLInputElement && el.type === 'radio') {
		const name = el.name || '';
		if (!name || usedRadioGroups.has(name)) continue;
		const chosen = radioTarget(name);
		if (!chosen || !root.visible(chosen)) continue;
		usedRadioGroups.add(name);
		target = chosen;
	}
	target.classList.add('-js-tabable');
	order += 1;
	findings.push({ el: target, order });
	}

	const isEmail = isEmailLikePage();
	const tabindexNodes = isEmail
	? Array.from(document.querySelectorAll('[tabindex]')).filter((el) => root.visible(el) && String(el.getAttribute('tabindex') || '').trim() !== '')
	: [];

	for (const el of tabindexNodes) {
	el.classList.add('a11y-link-issue');
	el.style.outline = '2px dotted #c00000';
	el.style.outlineOffset = '2px';
	el.setAttribute('data-text', `tabindex=${el.getAttribute('tabindex')}`);
	}

	const html = [
	root.makeSection('Keyboard tab-stops', `
		<p>Using only the keyboard, navigate through the document using <kbd>Tab</kbd> and <kbd>Shift</kbd> + <kbd>Tab</kbd>, or the arrow keys on radio buttons. Activate links by pressing <kbd>Return</kbd>, and buttons with <kbd>Return</kbd> or <kbd>Spacebar</kbd>.</p>
		<p>Reporting is state dependant, remember to <strong>expand accordions</strong> before testing.</p>
		${isEmail ? `<p class="muted">- ${tabindexNodes.length ? `Tabindex found in email: ${root.escapeHtml(String(tabindexNodes.length))}. There should be none.` : 'No tabindex found in email.'}</p>` : ''}
		<ol>
		<li>When an element is focused by keyboard, is your current position clearly indicated?</li>
		<li>Are all interactive elements reachable and usable with just the keyboard?</li>
		<li>Does keyboard focus stop on non-interactive elements?</li>
		<li>Is any tab stop completely obscured by the overlaid yellow square marker?</li>
		<li>Does the keyboard tab order proceed in a logical sequence from left to right and top to bottom?</li>
		<li>Are there any points where the keyboard becomes stuck?</li>
		<li>Are there any elements which remain invisible upon keyboard focus?</li>
		</ol>
	`)
	].join('');

	return { findings, html };
};
})();




(() => {
const root = window.A11Y_EMAIL;

root.applyTextSpacing = () => {
	root.injectStyles(`
.a11y-textspacing, .a11y-textspacing *{line-height:1.5 !important;letter-spacing:0.12em !important;word-spacing:0.16em !important}
font-family:inherit !important;font-size:inherit !important;font-weight:inherit;font-style:inherit}
.a11y-textspacing p,.a11y-textspacing li,.a11y-textspacing td,.a11y-textspacing th,.a11y-textspacing a,.a11y-textspacing span,.a11y-textspacing div{word-break:normal;overflow-wrap:anywhere}
#a11y-email-console-ui.a11y-textspacing-exempt, #a11y-email-console-ui.a11y-textspacing-exempt *{line-height:normal !important;letter-spacing:normal !important;word-spacing:normal !important}
`);
	root.ensureBody().classList.add('a11y-textspacing');
	document.getElementById('a11y-email-console-ui')?.classList.add('a11y-textspacing-exempt');
	const html = root.makeSection('Maximum text spacing', `
	<p>The page has been temporarily styled with WCAG text-spacing values.</p>
	<ul>
		<li><code>line-height: 1.5</code></li>
		<li><code>letter-spacing: 0.12em</code></li>
		<li><code>word-spacing: 0.16em</code></li>
	</ul>
	<p class="muted">Review the page visually for clipping, overlap, and reflow issues.</p>
	`);
	return { findings: [], html };
};

root.clearTextSpacing = () => {
	root.ensureBody().classList.remove('a11y-textspacing');
	document.getElementById('a11y-email-console-ui')?.classList.remove('a11y-textspacing-exempt');
};
})();





(() => {
const root = window.A11Y_EMAIL;

function clearAll() {
	root.clearAll();
	root.clearTextSpacing?.();
}

function renderResults(parts) {
	const html = [
	`<p class="a11y-report-intro">For each check, read and answer the questions shown.</p>`,
	...parts
	].join('');
	root.toggleReport(html);
	root.injectStyles(root.reportShellCss);
}

function runChecks(settings = {}) {
	clearAll();
	const merged = { ...root.defaults, ...settings };

	if (!Object.entries(merged).some(([k,v]) => k !== 'baseFontSize' && v === true)) {
	root.toggleReport('');
	root.injectStyles(root.reportShellCss);
	return { settings: merged, sectionsRendered: 0, clear: clearAll };
	}

	if (merged.tableLinearise) root.setTableLinearise(true);

	const sections = [];
	let tabStopFindings = [];
	let largeTextRes = null;

	if (merged.headings) {
	largeTextRes = root.checkLargeText(merged.baseFontSize);
	sections.push(root.checkHeadings({ largeTextFindings: largeTextRes ? largeTextRes.findings : [] }).html);
	}
	if (merged.links) sections.push(root.checkLinks().html);
	if (merged.tabStops) {
	const res = root.checkTabStops();
	sections.push(res.html);
	tabStopFindings = res.findings;
	}
	if (merged.emailMeta) sections.push(root.checkEmailMeta().html);
	if (merged.images) sections.push(root.checkImages().html);
	if (merged.tables) sections.push(root.checkTables({ linearise: false }).html);
	if (merged.tableLinearise) sections.push(root.makeSection('Linearised tables', `<p>- All table cells are linearised into a single column. Please check that the content order still makes sense.</p>`));
	if (merged.textSpacing) sections.push(root.applyTextSpacing().html);

	renderResults(sections);
	root.renderGeometryOverlay?.();
	if (merged.tabStops) root.renderTabStopsOverlay(tabStopFindings);

	return {
	settings: merged,
	sectionsRendered: sections.length,
	clear: clearAll
	};
}

function currentSettingsFromUi() {
	const panel = document.getElementById('a11y-email-console-ui');
	if (!panel) return { ...root.defaults };
	const get = (name) => panel.querySelector(`[name="${name}"]`);
	return {
	headings: !!get('headings')?.checked,
	links: !!get('links')?.checked,
	tabStops: !!get('tabStops')?.checked,
	emailMeta: !!get('emailMeta')?.checked,
	images: !!get('images')?.checked,
	tables: !!get('tables')?.checked,
	tableLinearise: !!get('tableLinearise')?.checked,
	textSpacing: !!get('textSpacing')?.checked,
	lists: !!get('lists')?.checked,
	baseFontSize: Number.parseFloat(get('baseFontSize')?.value || '16') || 16
	};
}

function buildConsoleUi() {
	document.getElementById('a11y-email-console-ui')?.remove();
	document.getElementById('a11y-email-console-ui-style')?.remove();
	const panel = document.createElement('aside');
	panel.id = 'a11y-email-console-ui';
	panel.innerHTML = `
	<div class="a11y-console-card">
		<div class="a11y-console-head" data-drag-handle="true">
		<strong>Email accessibility testing suite</strong>
		</div>
		<p class="a11y-console-copy">Tick a check to turn it on. Untick all checks to clear the overlay.</p>
		<div class="a11y-console-grid">
		<div class="a11y-console-list">
			<div class="a11y-console-subhead">Squadies</div>
			<label><input type="checkbox" name="tableLinearise"> Linearise tables</label>
			<label><input type="checkbox" name="images"> Image alts</label>
			<label><input type="checkbox" name="links"> Links</label>
			<label><input type="checkbox" name="headings"> Headings and large text</label>
		</div>
		<div class="a11y-console-list">
			<div class="a11y-console-subhead">Developers</div>
			<label><input type="checkbox" name="emailMeta"> Email shell</label>
			<label><input type="checkbox" name="tables"> Tables</label>
			<label><input type="checkbox" name="tabStops"> Keyboard tab-stops</label>
			<label><input type="checkbox" name="textSpacing"> Text spacing</label>
		</div>
		<label class="a11y-console-font">Base font size <input type="number" min="1" step="1" name="baseFontSize" value="16"></label>
		</div>
		<div class="a11y-console-divider" aria-hidden="true"></div>
	</div>
	<output id="${root.ids.report}" class="a11y-report" role="region" aria-label="Accessibility report"></output>
	`;
	document.body.appendChild(panel);
	const style = document.createElement('style');
	style.id = 'a11y-email-console-ui-style';
	style.textContent = `
	#a11y-email-console-ui{position:fixed;top:16px;right:16px;left:auto;z-index:2147483647;font:400 14px/1.4 Arial,sans-serif;color:#222;width:440px;max-width:min(440px,calc(100vw - 32px));height:calc(100vh - 32px);display:flex;flex-direction:column;user-select:text;background:#fff;border:2px solid #ccc;border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.18);overflow:hidden}
	#a11y-email-console-ui .a11y-console-card{background:#fff;border:0;border-radius:0;box-shadow:none;padding:12px 12px 8px;flex:none}
	#a11y-email-console-ui .a11y-console-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px;cursor:move;user-select:none}
	#a11y-email-console-ui .a11y-console-copy{margin:0 0 24px}
	#a11y-email-console-ui .a11y-console-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px 16px;align-items:start}
	#a11y-email-console-ui .a11y-console-list{display:grid;gap:8px;align-content:start}.a11y-console-subhead{font-weight:700;margin:0 0 6px}
	#a11y-email-console-ui label{display:flex;align-items:center;gap:8px;min-width:0}
	#a11y-email-console-ui .a11y-console-font{justify-content:space-between;grid-column:1 / -1;margin-top:2px}
	#a11y-email-console-ui input[type="number"]{width:72px;padding:4px}
	#a11y-email-console-ui .a11y-console-divider{margin-top:10px;border-top:1px solid #d6d6d6}
	#${root.ids.report}{display:block;background:transparent !important;box-shadow:none;border:0 !important;border-radius:0;box-sizing:border-box;padding:0 !important;margin:0;flex:1;min-height:0;overflow:auto;font:400 12px/1.45 system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:#222;user-select:text}
	#${root.ids.report} .a11y-report-intro{margin:40px 0 24px;padding:0;color:#333}
	#${root.ids.report} h2{text-align:left;font:600 17px/1.3 system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;margin:48px 0 24px;padding:0}
	#${root.ids.report} h3{text-align:left;font:600 14px/1.3 system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;margin:36px 0 20px;padding:0}
	#${root.ids.report} p,#${root.ids.report} ol,#${root.ids.report} ul,#${root.ids.report} table,#${root.ids.report} .a11y-section>div{padding:0}
	#${root.ids.report} ol,#${root.ids.report} ul{margin:8px 0 0 20px}
	#${root.ids.report} .indent{margin-left:0 !important;padding-left:0 !important;list-style:none}
	#${root.ids.report} ol.a11y-compact-list,#${root.ids.report} ul.a11y-compact-list{margin:8px 0 0 0;padding:0;list-style:none}
	#${root.ids.report} li{margin:4px 0}
	#${root.ids.report} code,#${root.ids.report} kbd{background:#fff;border:1px solid #ccc;border-radius:4px;padding:0 .3em}
	#${root.ids.report} .warn{color:#c00000;font-weight:600}
	#${root.ids.report} .ok{color:#087f23;font-weight:600}
	#${root.ids.report} .muted{color:#555}
	#${root.ids.report} table{border-collapse:collapse;width:100%;margin:0}
	#${root.ids.report} td,#${root.ids.report} th{border:1px solid #ddd;padding:4px 6px;vertical-align:top}
	#${root.ids.report} .a11y-section{margin-bottom:16px}
	#${root.ids.report} .a11y-status-pill{display:inline-flex;align-items:center;justify-content:center;min-width:2.4em;padding:2px 8px;border-radius:999px;background:#666;color:#fff;font:700 12px/1 system-ui;white-space:nowrap;flex:none}
	#${root.ids.report} .a11y-status-pill.info,#${root.ids.report} .a11y-large-size-pill{background:#0057d9 !important;color:#fff !important}
	#${root.ids.report} .a11y-large-prompt{color:#0057d9;font-weight:500}
	#${root.ids.report} .a11y-report-linkname{color:#0b5e20 !important;text-decoration:underline !important;font-weight:400 !important}
	`;
	document.head.appendChild(style);

	const sync = () => {
	const settings = currentSettingsFromUi();
	const enabled = Object.entries(settings).some(([k,v]) => k !== 'baseFontSize' && v === true);
	if (enabled) {
		runChecks(settings);
	} else {
		clearAll();
		const report = document.getElementById(root.ids.report);
		if (report) report.innerHTML = '';
		root.injectStyles(root.reportShellCss);
	}
	};

	panel.addEventListener('change', (event) => {
	const target = event.target;
	if (!(target instanceof HTMLInputElement)) return;
	if (target.type === 'checkbox' || target.name === 'baseFontSize') sync();
	});

	const handle = panel.querySelector('[data-drag-handle="true"]');
	let dragging = false;
	let startX = 0;
	let startY = 0;
	let startLeft = 16;
	let startTop = 16;
	const rectWidth = (el) => el.getBoundingClientRect().width;
	const rectHeight = (el) => el.getBoundingClientRect().height;
	const onMove = (event) => {
	if (!dragging) return;
	const dx = event.clientX - startX;
	const dy = event.clientY - startY;
	panel.style.left = `${Math.max(8, Math.min(window.innerWidth - rectWidth(panel) - 8, startLeft + dx))}px`;
	panel.style.top = `${Math.max(8, Math.min(window.innerHeight - rectHeight(panel) - 8, startTop + dy))}px`;
	};
	const onUp = () => {
	dragging = false;
	document.removeEventListener('pointermove', onMove);
	document.removeEventListener('pointerup', onUp);
	};
	handle?.addEventListener('pointerdown', (event) => {
	dragging = true;
	startX = event.clientX;
	startY = event.clientY;
	const rect = panel.getBoundingClientRect();
	startLeft = rect.left;
	startTop = rect.top;
	panel.style.right = 'auto';
	document.addEventListener('pointermove', onMove);
	document.addEventListener('pointerup', onUp);
	});

	return panel;
}


window.A11Y_EMAIL_CONSOLE = {
	run: runChecks,
	clear: clearAll,
	ui: buildConsoleUi,
	defaults: { ...root.defaults },
	root
};

buildConsoleUi();
})();