tests(e2e): Separate accessibility and form checks

- automatically test for light and dark themes

tests/e2e/shared/accessibility.ts

@@ -0,0 +1,35 @@
+import {expect, type Page} from '@playwright/test';
+import {AxeBuilder} from '@axe-core/playwright';
+
+export async function accessibilityCheck({page}: {page: Page}, includes: string[], excludes: string[], disabledRules: string[]) {
+  // contrast of inline links is still a global issue in Forgejo
+  disabledRules += 'link-in-text-block';
+
+  let accessibilityScanner = await new AxeBuilder({page})
+    .disableRules(disabledRules);
+  // passing the whole array seems to be not supported,
+  // iterating has the nice side-effectof skipping this if the array is empty
+  for (const incl of includes) {
+    // passing the whole array seems to be not supported
+    accessibilityScanner = accessibilityScanner.include(incl);
+  }
+  for (const excl of excludes) {
+    accessibilityScanner = accessibilityScanner.exclude(excl);
+  }
+
+  // scan the page both in dark and light theme
+  let accessibilityScanResults = await accessibilityScanner.analyze();
+  expect(accessibilityScanResults.violations).toEqual([]);
+  await page.emulateMedia({colorScheme: 'dark'});
+  // in https://codeberg.org/forgejo/forgejo/pulls/5899 there have been
+  // some weird failures related to contrast scanning,
+  // reporting for colours that haven't been used and no trace in the
+  // screenshots.
+  // Since this was only happening with some browsers and not always,
+  // my bet is on a transition effect on dark/light mode switch.
+  // Waiting a little seems to work around this.
+  await page.waitForTimeout(100); // eslint-disable-line playwright/no-wait-for-timeout
+  accessibilityScanResults = await accessibilityScanner.analyze();
+  expect(accessibilityScanResults.violations).toEqual([]);
+  await page.emulateMedia({colorScheme: 'light'});
+}

tests/e2e/shared/forms.ts

@@ -1,17 +1,14 @@
 import {expect, type Page} from '@playwright/test';
-import {AxeBuilder} from '@axe-core/playwright';
+import {accessibilityCheck} from './accessibility.ts';
 
 export async function validate_form({page}: {page: Page}, scope: 'form' | 'fieldset' = 'form') {
-  const accessibilityScanResults = await new AxeBuilder({page})
+  const excludedElements = [
-    // disable checking for link style - should be fixed, but not now
-    .disableRules('link-in-text-block')
-    .include(scope)
     // exclude automated tooltips from accessibility scan, remove when fixed
-    .exclude('span[data-tooltip-content')
+    'span[data-tooltip-content',
     // exclude weird non-semantic HTML disabled content
-    .exclude('.disabled')
+    '.disabled',
-    .analyze();
+  ];
-  expect(accessibilityScanResults.violations).toEqual([]);
+  await accessibilityCheck({page}, [scope], excludedElements, []);
 
   // assert CSS properties that needed to be overriden for forms (ensure they remain active)
   const boxes = page.getByRole('checkbox').or(page.getByRole('radio'));