[PR #2612] [MERGED] feat(a11y): fix WCAG 2.2 accessibility issues (wave 1 + 2) #8402

Closed
opened 2026-04-20 18:11:49 -05:00 by GiteaMirror · 0 comments
Owner

📋 Pull Request Information

Original PR: https://github.com/go-vikunja/vikunja/pull/2612
Author: @tink-bot
Created: 4/12/2026
Status: Merged
Merged: 4/21/2026
Merged by: @kolaente

Base: mainHead: feat-a11y-fixes


📝 Commits (10+)

  • 9e6e941 feat(a11y): add i18n keys for accessibility labels
  • 2638c04 feat(a11y): add skip navigation link and main landmark on auth pages
  • ebe7020 feat(a11y): add accessible names to icon-only buttons
  • d53c9e5 feat(a11y): add aria-live region to toast notifications
  • 5f94f8c feat(a11y): add accessible names to modal dialogs
  • b7da217 feat(a11y): use autocomplete='new-password' on register form
  • 868fa0d feat(a11y): fix logo link accessible name to include 'Vikunja'
  • e85f580 feat(a11y): associate form errors with input fields
  • fdbd059 feat(a11y): add labels to color picker and sort select
  • 997a2a6 feat(a11y): fix heading hierarchy across pages

📊 Changes

34 files changed (+141 additions, -30 deletions)

View changed files

📝 frontend/src/App.vue (+6 -0)
📝 frontend/src/components/base/BaseCheckbox.vue (+3 -0)
📝 frontend/src/components/home/AddToHomeScreen.vue (+1 -0)
📝 frontend/src/components/home/AppHeader.vue (+3 -3)
📝 frontend/src/components/home/ContentAuth.vue (+4 -0)
📝 frontend/src/components/home/DemoMode.vue (+1 -0)
📝 frontend/src/components/home/Navigation.vue (+1 -1)
📝 frontend/src/components/input/ColorPicker.vue (+1 -0)
📝 frontend/src/components/input/FancyCheckbox.vue (+4 -1)
📝 frontend/src/components/input/FormField.vue (+15 -2)
📝 frontend/src/components/input/FormInput.vue (+5 -0)
📝 frontend/src/components/input/FormSelect.vue (+5 -0)
📝 frontend/src/components/input/Password.vue (+9 -2)
📝 frontend/src/components/misc/CreateEdit.vue (+1 -0)
📝 frontend/src/components/misc/Dropdown.vue (+3 -0)
📝 frontend/src/components/misc/Modal.test.ts (+14 -0)
📝 frontend/src/components/misc/Modal.vue (+1 -0)
📝 frontend/src/components/misc/NoAuthWrapper.vue (+5 -2)
📝 frontend/src/components/misc/Notification.vue (+2 -0)
📝 frontend/src/components/project/partials/SortPopup.vue (+4 -1)

...and 14 more files

📄 Description

Fixes 12 WCAG 2.2 accessibility findings from an a11y audit — all frontend-only changes.

Critical (Level A):

  • Skip-to-content link + <main> landmark on auth pages (WCAG 2.4.1)
  • aria-label on all icon-only buttons (WCAG 4.1.2)
  • aria-live region on toast notifications (WCAG 4.1.3)
  • aria-invalid / aria-describedby / role="alert" on form errors (WCAG 3.3.1)

Major:

  • aria-label on modal dialogs via attribute inheritance (WCAG 4.1.2)
  • autocomplete="new-password" on register form (WCAG 1.3.5)
  • aria-label on color picker and sort select (WCAG 3.3.2)
  • Heading hierarchy: single H1 per page, breadcrumb <nav> instead of <h6> (WCAG 1.3.1)

Minor:

  • Logo link aria-label matches visible text (WCAG 2.5.3)
  • Descriptive aria-label on task checkboxes (WCAG 2.4.6)
  • font-weight: 700 on active sidebar link for non-color distinction (WCAG 1.4.1)

Test plan

  • Tab through the login page — skip link appears on first Tab press and jumps to main content
  • Tab through authenticated pages — icon-only buttons announce their purpose in screen reader
  • Open a modal dialog — screen reader announces dialog name
  • Register page password field has autocomplete="new-password" in DOM
  • Active sidebar item is visually bold in addition to colored

🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.

## 📋 Pull Request Information **Original PR:** https://github.com/go-vikunja/vikunja/pull/2612 **Author:** [@tink-bot](https://github.com/tink-bot) **Created:** 4/12/2026 **Status:** ✅ Merged **Merged:** 4/21/2026 **Merged by:** [@kolaente](https://github.com/kolaente) **Base:** `main` ← **Head:** `feat-a11y-fixes` --- ### 📝 Commits (10+) - [`9e6e941`](https://github.com/go-vikunja/vikunja/commit/9e6e9416d9e9212059c158c6337c33dfd69c5b43) feat(a11y): add i18n keys for accessibility labels - [`2638c04`](https://github.com/go-vikunja/vikunja/commit/2638c04dab138fc1b136a887e4d5a0f4f70364b1) feat(a11y): add skip navigation link and main landmark on auth pages - [`ebe7020`](https://github.com/go-vikunja/vikunja/commit/ebe7020d023239875c63a1b0ca92fb60a6015a70) feat(a11y): add accessible names to icon-only buttons - [`d53c9e5`](https://github.com/go-vikunja/vikunja/commit/d53c9e53a73ce806f30bf9ba1facebfe1a00c516) feat(a11y): add aria-live region to toast notifications - [`5f94f8c`](https://github.com/go-vikunja/vikunja/commit/5f94f8cc2eb841c6a766e87f62bed619b462387a) feat(a11y): add accessible names to modal dialogs - [`b7da217`](https://github.com/go-vikunja/vikunja/commit/b7da217e3f5a48a0387720c373ab727e3be0f0eb) feat(a11y): use autocomplete='new-password' on register form - [`868fa0d`](https://github.com/go-vikunja/vikunja/commit/868fa0d89014966cd53a18c602cc0880c6936f71) feat(a11y): fix logo link accessible name to include 'Vikunja' - [`e85f580`](https://github.com/go-vikunja/vikunja/commit/e85f580c171864604de692e0fc158dc5a1231525) feat(a11y): associate form errors with input fields - [`fdbd059`](https://github.com/go-vikunja/vikunja/commit/fdbd059fb97e29555666d009dfabbead644b3eee) feat(a11y): add labels to color picker and sort select - [`997a2a6`](https://github.com/go-vikunja/vikunja/commit/997a2a6aa02f9e664b4e6dd921df6bf1e4abd3f7) feat(a11y): fix heading hierarchy across pages ### 📊 Changes **34 files changed** (+141 additions, -30 deletions) <details> <summary>View changed files</summary> 📝 `frontend/src/App.vue` (+6 -0) 📝 `frontend/src/components/base/BaseCheckbox.vue` (+3 -0) 📝 `frontend/src/components/home/AddToHomeScreen.vue` (+1 -0) 📝 `frontend/src/components/home/AppHeader.vue` (+3 -3) 📝 `frontend/src/components/home/ContentAuth.vue` (+4 -0) 📝 `frontend/src/components/home/DemoMode.vue` (+1 -0) 📝 `frontend/src/components/home/Navigation.vue` (+1 -1) 📝 `frontend/src/components/input/ColorPicker.vue` (+1 -0) 📝 `frontend/src/components/input/FancyCheckbox.vue` (+4 -1) 📝 `frontend/src/components/input/FormField.vue` (+15 -2) 📝 `frontend/src/components/input/FormInput.vue` (+5 -0) 📝 `frontend/src/components/input/FormSelect.vue` (+5 -0) 📝 `frontend/src/components/input/Password.vue` (+9 -2) 📝 `frontend/src/components/misc/CreateEdit.vue` (+1 -0) 📝 `frontend/src/components/misc/Dropdown.vue` (+3 -0) 📝 `frontend/src/components/misc/Modal.test.ts` (+14 -0) 📝 `frontend/src/components/misc/Modal.vue` (+1 -0) 📝 `frontend/src/components/misc/NoAuthWrapper.vue` (+5 -2) 📝 `frontend/src/components/misc/Notification.vue` (+2 -0) 📝 `frontend/src/components/project/partials/SortPopup.vue` (+4 -1) _...and 14 more files_ </details> ### 📄 Description Fixes 12 WCAG 2.2 accessibility findings from an a11y audit — all frontend-only changes. **Critical (Level A):** - Skip-to-content link + `<main>` landmark on auth pages (WCAG 2.4.1) - `aria-label` on all icon-only buttons (WCAG 4.1.2) - `aria-live` region on toast notifications (WCAG 4.1.3) - `aria-invalid` / `aria-describedby` / `role="alert"` on form errors (WCAG 3.3.1) **Major:** - `aria-label` on modal dialogs via attribute inheritance (WCAG 4.1.2) - `autocomplete="new-password"` on register form (WCAG 1.3.5) - `aria-label` on color picker and sort select (WCAG 3.3.2) - Heading hierarchy: single H1 per page, breadcrumb `<nav>` instead of `<h6>` (WCAG 1.3.1) **Minor:** - Logo link `aria-label` matches visible text (WCAG 2.5.3) - Descriptive `aria-label` on task checkboxes (WCAG 2.4.6) - `font-weight: 700` on active sidebar link for non-color distinction (WCAG 1.4.1) ## Test plan - Tab through the login page — skip link appears on first Tab press and jumps to main content - Tab through authenticated pages — icon-only buttons announce their purpose in screen reader - Open a modal dialog — screen reader announces dialog name - Register page password field has `autocomplete="new-password"` in DOM - Active sidebar item is visually bold in addition to colored --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>
GiteaMirror added the pull-request label 2026-04-20 18:11:49 -05:00
GiteaMirror changed title from [PR #2612] feat(a11y): fix WCAG 2.2 accessibility issues (wave 1 + 2) to [PR #2612] [MERGED] feat(a11y): fix WCAG 2.2 accessibility issues (wave 1 + 2) 2026-04-23 09:24:10 -05:00
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: github-starred/vikunja#8402