github-starred/vikunja
2
0
Fork 0
mirror of https://github.com/go-vikunja/vikunja.git synced 2026-05-06 03:27:53 -05:00
Code Issues 690 Packages Projects Releases 11 Wiki Activity

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

New Issue
Open
opened 2026-04-16 13:51:43 -05:00 by GiteaMirror · 0 comments
GiteaMirror commented 2026-04-16 13:51:43 -05:00
Owner
Copy Link

📋 Pull Request Information

Original PR: https://github.com/go-vikunja/vikunja/pull/2612
Author: @tink-bot
Created: 4/12/2026
Status: 🔄 Open

Base: main ← Head: feat-a11y-fixes

📝 Commits (10+)

  • 75a51f8 feat(a11y): add i18n keys for accessibility labels
  • 8be00a6 feat(a11y): add skip navigation link and main landmark on auth pages
  • 32b7c29 feat(a11y): add accessible names to icon-only buttons
  • b396351 feat(a11y): add aria-live region to toast notifications
  • dcfd8a9 feat(a11y): add accessible names to modal dialogs
  • 7863374 feat(a11y): use autocomplete='new-password' on register form
  • c9a4460 feat(a11y): fix logo link accessible name to include 'Vikunja'
  • 6d05835 feat(a11y): associate form errors with input fields
  • 51ffe63 feat(a11y): add labels to color picker and sort select
  • 09d67ba feat(a11y): fix heading hierarchy across pages

📊 Changes

33 files changed (+126 additions, -29 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 (+9 -1)
📝 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)
📝 frontend/src/components/project/views/ProjectKanban.vue (+1 -0)
📝 frontend/src/components/quick-actions/QuickActions.vue (+1 -0)

...and 13 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:** 🔄 Open **Base:** `main` ← **Head:** `feat-a11y-fixes` --- ### 📝 Commits (10+) - [`75a51f8`](https://github.com/go-vikunja/vikunja/commit/75a51f8747c5ee5ddca59a5c8dc70ed33d0fca0e) feat(a11y): add i18n keys for accessibility labels - [`8be00a6`](https://github.com/go-vikunja/vikunja/commit/8be00a6f284651567b1637c9a6e9ad14bb2f7071) feat(a11y): add skip navigation link and main landmark on auth pages - [`32b7c29`](https://github.com/go-vikunja/vikunja/commit/32b7c29783432101f6da5f45fe76fff3019244ae) feat(a11y): add accessible names to icon-only buttons - [`b396351`](https://github.com/go-vikunja/vikunja/commit/b396351ed4c8bfa6c4ac720a822b33f79dc21a7c) feat(a11y): add aria-live region to toast notifications - [`dcfd8a9`](https://github.com/go-vikunja/vikunja/commit/dcfd8a9457af110b340bb019275d403ee63c0033) feat(a11y): add accessible names to modal dialogs - [`7863374`](https://github.com/go-vikunja/vikunja/commit/786337439efcc9da38bec8c98b12f784c7c030ca) feat(a11y): use autocomplete='new-password' on register form - [`c9a4460`](https://github.com/go-vikunja/vikunja/commit/c9a4460cddb1a528841ba6551bb418732ef73f67) feat(a11y): fix logo link accessible name to include 'Vikunja' - [`6d05835`](https://github.com/go-vikunja/vikunja/commit/6d058351dfa3a4a1dd0962d99efd813ed5030a76) feat(a11y): associate form errors with input fields - [`51ffe63`](https://github.com/go-vikunja/vikunja/commit/51ffe63ce92909c0b01295643d11b19b0a36c109) feat(a11y): add labels to color picker and sort select - [`09d67ba`](https://github.com/go-vikunja/vikunja/commit/09d67ba2648a99bb67f0446b0589326d060fae40) feat(a11y): fix heading hierarchy across pages ### 📊 Changes **33 files changed** (+126 additions, -29 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` (+9 -1) 📝 `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) 📝 `frontend/src/components/project/views/ProjectKanban.vue` (+1 -0) 📝 `frontend/src/components/quick-actions/QuickActions.vue` (+1 -0) _...and 13 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-16 13:51:43 -05:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
area/api
area/attachments
area/auth
area/avatars
area/backup-restore
area/caldav
area/calendar-view
area/comments
area/config
area/database
area/desktop
area/docker
area/email
area/favorites
area/filters
area/frontend
area/gantt
area/i18n
area/import-export
area/internal-code
area/kanban
area/labels
area/list-view
area/mobile
area/notifications
area/permissions
area/projects
area/pwa
area/recurring-tasks
area/reminders
area/search
area/shortcuts
area/subtasks
area/sync
area/table-view
area/task-editor
area/task-metadata
area/task-relations
area/teams
area/theming
area/time-tracking
area/typesense
area/views
area/webhooks
bug
changes requested
concern/accessibility
concern/performance
concern/regression
concern/ux
confirmed
db/mysql
dependencies
enhancement
good first issue
help wanted
integration/inbound
integration/outbound
kind/bug
kind/feature
needs reproduction
pull-request
Mirrored from GitHub Pull Request
 question
security
support
upstream issue
waiting for reply
wontfix
No Label pull-request
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
GiteaMirror ninjasurge
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: github-starred/vikunja#5768
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?