feat(a11y): WCAG 2.2 AA scan harness, Accessible theme, and name/role fixes

docs/docs/features.md

@@ -174,6 +174,7 @@ TestPlanIt is a comprehensive test management platform designed to help teams pl
 - **Custom statuses** - Create statuses with custom icons and colors
 - **Templates** - Create templates for consistent test case structure
 - **User preferences** - Configure theme, locale, timezone, and date/time formats; preference selections are visible from the profile view as well as the editor
+- **Accessible theme** - Opt-in high-contrast theme tuned for WCAG 2.2 Level AA (stronger contrast, larger interactive targets, visible focus), selectable per user without affecting other themes
 - **Configurations** - Author OS / browser / environment configurations scoped to projects, with an admin UX overhaul covering bulk assign and search
 
 ### Security & Compliance

docs/docs/user-guide/user-menu.md

@@ -14,11 +14,24 @@ Once opened, the menu displays:
 1. **Your Name and Email**: Shown at the top for identification.
 2. **View Profile**: Navigates you directly to your **[User Profile](./user-profile.md)** page.
 3. **Theme**: Opens a sub-menu where you can select your preferred visual theme for the application.
-    - Options include Light, Dark, System (matches your operating system setting), Green, Orange, and Purple.
+    - Options include Light, Dark, System (matches your operating system setting), Green, Orange, Purple, and **Accessible**.
+    - **Accessible** is a high-contrast theme tuned for accessibility (WCAG 2.2 AA): it strengthens text and border contrast, enlarges small interactive targets, and adds a clearly visible keyboard focus ring. Choose it if you rely on these aids — see [Accessibility](#accessibility) below.
     - A checkmark indicates the currently active theme.
     - Selecting a new theme saves the preference to your profile and reloads the application to apply the change.
 4. **Language**: Opens a sub-menu to select the display language for the application interface.
     - Available languages are listed (e.g., English, Spanish).
     - A checkmark indicates the currently active language.
     - Selecting a new language saves the preference to your profile and reloads the application to apply the change.
 5. **Sign Out**: Logs you out of your current session and redirects you to the Sign In page.
+
+## Accessibility
+
+TestPlanIt includes an opt-in **Accessible** theme designed to meet the [WCAG 2.2](https://www.w3.org/TR/WCAG22/) Level AA presentation requirements. It is one of the regular theme choices in the **Theme** sub-menu (and on your [User Profile](./user-profile.md) preferences), so you can turn it on or off at any time without affecting other users.
+
+Compared to the default themes, the Accessible theme:
+
+- **Increases contrast** for body text, secondary ("muted") text, and UI borders so content meets the minimum contrast ratio.
+- **Enlarges small interactive targets** (such as compact icon buttons and toggles) to at least the recommended minimum size.
+- **Adds a high-contrast keyboard focus ring** so the currently focused control is always clearly visible.
+
+Your selection is saved to your profile and persists across sessions and devices. The other themes are left unchanged, so teammates who prefer them are unaffected.

docs/docs/user-guide/user-profile.md

@@ -63,7 +63,7 @@ When viewing your own profile, you can view and edit these preferences:
 
 #### Display Preferences
 
-- **Theme**: Choose from Light, Dark, System, Green, Orange, or Purple themes (with color indicators)
+- **Theme**: Choose from Light, Dark, System, Green, Orange, Purple, or **Accessible** themes (with color indicators). The Accessible theme is a high-contrast option tuned for [WCAG 2.2](https://www.w3.org/TR/WCAG22/) Level AA — see [Accessibility](./user-menu.md#accessibility)
 - **Locale**: Language preference (English, German, Spanish, French, Italian, Dutch, Polish, Portuguese, Turkish, Vietnamese, Russian, Chinese Simplified, Chinese Traditional, Japanese, Korean)
 - **Items Per Page**: Number of items to show in paginated tables (10, 25, 50, 100)
 

testplanit/.gitignore

@@ -61,6 +61,12 @@ e2e/playwright-report/
 e2e/test-results/
 .env.e2e
 
+# Accessibility scan (e2e/a11y) — never commit results, seeded fixtures, or reports
+e2e/a11y/results/
+e2e/a11y/.a11y-fixtures.json
+e2e/a11y/playwright-report/
+e2e/a11y/test-results/
+
 # DB backups
 backups/
 

testplanit/app/[locale]/admin/app-config/columns.tsx

@@ -84,6 +84,7 @@ export function getColumns(
             variant="ghost"
             className="px-2 py-1 h-auto"
             data-testid="edit-config-button"
+            aria-label={t("actions.edit")}
             onClick={() => onEditConfig?.(row.original)}
           >
             <Edit className="h-4 w-4" />
@@ -92,6 +93,7 @@ export function getColumns(
             variant="destructive"
             className="px-2 py-1 h-auto"
             data-testid="delete-config"
+            aria-label={t("actions.delete")}
             onClick={() => onDeleteConfig?.(row.original)}
           >
             <Trash2 className="h-4 w-4" />

testplanit/app/[locale]/admin/code-repositories/columns.tsx

@@ -168,6 +168,7 @@ export function getColumns({
             size="icon"
             className="px-2 py-1 h-auto"
             onClick={() => onEdit(row.original)}
+            aria-label={tCommon("actions.edit")}
           >
             <Edit className="h-4 w-4" />
           </Button>
@@ -176,6 +177,7 @@ export function getColumns({
             size="icon"
             className="px-2 py-1 h-auto"
             onClick={() => onDelete(row.original)}
+            aria-label={tCommon("actions.delete")}
           >
             <Trash2 className="h-4 w-4" />
           </Button>

testplanit/app/[locale]/admin/configurations/categoryColumns.tsx

@@ -135,13 +135,15 @@ export const useColumns = (
               variant="ghost"
               className="px-2 py-1 h-auto"
               onClick={() => onEditCategory?.(row.original)}
+              aria-label={tCommon("actions.edit")}
             >
               <SquarePen className="h-5 w-5" />
             </Button>
             <Button
               variant="destructive"
               className="px-2 py-1 h-auto"
               onClick={() => onDeleteCategory?.(row.original)}
+              aria-label={tCommon("actions.delete")}
             >
               <Trash2 className="h-5 w-5" />
             </Button>

testplanit/app/[locale]/admin/configurations/configColumns.tsx

@@ -329,13 +329,15 @@ export const useColumns = (
               variant="ghost"
               className="px-2 py-1 h-auto"
               onClick={() => onEditConfiguration?.(row.original)}
+              aria-label={t("actions.edit")}
             >
               <SquarePen className="h-5 w-5" />
             </Button>
             <Button
               variant="destructive"
               className="px-2 py-1 h-auto"
               onClick={() => onDeleteConfiguration?.(row.original)}
+              aria-label={t("actions.delete")}
             >
               <Trash2 className="h-5 w-5" />
             </Button>

testplanit/app/[locale]/admin/fields/caseFieldColumns.tsx

@@ -96,6 +96,7 @@ export const useColumns = (
         cell: ({ row }) => (
           <div className="text-center">
             <Switch
+              aria-label={tCommon("fields.enabled")}
               checked={row.original.isEnabled}
               onCheckedChange={(checked) =>
                 handleToggle(row.original.id, "isEnabled", checked)
@@ -114,6 +115,7 @@ export const useColumns = (
         cell: ({ row }) => (
           <div className="text-center">
             <Switch
+              aria-label={tCommon("fields.required")}
               checked={row.original.isRequired}
               onCheckedChange={(checked) =>
                 handleToggle(row.original.id, "isRequired", checked)
@@ -132,6 +134,7 @@ export const useColumns = (
         cell: ({ row }) => (
           <div className="text-center">
             <Switch
+              aria-label={tCommon("fields.restricted")}
               checked={row.original.isRestricted}
               onCheckedChange={(checked) =>
                 handleToggle(row.original.id, "isRestricted", checked)
@@ -155,6 +158,7 @@ export const useColumns = (
               className="px-2 py-1 h-auto"
               data-testid="edit-case-field-button"
               onClick={() => onEditCaseField?.(row.original)}
+              aria-label={tCommon("actions.edit")}
             >
               <SquarePen className="h-5 w-5" />
             </Button>
@@ -163,6 +167,7 @@ export const useColumns = (
               className="px-2 py-1 h-auto"
               data-testid="delete-case-field-button"
               onClick={() => onDeleteCaseField?.(row.original)}
+              aria-label={tCommon("actions.delete")}
             >
               <Trash2 className="h-5 w-5" />
             </Button>

testplanit/app/[locale]/admin/fields/resultFieldColumns.tsx

@@ -95,6 +95,7 @@ export const useColumns = (
         cell: ({ row }) => (
           <div className="text-center">
             <Switch
+              aria-label={tCommon("fields.enabled")}
               checked={row.original.isEnabled}
               onCheckedChange={(checked) =>
                 handleToggle(row.original.id, "isEnabled", checked)
@@ -113,6 +114,7 @@ export const useColumns = (
         cell: ({ row }) => (
           <div className="text-center">
             <Switch
+              aria-label={tCommon("fields.required")}
               checked={row.original.isRequired}
               onCheckedChange={(checked) =>
                 handleToggle(row.original.id, "isRequired", checked)
@@ -131,6 +133,7 @@ export const useColumns = (
         cell: ({ row }) => (
           <div className="text-center">
             <Switch
+              aria-label={tCommon("fields.restricted")}
               checked={row.original.isRestricted}
               onCheckedChange={(checked) =>
                 handleToggle(row.original.id, "isRestricted", checked)
@@ -154,6 +157,7 @@ export const useColumns = (
               className="px-2 py-1 h-auto"
               data-testid="edit-result-field-button"
               onClick={() => onEditResultField?.(row.original)}
+              aria-label={tCommon("actions.edit")}
             >
               <SquarePen className="h-5 w-5" />
             </Button>
@@ -162,6 +166,7 @@ export const useColumns = (
               className="px-2 py-1 h-auto"
               data-testid="delete-result-field-button"
               onClick={() => onDeleteResultField?.(row.original)}
+              aria-label={tCommon("actions.delete")}
             >
               <Trash2 className="h-5 w-5" />
             </Button>

testplanit/app/[locale]/admin/fields/templateColumns.tsx

@@ -90,6 +90,7 @@ export const useColumns = (
         cell: ({ row }) => (
           <div className="text-center">
             <Switch
+              aria-label={tCommon("fields.enabled")}
               checked={row.original.isEnabled}
               onCheckedChange={(checked) =>
                 handleToggleEnabled(row.original.id, checked)
@@ -109,6 +110,7 @@ export const useColumns = (
         cell: ({ row }) => (
           <div className="text-center">
             <Switch
+              aria-label={tCommon("fields.default")}
               checked={row.original.isDefault}
               disabled={row.original.isDefault}
               onCheckedChange={(checked) =>
@@ -132,6 +134,7 @@ export const useColumns = (
               variant="ghost"
               className="px-2 py-1 h-auto"
               data-testid="edit-template-button"
+              aria-label={tCommon("actions.edit")}
               onClick={() => onEditTemplate?.(row.original)}
             >
               <SquarePen className="h-5 w-5" />
@@ -141,6 +144,7 @@ export const useColumns = (
                 variant="ghost"
                 className="px-2 py-1 h-auto text-muted-foreground cursor-not-allowed"
                 disabled
+                aria-label={tCommon("actions.delete")}
               >
                 <Trash2 className="h-5 w-5" />
               </Button>

testplanit/app/[locale]/admin/groups/columns.tsx

@@ -80,13 +80,15 @@ export const useColumns = (
               variant="ghost"
               className="px-2 py-1 h-auto"
               onClick={() => onEditGroup?.(row.original)}
+              aria-label={t("actions.edit")}
             >
               <SquarePen className="h-4 w-4" />
             </Button>
             <Button
               variant="destructive"
               className="px-2 py-1 h-auto"
               onClick={() => onDeleteGroup?.(row.original)}
+              aria-label={t("actions.delete")}
             >
               <Trash2 className="h-5 w-5" />
             </Button>

testplanit/app/[locale]/admin/issues/columns.tsx

@@ -449,13 +449,15 @@
               variant="ghost"
               className="px-2 py-1 h-auto"
               onClick={() => onEditIssue?.(row.original)}
+              aria-label={tCommon("actions.edit")}
             >
               <SquarePen className="h-5 w-5" />
             </Button>
             <Button
               variant="destructive"
               className="px-2 py-1 h-auto"
               onClick={() => onDeleteIssue?.(row.original)}
+              aria-label={tCommon("actions.delete")}
             >
               <Trash2 className="h-5 w-5" />
             </Button>
@@ -463,6 +465,6 @@
         ),
       },
     ],
     [tCommon, onEditIssue, onDeleteIssue]
   );
 }

testplanit/app/[locale]/admin/llm/columns.tsx

@@ -279,6 +279,7 @@ export const useColumns = (
               onClick={() => onEditIntegration?.(row.original)}
               className="px-2 py-1 h-auto"
               data-testid="llm-edit-button"
+              aria-label={tCommon("actions.edit")}
             >
               <Edit className="h-4 w-4" />
             </Button>
@@ -298,6 +299,7 @@ export const useColumns = (
                   : undefined
               }
               data-testid="llm-delete-button"
+              aria-label={tCommon("actions.delete")}
             >
               <Trash2 className="h-8 w-8 shrink-0" />
             </Button>

testplanit/app/[locale]/admin/milestones/columns.tsx

@@ -67,6 +67,7 @@ export const useColumns = (
         cell: ({ row }) => (
           <div className="text-center">
             <Switch
+              aria-label={tCommon("fields.default")}
               checked={row.original.isDefault}
               disabled={row.original.isDefault}
               onCheckedChange={(checked) =>
@@ -90,6 +91,7 @@ export const useColumns = (
               variant="ghost"
               className="px-2 py-1 h-auto"
               onClick={() => onEditMilestoneType?.(row.original)}
+              aria-label={tCommon("actions.edit")}
             >
               <SquarePen className="h-5 w-5" />
             </Button>
@@ -98,6 +100,7 @@ export const useColumns = (
                 variant="ghost"
                 className="px-2 py-1 h-auto text-muted-foreground cursor-not-allowed"
                 disabled
+                aria-label={tCommon("actions.delete")}
               >
                 <Trash2 className="h-5 w-5" />
               </Button>
@@ -106,6 +109,7 @@ export const useColumns = (
                 variant="destructive"
                 className="px-2 py-1 h-auto"
                 onClick={() => onDeleteMilestoneType?.(row.original)}
+                aria-label={tCommon("actions.delete")}
               >
                 <Trash2 className="h-5 w-5" />
               </Button>

testplanit/app/[locale]/admin/projects/columns.tsx

@@ -260,6 +260,7 @@ export const useColumns = (
         cell: ({ row }) => (
           <div className="text-center">
             <Switch
+              aria-label={tCommon("fields.completed")}
               checked={row.original.isCompleted}
               onCheckedChange={(checked) =>
                 handleToggleCompleted(row.original.id, checked)
@@ -312,6 +313,7 @@ export const useColumns = (
               size="icon"
               onClick={() => handleOpenEditModal(row.original)}
               className="px-2 py-1 h-auto"
+              aria-label={tCommon("actions.edit")}
             >
               <SquarePen className="h-4 w-4" />
             </Button>
@@ -320,6 +322,7 @@ export const useColumns = (
               size="icon"
               className="px-2 py-1 h-auto"
               onClick={() => onDeleteProject?.(row.original)}
+              aria-label={tCommon("actions.delete")}
             >
               <Trash2 className="h-4 w-4" />
             </Button>