From e520666b5ae3fb6d545dafdc96ed59be6616f408 Mon Sep 17 00:00:00 2001
From: MTRNord <mtrnord1@gmail.com>
Date: Sat, 20 Apr 2024 17:17:04 +0200
Subject: [PATCH] Test at least one page for bridges and also for clients and
 ensure we have a h1 header on the client details

---
 sass/_clients.scss              |  2 +-
 templates/ecosystem/client.html |  4 +--
 tests/metadata.spec.ts          | 43 ++++++++++++++++++++++++++-------
 3 files changed, 37 insertions(+), 12 deletions(-)

diff --git a/sass/_clients.scss b/sass/_clients.scss
index 5fc5d806b..045d16d27 100644
--- a/sass/_clients.scss
+++ b/sass/_clients.scss
@@ -73,7 +73,7 @@ body:has(.projects-card-deck > div > .client-checkbox:checked) {
             margin-inline: auto;
         }
 
-        h3 {
+        h1 {
             display: flex;
             gap: .5rem;
             margin: 0 auto;
diff --git a/templates/ecosystem/client.html b/templates/ecosystem/client.html
index 31c00fc91..105e39546 100644
--- a/templates/ecosystem/client.html
+++ b/templates/ecosystem/client.html
@@ -14,9 +14,9 @@
         <div class="details">
             <img class="app-logo" src="../{{ thumbnail }}" alt="{{ page.title }} Logo">
             <div class="name-and-release-date">
-                <h3>{{ page.title }}<div class="maturity {{ page.extra.maturity | lower }}">{{ page.extra.maturity }}
+                <h1>{{ page.title }}<div class="maturity {{ page.extra.maturity | lower }}">{{ page.extra.maturity }}
                     </div>
-                </h3>
+                </h1>
             </div>
             <p class="summary">{{ page.content | markdown | safe }}</p>
             <div class="project-links">
diff --git a/tests/metadata.spec.ts b/tests/metadata.spec.ts
index 998c46bac..9645fb59e 100644
--- a/tests/metadata.spec.ts
+++ b/tests/metadata.spec.ts
@@ -90,21 +90,46 @@ test.describe('accessibility', () => {
             expect(accessibilityScanResults.violations).toEqual([]);
         });
 
-        test('ecosystem/clients should not have any automatically detectable accessibility issues', async ({ page }) => {
-            await page.goto('/ecosystem/clients');
+        test.describe("Clients", () => {
+            test('ecosystem/clients should not have any automatically detectable accessibility issues', async ({ page }) => {
+                await page.goto('/ecosystem/clients');
 
-            const accessibilityScanResults = await new AxeBuilder({ page }).analyze();
+                const accessibilityScanResults = await new AxeBuilder({ page }).analyze();
 
-            expect(accessibilityScanResults.violations).toEqual([]);
+                expect(accessibilityScanResults.violations).toEqual([]);
+            });
+
+
+            // TODO: Parse the toml file to generate test cases for all sections
+            // This fails to various contrast related issues - https://dequeuniversity.com/rules/axe/4.9/color-contrast
+            test('ecosystem/clients/$client should not have any automatically detectable accessibility issues', async ({ page }) => {
+                await page.goto('/ecosystem/clients/element');
+
+                const accessibilityScanResults = await new AxeBuilder({ page }).analyze();
+
+                expect(accessibilityScanResults.violations).toEqual([]);
+            });
         });
 
-        // This fails to various contrast related issues - https://dequeuniversity.com/rules/axe/4.9/color-contrast
-        test.fixme('ecosystem/bridges should not have any automatically detectable accessibility issues', async ({ page }) => {
-            await page.goto('/ecosystem/bridges');
+        test.describe("Bridges", () => {
+            // This fails to various contrast related issues - https://dequeuniversity.com/rules/axe/4.9/color-contrast
+            test.fixme('ecosystem/bridges should not have any automatically detectable accessibility issues', async ({ page }) => {
+                await page.goto('/ecosystem/bridges');
 
-            const accessibilityScanResults = await new AxeBuilder({ page }).analyze();
+                const accessibilityScanResults = await new AxeBuilder({ page }).analyze();
 
-            expect(accessibilityScanResults.violations).toEqual([]);
+                expect(accessibilityScanResults.violations).toEqual([]);
+            });
+
+            // TODO: Parse the toml file to generate test cases for all sections
+            // This fails to various contrast related issues - https://dequeuniversity.com/rules/axe/4.9/color-contrast
+            test.fixme('ecosystem/bridges/$bridge should not have any automatically detectable accessibility issues', async ({ page }) => {
+                await page.goto('/ecosystem/bridges/whatsapp');
+
+                const accessibilityScanResults = await new AxeBuilder({ page }).analyze();
+
+                expect(accessibilityScanResults.violations).toEqual([]);
+            });
         });
 
         // This fails to various contrast related issues - https://dequeuniversity.com/rules/axe/4.9/color-contrast