italia / italia/publiccode-editor

Reach WCAG 2.2 AA and EN 301549 conformance

Open
#646 0 comments 0 reactions 0 assignees View on GitHub
enhancement
Dominant language
TypeScript
Stars
32
Forks
33
Avg merge
3d 15h
Merged PRs (30d)
16

Description

## Context

Derived from requirement **RF-PCE-001**

## Scope

Bring the editor to full accessibility conformance, through both automated testing and
manual verification by a qualified web accessibility expert:

- Set up automated accessibility checks and wire them into CI, so regressions are caught
on every pull request.
- Run a manual audit covering what automation cannot reach: keyboard-only navigation,
focus order and focus visibility, screen reader output, and the behaviour of the
dynamic panels (validation warnings, live YAML preview, settings).
- Fix the violations found, prioritising the ones already reported in #566.
- Produce an audit report usable as the basis for the accessibility statement,
following the AgID self-assessment model.

Target conformance: **WCAG 2.2 level AA** and **EN 301549** (UNI EN 301549:2021), as
required by the Italian ICT accessibility guidelines.

## Affected areas

Accessibility is cross-cutting, but the highest-risk surfaces are:

- `src/app/components/Editor*.tsx` — the form controls, which carry most of the
labelling, grouping and error-association burden.
- `src/app/components/WarningBox.tsx` — validation results, which update dynamically
and need to be announced to assistive technology.
- `src/app/components/YamlPreview.tsx` — the live-updating YAML panel.
- `src/app/App.tsx` — the resizable two-panel layout (`react-resizable-panels`), whose
drag handles need keyboard operability, plus the mobile stacked layout.
- `src/app/components/Head.tsx`, `SettingsPanel.tsx` — navigation and dialog semantics.
- `.github/workflows/test.yml` — where the automated checks should run.

Where a defect originates in Design React Kit or Bootstrap Italia rather than in this
codebase, the fix should be contributed upstream rather than patched locally.

## Non-functional constraints

- **RNF-PCE-002 — Cloud-native architecture**: the automated accessibility checks must
run in the existing GitHub Actions pipeline, not as a manual local step.
- **RNF-PCE-004 — Standards and compliance**: conformance is measured against the AgID
guidelines; the audit output must fit the AgID self-assessment model.
- **RNF-PCE-006 — Long-term sustainability**: accessibility must not regress after this
work, so the checks belong in CI permanently and the dependency update policy has to
account for the design system components the editor relies on.

## Acceptance criteria

- [ ] Automated accessibility checks run in CI and fail the build on new violations
- [ ] Manual audit performed by a qualified web accessibility expert, covering keyboard
navigation, focus order and visibility, and screen reader output
- [ ] All WCAG 2.2 level AA success criteria met across form, preview, warnings and
settings
- [ ] EN 301549 conformance verified
- [ ] Violations listed in the FastPass report attached to #566 triaged, and either
fixed or documented with a rationale
- [ ] Audit report produced, suitable as input for the accessibility statement

## Related

- #566 — reports concrete WCAG violations with a FastPass export; this issue covers the
same ground with the full conformance target, so #566 is the starting backlog
- #619 — earlier a11y review, closed

Contributor guide

Open the contributing guide

Research direction

Start with the FastPass violations referenced in #566, then inspect src/app/components/Editor*.tsx, WarningBox.tsx, YamlPreview.tsx, App.tsx, Head.tsx, SettingsPanel.tsx, and .github/workflows/test.yml. Map automated checks and manual audit coverage to the listed WCAG 2.2 AA and EN 301549 criteria. Done means CI catches new violations, the reported issues are triaged, and the audit report supports the AgID accessibility statement.

Written by the indexing model from the issue text.

Assessment

Tech stack
github-actions, react, typescript
Domain
accessibility, ci-cd, documentation, frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Active
Clarity
Mostly clear
Newbie friendliness
28/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.