From 7b6867b0e5df48e225a5f6e90536e6669814dafb Mon Sep 17 00:00:00 2001 From: Frederick O'Brien Date: Mon, 9 Dec 2024 15:39:42 +0000 Subject: [PATCH 1/3] Basic test --- package-lock.json | 7 +++++++ package.json | 1 + src/utils/contrast.test.ts | 41 ++++++++++++++++++++++++++++++++++++++ 3 files changed, 49 insertions(+) create mode 100644 src/utils/contrast.test.ts diff --git a/package-lock.json b/package-lock.json index 60a45964..b7635a36 100644 --- a/package-lock.json +++ b/package-lock.json @@ -22,6 +22,7 @@ "@types/eslint": "^8.56.12", "@typescript-eslint/eslint-plugin": "^7.18.0", "@typescript-eslint/parser": "^7.18.0", + "color-contrast-checker": "^2.1.0", "eslint": "^8.57.1", "eslint-config-prettier": "^9.1.0", "eslint-plugin-storybook": "^0.11.1", @@ -2980,6 +2981,12 @@ } } }, + "node_modules/color-contrast-checker": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/color-contrast-checker/-/color-contrast-checker-2.1.0.tgz", + "integrity": "sha512-6Y0aIEej3pwZTVlicIqVzhO6T4izDWouaIXnYoDdTuFFAMQ9nnN0dgHNP9J94jRnH6asjPq1/wzUKxwoNbWtRQ==", + "dev": true + }, "node_modules/color-convert": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", diff --git a/package.json b/package.json index 3e83e31a..d55d9126 100644 --- a/package.json +++ b/package.json @@ -29,6 +29,7 @@ "@types/eslint": "^8.56.12", "@typescript-eslint/eslint-plugin": "^7.18.0", "@typescript-eslint/parser": "^7.18.0", + "color-contrast-checker": "^2.1.0", "eslint": "^8.57.1", "eslint-config-prettier": "^9.1.0", "eslint-plugin-storybook": "^0.11.1", diff --git a/src/utils/contrast.test.ts b/src/utils/contrast.test.ts new file mode 100644 index 00000000..95169bf6 --- /dev/null +++ b/src/utils/contrast.test.ts @@ -0,0 +1,41 @@ +import { expect, test } from 'vitest'; +import ColorContrastChecker from 'color-contrast-checker'; +import { API_URL } from '$lib/constants'; +import type { ReviewMetadata } from '$lib/types/reviews'; + +const reviews = await fetch(`${API_URL}/reviews.json`); +const data: { + metadata: ReviewMetadata; +}[] = await reviews.json(); + +const ccc = new ColorContrastChecker(); + +test('Colour contrast on review pages', () => { + const passingReviews: string[] = []; + const failingReviews: string[] = []; + + data.forEach(({ metadata }) => { + const primaryColor = metadata.colours[0]; + const secondaryColor = metadata.colours[1]; + const tertiaryColor = metadata.colours[2]; + + const primaryContrast = ccc.isLevelAA(primaryColor, '#ffffff'); + const secondaryContrast = ccc.isLevelAA(secondaryColor, primaryColor); + const tertiaryContrast = ccc.isLevelAA(tertiaryColor, primaryColor); + + if (!primaryContrast || !secondaryContrast || !tertiaryContrast) { + failingReviews.push(metadata.album); + } else { + passingReviews.push(metadata.album); + } + + // expect(primaryContrast).toBe(true); + // expect(secondaryContrast).toBe(true); + // expect(tertiaryContrast).toBe(true); + }); + + console.log('Passing reviews: ' + passingReviews.length); + failingReviews.forEach((album) => { + console.log(album); + }); +}); From df275e6769bca84108f0592a0648affe9aba2ce5 Mon Sep 17 00:00:00 2001 From: Frederick O'Brien Date: Tue, 10 Dec 2024 00:37:45 +0000 Subject: [PATCH 2/3] Adjust test --- src/utils/contrast.test.ts | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/src/utils/contrast.test.ts b/src/utils/contrast.test.ts index 95169bf6..e04b6582 100644 --- a/src/utils/contrast.test.ts +++ b/src/utils/contrast.test.ts @@ -1,9 +1,8 @@ import { expect, test } from 'vitest'; import ColorContrastChecker from 'color-contrast-checker'; -import { API_URL } from '$lib/constants'; import type { ReviewMetadata } from '$lib/types/reviews'; -const reviews = await fetch(`${API_URL}/reviews.json`); +const reviews = await fetch(`https://api.audioxide.com/reviews.json`); const data: { metadata: ReviewMetadata; }[] = await reviews.json(); @@ -18,12 +17,14 @@ test('Colour contrast on review pages', () => { const primaryColor = metadata.colours[0]; const secondaryColor = metadata.colours[1]; const tertiaryColor = metadata.colours[2]; + const summaryTextColour = metadata.colours[3] ? metadata.colours[3] : primaryColor; - const primaryContrast = ccc.isLevelAA(primaryColor, '#ffffff'); + const primaryContrast = ccc.isLevelAA(primaryColor, '#ffffff', 40); const secondaryContrast = ccc.isLevelAA(secondaryColor, primaryColor); const tertiaryContrast = ccc.isLevelAA(tertiaryColor, primaryColor); + const summaryContrast = ccc.isLevelAA(summaryTextColour, '#ffffff', 18); - if (!primaryContrast || !secondaryContrast || !tertiaryContrast) { + if (!primaryContrast || !secondaryContrast || !tertiaryContrast || !summaryContrast) { failingReviews.push(metadata.album); } else { passingReviews.push(metadata.album); @@ -35,7 +36,10 @@ test('Colour contrast on review pages', () => { }); console.log('Passing reviews: ' + passingReviews.length); + console.log('Failing reviews: ' + failingReviews.length); + + console.log('Failing reviews:'); failingReviews.forEach((album) => { - console.log(album); + console.warn(album); }); }); From 886b5d2a321c46b6807577a2a772b99b8028b8bc Mon Sep 17 00:00:00 2001 From: Frederick O'Brien Date: Sun, 12 Jan 2025 14:53:32 +0000 Subject: [PATCH 3/3] Update contrast.test.ts --- src/utils/contrast.test.ts | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/src/utils/contrast.test.ts b/src/utils/contrast.test.ts index e04b6582..7aafe7f6 100644 --- a/src/utils/contrast.test.ts +++ b/src/utils/contrast.test.ts @@ -24,21 +24,22 @@ test('Colour contrast on review pages', () => { const tertiaryContrast = ccc.isLevelAA(tertiaryColor, primaryColor); const summaryContrast = ccc.isLevelAA(summaryTextColour, '#ffffff', 18); - if (!primaryContrast || !secondaryContrast || !tertiaryContrast || !summaryContrast) { + const allTestsPass = + primaryContrast && secondaryContrast && tertiaryContrast && summaryContrast; + + if (!allTestsPass) { failingReviews.push(metadata.album); } else { passingReviews.push(metadata.album); } - // expect(primaryContrast).toBe(true); - // expect(secondaryContrast).toBe(true); - // expect(tertiaryContrast).toBe(true); + expect(allTestsPass).toBe(true); }); console.log('Passing reviews: ' + passingReviews.length); console.log('Failing reviews: ' + failingReviews.length); - console.log('Failing reviews:'); + console.warn('Reviews failing WCAG AA contrast requirements:'); failingReviews.forEach((album) => { console.warn(album); });