Make the comparison tables semantic and leave one main per page

src/components/DataTable.astro

@@ -0,0 +1,134 @@
+---
+/**
+ * DataTable — semantic shell for the site's comparison tables.
+ *
+ * Emits caption → colgroup → thead (th scope="col") → tbody slot. Callers pass only
+ * <tr> rows whose first cell is a <th scope="row">.
+ *
+ * Sets no width, padding, border, border-collapse, table-layout, row height or icon
+ * size. The callers disagree on all of them — Pricing collapses its borders while the
+ * Edge matrix separates them by 16px — so appearance stays entirely with the caller.
+ *
+ * Styling contract: a caller moving its table shell in here must switch its <style>
+ * block to `is:global`, nested under its own class, in the same commit. Astro hashes
+ * every compound, so a caller's `tbody tr th { … }` stops matching as soon as tbody
+ * carries this component's hash instead of the caller's.
+ */
+import type { DataTableColumn } from '@models/data-table';
+import { captionId as buildCaptionId } from '@util/caption-id';
+
+interface Props {
+	/** Emitted as `<caption>`. Required — every table needs an accessible name. */
+	caption: string;
+	/** Show the caption. When false it stays in the a11y tree at zero layout cost. */
+	captionVisible?: boolean;
+	captionClass?: string;
+	columns: DataTableColumn[];
+	/** Class on the `<table>` element — where the caller's CSS attaches. */
+	class?: string;
+	/** Emit a `<colgroup>`. Off for callers that size columns on the header cells. */
+	colgroup?: boolean;
+	/** Collapse the header row to zero height, e.g. when the visible header sits outside the table. */
+	headerHidden?: boolean;
+	/** Wrap in a keyboard-scrollable region, named from the caption. */
+	scrollable?: boolean;
+	scrollClass?: string;
+	/** Overrides the derived id. Needed only when one page has two identical captions. */
+	captionId?: string;
+}
+
+const {
+	caption,
+	captionVisible = false,
+	captionClass,
+	columns,
+	class: className,
+	colgroup = true,
+	headerHidden = false,
+	scrollable = false,
+	scrollClass,
+	captionId,
+} = Astro.props;
+
+// `||` not `??`: a caller computing the override from data can hand us an empty
+// string, which would emit id="" and leave the scroll region unnamed.
+const id = captionId?.trim() || buildCaptionId(caption, 'dt-caption');
+
+// Fragment collapses to nothing, so the table is unwrapped unless `scrollable`.
+const Wrapper = scrollable ? 'div' : Fragment;
+const wrapperProps = scrollable
+	? { class: scrollClass, role: 'region', 'aria-labelledby': id, tabindex: '0' }
+	: {};
+
+/** Renders a header label, turning newlines into line breaks. */
+const labelLines = (label: string) => label.split('\n');
+---
+
+<Wrapper {...wrapperProps}>
+	<table class={className}>
+		<caption id={id} class:list={[captionClass, { 'dt-caption--hidden': !captionVisible }]}>
+			{captionVisible ? caption : <span class="dt-vh">{caption}</span>}
+		</caption>
+		{colgroup && (
+			<colgroup>
+				{columns.map((col) => (
+					<col class={col.colClass} style={col.width ? `width:${col.width}` : undefined} />
+				))}
+			</colgroup>
+		)}
+		<thead class:list={[{ 'dt-thead--hidden': headerHidden }]}>
+			<tr>
+				{columns.map((col) => (
+					<th scope="col" class={col.thClass} style={col.thStyle}>
+						{col.label ? (
+							labelLines(col.label).map((line, i, all) =>
+								i < all.length - 1 ? (
+									<>
+										{line}
+										<br />
+									</>
+								) : (
+									line
+								)
+							)
+						) : (
+							<span class="dt-vh">{col.srLabel ?? 'Feature'}</span>
+						)}
+					</th>
+				))}
+			</tr>
+		</thead>
+		<tbody>
+			<slot />
+		</tbody>
+	</table>
+</Wrapper>
+
+<style lang="scss" is:global>
+	@use '../styles/variables' as *;
+
+	/* Global because dt-vh is written in callers, on slotted content that carries
+	   their hash. Unlayered so it beats Starlight's layered .sr-only, which is
+	   missing entirely on LegalLayout pages. */
+	.dt-vh {
+		@include visually-hidden;
+	}
+
+	/* Both hiders zero the box rather than positioning it: `position: absolute`
+	   blockifies display, stripping the caption role and the columnheader mapping
+	   that scope="col" relies on. */
+	.dt-caption--hidden {
+		padding: 0;
+		height: 0;
+		line-height: 0;
+		font-size: 0;
+	}
+
+	.dt-thead--hidden th {
+		padding: 0;
+		height: 0;
+		line-height: 0;
+		font-size: 0;
+		border: 0;
+	}
+</style>

src/components/DataTableValue.astro

@@ -0,0 +1,69 @@
+---
+/**
+ * DataTableValue — renders one comparison cell's value as text, always.
+ *
+ * Icons are decorative (`aria-hidden`); the value itself is a text node, visible when
+ * the design shows text and visually-hidden when the design shows only an icon. That is
+ * what makes a cell readable by screen readers and by plain-text extraction.
+ *
+ * Never put `aria-label` on an `<Icon>`: astro-icon spreads props onto a bare `<svg>`
+ * with no `role="img"`, so the name is announced unreliably and extraction sees nothing.
+ */
+import { Icon } from 'astro-icon/components';
+
+interface Props {
+	value: boolean | string;
+	/** Icon for `true`. */
+	yesIcon?: string;
+	yesClass?: string;
+	/** How `false` renders: `'blank'` shows nothing, or give an icon to draw. */
+	no?: 'blank' | { icon: string; class?: string };
+	yesText?: string;
+	noText?: string;
+}
+
+const {
+	value,
+	yesIcon = 'tabler:check',
+	yesClass,
+	no = 'blank',
+	yesText = 'Yes',
+	noText = 'No',
+} = Astro.props;
+
+// A blank value would render a blank cell, which is the one thing this component
+// exists to prevent. Fail the build rather than ship it: the caller either has a
+// real value or wants an explicit one like 'N/A'.
+if (typeof value === 'string' && !value.trim()) {
+	throw new Error(
+		'DataTableValue: `value` is an empty string, which would render an empty cell. ' +
+			'Pass a real value, or one of Yes / No / N/A.'
+	);
+}
+---
+
+{
+	value === true ? (
+		<>
+			<Icon name={yesIcon} class={yesClass} aria-hidden="true" />
+			<span class="dt-vh">{yesText}</span>
+		</>
+	) : value === false ? (
+		<>
+			{no !== 'blank' && <Icon name={no.icon} class={no.class} aria-hidden="true" />}
+			<span class="dt-vh">{noText}</span>
+		</>
+	) : (
+		value
+	)
+}
+
+<style lang="scss" is:global>
+	@use '../styles/variables' as *;
+
+	// Declared here as well as in DataTable: this component can be used inside a
+	// hand-written table, and without the rule the value text would be visible.
+	.dt-vh {
+		@include visually-hidden;
+	}
+</style>

src/components/IotHub/SectionTable.astro

@@ -1,19 +1,27 @@
 ---
+import { captionId as buildCaptionId } from '@util/caption-id';
+
 interface Props {
 	heading: string;
 	intro?: string;
 	columns: string[];
 	rows: string[][];
+	/** Overrides the derived id. Needed only when one page has two identical headings. */
+	captionId?: string;
 }
 
-const { heading, intro, columns, rows } = Astro.props;
+const { heading, intro, columns, rows, captionId } = Astro.props;
+
+const id = captionId?.trim() || buildCaptionId(heading, 'ih-table');
 ---
 
 <section class="ih-table">
 	<h2 class="ih-table__title">{heading}</h2>
 	{intro && <p class="ih-table__intro">{intro}</p>}
-	<div class="ih-table__scroll">
+	<div class="ih-table__scroll" role="region" aria-labelledby={id} tabindex="0">
 		<table class="ih-table__table">
+			{/* Hidden: the <h2> above already shows this text. */}
+			<caption id={id} class="ih-table__caption">{heading}</caption>
 			<thead>
 				<tr>
 					{columns.map((col) => <th scope="col">{col}</th>)}
@@ -52,6 +60,17 @@ const { heading, intro, columns, rows } = Astro.props;
 		@include iot-hub-section-intro;
 	}
 
+	// Zeroed rather than positioned: `position: absolute` would blockify the
+	// caption and strip the table's accessible name.
+	.ih-table__caption {
+		padding: 0;
+		height: 0;
+		line-height: 0;
+		font-size: 0;
+		overflow: hidden;
+		color: transparent;
+	}
+
 	.ih-table__scroll {
 		overflow-x: auto;
 		// Rounded outer frame (matches buttons/cards); cells draw only inner