feat(a11y): fix WCAG 2.2 accessibility issues (wave 1 + 2) - #2612
Merged
Conversation
github-actions
Bot
added
area/frontend
Preview DeploymentPreview deployments for this PR are available at:
The preview environment will start automatically on first visit. Subsequent pushes to this PR will update the Run locally with Dockerdocker pull ghcr.io/go-vikunja/vikunja:pr-2612
docker run -p 3456:3456 ghcr.io/go-vikunja/vikunja:pr-2612Last updated for commit 9d25864 |
tink-bot
force-pushed
the
feat-a11y-fixes
branch
from
April 20, 2026 19:02
edaf920 to
8dcee6f
Compare
Adds a visually-hidden skip-to-content link as the first focusable element. Adds id='main-content' to the <main> element. Changes <section> to <main> on auth pages for proper landmark navigation. Fixes WCAG 2.4.1 (Bypass Blocks).
Adds aria-label to sidebar toggle, mobile overlay, banner close, modal close, quick actions close, task detail close, and dropdown trigger buttons. Adds triggerLabel prop to Dropdown component. Fixes WCAG 4.1.2 (Name, Role, Value).
Adds role='status' and aria-live='polite' to the notification container so screen readers announce status messages. Fixes WCAG 4.1.3 (Status Messages).
Passes aria-label to the <dialog> element via attribute inheritance so screen readers announce the dialog's purpose. Fixes WCAG 4.1.2 (Name, Role, Value).
Adds autocomplete prop to Password component (defaults to 'current-password'). Register page passes 'new-password' so password managers offer to generate a strong password. Fixes WCAG 1.3.5 (Identify Input Purpose).
Changes aria-label from 'Overview' to 'Vikunja home' so the accessible name includes the visible text. Fixes WCAG 2.5.3 (Label in Name).
Adds aria-invalid, aria-describedby, and role='alert' to error messages in FormField and Password components so screen readers announce validation errors. Fixes WCAG 3.3.1 (Error Identification).
Adds aria-label to the color input and sort select elements so screen readers announce their purpose. Fixes WCAG 3.3.2 (Labels or Instructions).
- Home: greeting H2 → H1 (page needs a top-level heading) - Task detail: task ID H1 → span (only title should be H1) - Task detail: H6 breadcrumb → nav element - App header: project title H1 → span (avoids duplicate H1) Fixes WCAG 1.3.1 (Info and Relationships) and 2.4.6 (Headings).
Adds aria-label='Mark {task} as done' to task checkboxes so
screen readers can distinguish between them. Passes ariaLabel
prop through FancyCheckbox → BaseCheckbox → input.
Fixes WCAG 2.4.6 (Headings and Labels).
Wire aria-invalid, aria-describedby and role=alert on the form primitive components so errors raised directly on FormInput or FormSelect are announced by assistive tech and programmatically linked to the control.
tink-bot
force-pushed
the
feat-a11y-fixes
branch
from
April 21, 2026 11:31
a245cc3 to
0aa8c30
Compare
kolaente
enabled auto-merge
April 21, 2026 11:40
kolaente
added this pull request to the merge queue
Apr 21, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Fixes 12 WCAG 2.2 accessibility findings from an a11y audit — all frontend-only changes.
Critical (Level A):
<main>landmark on auth pages (WCAG 2.4.1)aria-labelon all icon-only buttons (WCAG 4.1.2)aria-liveregion on toast notifications (WCAG 4.1.3)aria-invalid/aria-describedby/role="alert"on form errors (WCAG 3.3.1)Major:
aria-labelon modal dialogs via attribute inheritance (WCAG 4.1.2)autocomplete="new-password"on register form (WCAG 1.3.5)aria-labelon color picker and sort select (WCAG 3.3.2)<nav>instead of<h6>(WCAG 1.3.1)Minor:
aria-labelmatches visible text (WCAG 2.5.3)aria-labelon task checkboxes (WCAG 2.4.6)font-weight: 700on active sidebar link for non-color distinction (WCAG 1.4.1)Test plan
autocomplete="new-password"in DOM