83d2b3b7fa
UX/Translation changes: - new teams: remove redundant tooltips that don't add meaningful information - move general information to table fieldset - new teams: rename "general" to "custom" access for clarity - new teams: show labels beside options on mobile Accessibility: - semantic form elements allow easier navigation (fieldset, mostly) - improve better labelling of new teams table - fix accessibility scan issues - TODO: the parts that "disable" form elements were not yet touched and are not really accessible to screenreaders Technical: - replace two JavaScript solutions with one CSS standard - implement a simpler grid (.simple-grid) - simplify markup - remove some webhook settings specific CSS Testing: - check more form content for accessibility issues - but exclude tooltips from the scan :( - reuse existing form tests from previous PR
20 lines
817 B
JavaScript
20 lines
817 B
JavaScript
import {expect} from '@playwright/test';
|
|
import AxeBuilder from '@axe-core/playwright';
|
|
|
|
export async function validate_form({page}, scope) {
|
|
scope ??= 'form';
|
|
const accessibilityScanResults = await new AxeBuilder({page})
|
|
.include(scope)
|
|
// exclude automated tooltips from accessibility scan, remove when fixed
|
|
.exclude('span[data-tooltip-content')
|
|
.analyze();
|
|
expect(accessibilityScanResults.violations).toEqual([]);
|
|
|
|
// assert CSS properties that needed to be overriden for forms (ensure they remain active)
|
|
const boxes = page.getByRole('checkbox').or(page.getByRole('radio'));
|
|
for (const b of await boxes.all()) {
|
|
await expect(b).toHaveCSS('margin-left', '0px');
|
|
await expect(b).toHaveCSS('margin-top', '0px');
|
|
await expect(b).toHaveCSS('vertical-align', 'baseline');
|
|
}
|
|
}
|