Improve a11y metric for captioned tables

[tunetheweb]

Copied from HTTPArchive/legacy.httparchive.org#248

The Accessibility Chapter uses this custom metric code to find captioned table:

custom-metrics/dist/a11y.js

Lines 47 to 57 in 46b90e8

	tables: captureAndLogError(() => {
	const tables = document.querySelectorAll('table');
	const tables_with_caption = document.querySelectorAll('table caption');
	const tabels_with_presentational = document.querySelectorAll('table[role="presentation" i]');
	return {
	total: tables.length,
	total_with_caption: tables_with_caption.length,
	total_with_presentational: tabels_with_presentational.length,
	};
	}),

However some sites (like the Web Almanac itself!) uses <figcaptions> which are a valid alternative. We should enhance this detection to capture this with the following code:

const tables_with_figcaption = document.querySelectorAll('figure:has(table):has(figcaption)');

I've tested this in Chrome 96 and it works! 😀
But not in WPT as not enabled by default until Chrome 105 - so can't add yet 😞

Twitter thread: https://twitter.com/tunetheweb/status/1462885130318589952?s=20

Adding an issue to remind myself to add once :has() is fully rolled out in Chrome 105

[rviscomi]

FYI you can use the "Transfer issue" button to handle moving issues across repos

[tunetheweb]

TIL!