test(cypress): add modal a11y check

.vscode/settings.json

@@ -63,6 +63,7 @@
 		"Hawkesbury",
 		"HTMLLI",
 		"instanceof",
+		"jank",
 		"Kidsgrove",
 		"lucide",
 		"lvml",

cypress.config.js

@@ -11,6 +11,7 @@ export default defineConfig({
 		specPattern: 'cypress/e2e',
 		viewportWidth: 1200,
 		viewportHeight: 600,
+		waitForAnimations: true,
 		setupNodeEvents(on, config) {
 			on('task', {
 				log(message) {

cypress/e2e/accessibility.test.ts

@@ -5,6 +5,20 @@ describe('Accessibility tests', () => {
 	it('Has no detectable accessibility violations on load', () => {
 		cy.checkA11yWithLog();
 	});
+	it('Opens the modal and checks violations', () => {
+		cy.findByTitle(/Where to buy/).click();
+		cy.findByTitle(/Stores which stock the book/).should('be.visible');
+		/**
+		 * Axe is picking up the h2 element in the modal as a color-violation
+		 * because it's not waiting for the animation to finish. There are a
+		 * bunch of issues on axe related to layering and animations so this is
+		 * likely one of them.
+		 *
+		 * Hacky solution is to wait until the animation and all jank is done.
+		 */
+		cy.wait(500);
+		cy.get('main').checkA11yWithLog();
+	});
 	it('Navigates to the author page and checks a11y', () => {
 		cy.findByTitle(/About the author/)
 			.click()

src/components/Purchase/Modal.astro

@@ -42,7 +42,7 @@ const retailerSizes =
 	<label class="outer" for={MODAL_ID}></label>
 	<div class="inner">
 		<label class="close" for={MODAL_ID} title="Close"></label>
-		<h2>Retailers</h2>
+		<h2 title="Stores which stock the book">Retailers</h2>
 		<div class="retailers">
 			{
 				sortedRetailers.map(