italia / italia/publiccode-editor
Reach WCAG 2.2 AA and EN 301549 conformance
- 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
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