mirrors
/
forgejo
mirror of
1
Fork 0
Code Issues Releases Activity

tests(e2e): Separate accessibility and form checks 

- automatically test for light and dark themes
This commit is contained in:
Otto Richter 2024-11-11 18:44:55 +01:00
parent 634519e891
commit c17b4bdaeb
2 changed files with 41 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
tests/e2e/shared/accessibility.ts Normal file
View File

@ -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'});
}

15
tests/e2e/shared/forms.ts
View File

@ -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})
// disable checking for link style - should be fixed, but not now
.disableRules('link-in-text-block')
.include(scope)
const excludedElements = [
// 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')
.analyze();
expect(accessibilityScanResults.violations).toEqual([]);
'.disabled',
];
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'));