Test at least one page for bridges and also for clients and ensure we…

… have a h1 header on the client details
matrix-org · Apr 20, 2024 · e520666 · e520666
1 parent 8e01af1
commit e520666
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 12 deletions.
diff --git 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
@@ -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
@@ -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