From 9ebf18844c726a7290daedd8d8c7938751836774 Mon Sep 17 00:00:00 2001
From: Chris0Jeky <jeky.tck@gmail.com>
Date: Thu, 2 Jul 2026 16:08:58 +0100
Subject: [PATCH 1/3] fix(a11y): sweep focus:ring-primary/50 to full-opacity
 ring for WCAG AA contrast (#1218)

Uniform mechanical sweep of all 18 remaining focus:ring-primary/50 usages
(6 board components incl. the canonical ColumnEditModal) to the full-opacity
focus:ring-primary treatment PR #1216 established on BoardSettingsModal:
50% primary on dark bg-surface-container-high (#2a2a2a) is ~2.8:1, below
the WCAG 2.1 AA 3:1 minimum for UI component indicators.
---
 .../src/components/board/ColumnEditModal.vue           |  6 +++---
 .../taskdeck-web/src/components/board/FilterPanel.vue  |  8 ++++----
 .../src/components/board/LabelManagerModal.vue         |  4 ++--
 .../components/board/card-modal/CardModalComments.vue  |  6 +++---
 .../src/components/board/card-modal/CardModalForm.vue  | 10 +++++-----
 .../components/board/card-modal/CardModalLabels.vue    |  2 +-
 6 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/frontend/taskdeck-web/src/components/board/ColumnEditModal.vue b/frontend/taskdeck-web/src/components/board/ColumnEditModal.vue
index 62f98ff47..6e56bcc79 100644
--- a/frontend/taskdeck-web/src/components/board/ColumnEditModal.vue
+++ b/frontend/taskdeck-web/src/components/board/ColumnEditModal.vue
@@ -122,7 +122,7 @@ useEscapeToClose(() => props.isOpen, handleClose)
               v-model="name"
               type="text"
               required
-              class="w-full px-3 py-2 bg-surface-container-high border border-outline-variant/40 rounded-md text-on-surface placeholder-on-surface-variant/50 focus:outline-none focus:ring-2 focus:ring-primary/50"
+              class="w-full px-3 py-2 bg-surface-container-high border border-outline-variant/40 rounded-md text-on-surface placeholder-on-surface-variant/50 focus:outline-none focus:ring-2 focus:ring-primary"
               placeholder="To Do"
             />
           </div>
@@ -134,7 +134,7 @@ useEscapeToClose(() => props.isOpen, handleClose)
                 id="column-has-wip-limit"
                 v-model="hasWipLimit"
                 type="checkbox"
-                class="w-4 h-4 text-primary border-outline-variant rounded focus:ring-primary/50"
+                class="w-4 h-4 text-primary border-outline-variant rounded focus:ring-primary"
               />
               <label for="column-has-wip-limit" class="ml-2 text-sm font-medium text-on-surface-variant">
                 Set WIP limit
@@ -150,7 +150,7 @@ useEscapeToClose(() => props.isOpen, handleClose)
                 type="number"
                 min="1"
                 required
-                class="w-full px-3 py-2 bg-surface-container-high border border-outline-variant/40 rounded-md text-on-surface placeholder-on-surface-variant/50 focus:outline-none focus:ring-2 focus:ring-primary/50"
+                class="w-full px-3 py-2 bg-surface-container-high border border-outline-variant/40 rounded-md text-on-surface placeholder-on-surface-variant/50 focus:outline-none focus:ring-2 focus:ring-primary"
                 placeholder="e.g., 3"
               />
               <p class="mt-1 text-xs text-on-surface-variant">
diff --git a/frontend/taskdeck-web/src/components/board/FilterPanel.vue b/frontend/taskdeck-web/src/components/board/FilterPanel.vue
index 79c8f88a3..83d07fd16 100644
--- a/frontend/taskdeck-web/src/components/board/FilterPanel.vue
+++ b/frontend/taskdeck-web/src/components/board/FilterPanel.vue
@@ -128,7 +128,7 @@ const hasActiveFilters = computed(() => {
             @input="updateFilters"
             type="text"
             placeholder="Search cards..."
-            class="w-full px-3 py-2 bg-surface-container-high border border-outline-variant/40 rounded-lg text-on-surface placeholder-on-surface-variant/50 focus:outline-none focus:ring-2 focus:ring-primary/50 text-sm"
+            class="w-full px-3 py-2 bg-surface-container-high border border-outline-variant/40 rounded-lg text-on-surface placeholder-on-surface-variant/50 focus:outline-none focus:ring-2 focus:ring-primary text-sm"
           />
         </div>
 
@@ -138,7 +138,7 @@ const hasActiveFilters = computed(() => {
             id="filter-due-date"
             v-model="localFilters.dueDateFilter"
             @change="updateFilters"
-            class="w-full px-3 py-2 bg-surface-container-high border border-outline-variant/40 rounded-lg text-on-surface focus:outline-none focus:ring-2 focus:ring-primary/50 text-sm"
+            class="w-full px-3 py-2 bg-surface-container-high border border-outline-variant/40 rounded-lg text-on-surface focus:outline-none focus:ring-2 focus:ring-primary text-sm"
           >
             <option value="all">All cards</option>
             <option value="overdue">Overdue</option>
@@ -155,7 +155,7 @@ const hasActiveFilters = computed(() => {
               v-model="localFilters.showBlockedOnly"
               @change="updateFilters"
               type="checkbox"
-              class="w-4 h-4 text-primary border-outline-variant rounded focus:ring-primary/50"
+              class="w-4 h-4 text-primary border-outline-variant rounded focus:ring-primary"
             />
             <span class="ml-2 text-sm text-on-surface">Show blocked only</span>
           </label>
@@ -181,7 +181,7 @@ const hasActiveFilters = computed(() => {
                 :checked="isLabelSelected(label.id)"
                 @change="toggleLabel(label.id)"
                 type="checkbox"
-                class="w-4 h-4 text-primary border-outline-variant rounded focus:ring-primary/50"
+                class="w-4 h-4 text-primary border-outline-variant rounded focus:ring-primary"
               />
               <span
                 class="ml-2 px-2 py-0.5 rounded text-xs font-medium text-white td-dynamic-bg"
diff --git a/frontend/taskdeck-web/src/components/board/LabelManagerModal.vue b/frontend/taskdeck-web/src/components/board/LabelManagerModal.vue
index bec5c9a25..6d2f61440 100644
--- a/frontend/taskdeck-web/src/components/board/LabelManagerModal.vue
+++ b/frontend/taskdeck-web/src/components/board/LabelManagerModal.vue
@@ -158,7 +158,7 @@ useEscapeToClose(() => props.isOpen, handleClose)
                 v-model="labelName"
                 type="text"
                 required
-                class="w-full px-3 py-2 bg-surface-container-high border border-outline-variant/40 rounded-md text-on-surface placeholder-on-surface-variant/50 focus:outline-none focus:ring-2 focus:ring-primary/50"
+                class="w-full px-3 py-2 bg-surface-container-high border border-outline-variant/40 rounded-md text-on-surface placeholder-on-surface-variant/50 focus:outline-none focus:ring-2 focus:ring-primary"
                 placeholder="e.g., Bug, Feature, Priority"
               />
             </div>
@@ -194,7 +194,7 @@ useEscapeToClose(() => props.isOpen, handleClose)
                   v-model="labelColor"
                   type="text"
                   pattern="^#[0-9A-Fa-f]{6}$"
-                  class="flex-1 px-3 py-1.5 bg-surface-container-high border border-outline-variant/40 rounded-md text-sm text-on-surface placeholder-on-surface-variant/50 focus:outline-none focus:ring-2 focus:ring-primary/50"
+                  class="flex-1 px-3 py-1.5 bg-surface-container-high border border-outline-variant/40 rounded-md text-sm text-on-surface placeholder-on-surface-variant/50 focus:outline-none focus:ring-2 focus:ring-primary"
                   placeholder="#3B82F6"
                 />
               </div>
diff --git a/frontend/taskdeck-web/src/components/board/card-modal/CardModalComments.vue b/frontend/taskdeck-web/src/components/board/card-modal/CardModalComments.vue
index 271477e78..1f916f6c9 100644
--- a/frontend/taskdeck-web/src/components/board/card-modal/CardModalComments.vue
+++ b/frontend/taskdeck-web/src/components/board/card-modal/CardModalComments.vue
@@ -36,7 +36,7 @@ function updateReplyDraft(commentId: string, value: string) {
         id="new-card-comment"
         v-model="newCommentContent"
         rows="2"
-        class="w-full px-3 py-2 bg-surface-container-high border border-outline-variant/40 rounded-md text-on-surface placeholder-on-surface-variant/50 focus:outline-none focus:ring-2 focus:ring-primary/50"
+        class="w-full px-3 py-2 bg-surface-container-high border border-outline-variant/40 rounded-md text-on-surface placeholder-on-surface-variant/50 focus:outline-none focus:ring-2 focus:ring-primary"
         placeholder="Write a comment... Use @username to mention teammates."
       ></textarea>
       <div class="flex justify-end">
@@ -92,7 +92,7 @@ function updateReplyDraft(commentId: string, value: string) {
             :value="editingCommentContent"
             aria-label="Edit comment"
             rows="2"
-            class="w-full px-3 py-2 bg-surface-container-high border border-outline-variant/40 rounded-md text-on-surface focus:outline-none focus:ring-2 focus:ring-primary/50"
+            class="w-full px-3 py-2 bg-surface-container-high border border-outline-variant/40 rounded-md text-on-surface focus:outline-none focus:ring-2 focus:ring-primary"
             @input="$emit('update:editingCommentContent', ($event.target as HTMLTextAreaElement).value)"
           ></textarea>
           <div class="flex justify-end gap-2">
@@ -146,7 +146,7 @@ function updateReplyDraft(commentId: string, value: string) {
               :value="replyDraftByParent[comment.id] ?? ''"
               aria-label="Reply to comment"
               rows="2"
-              class="w-full px-3 py-2 bg-surface-container-high border border-outline-variant/40 rounded-md text-on-surface placeholder-on-surface-variant/50 focus:outline-none focus:ring-2 focus:ring-primary/50"
+              class="w-full px-3 py-2 bg-surface-container-high border border-outline-variant/40 rounded-md text-on-surface placeholder-on-surface-variant/50 focus:outline-none focus:ring-2 focus:ring-primary"
               placeholder="Reply..."
               @input="updateReplyDraft(comment.id, ($event.target as HTMLTextAreaElement).value)"
             ></textarea>
diff --git a/frontend/taskdeck-web/src/components/board/card-modal/CardModalForm.vue b/frontend/taskdeck-web/src/components/board/card-modal/CardModalForm.vue
index ed0f509c6..8e1de74bd 100644
--- a/frontend/taskdeck-web/src/components/board/card-modal/CardModalForm.vue
+++ b/frontend/taskdeck-web/src/components/board/card-modal/CardModalForm.vue
@@ -29,7 +29,7 @@ defineEmits<{
       v-model="title"
       type="text"
       required
-      class="w-full px-3 py-2 bg-surface-container-high border border-outline-variant/40 rounded-md text-on-surface placeholder-on-surface-variant/50 focus:outline-none focus:ring-2 focus:ring-primary/50"
+      class="w-full px-3 py-2 bg-surface-container-high border border-outline-variant/40 rounded-md text-on-surface placeholder-on-surface-variant/50 focus:outline-none focus:ring-2 focus:ring-primary"
       placeholder="Card title"
     />
   </div>
@@ -43,7 +43,7 @@ defineEmits<{
       id="card-description"
       v-model="description"
       rows="4"
-      class="w-full px-3 py-2 bg-surface-container-high border border-outline-variant/40 rounded-md text-on-surface placeholder-on-surface-variant/50 focus:outline-none focus:ring-2 focus:ring-primary/50"
+      class="w-full px-3 py-2 bg-surface-container-high border border-outline-variant/40 rounded-md text-on-surface placeholder-on-surface-variant/50 focus:outline-none focus:ring-2 focus:ring-primary"
       placeholder="Add a more detailed description..."
     ></textarea>
   </div>
@@ -58,7 +58,7 @@ defineEmits<{
         id="card-due-date"
         v-model="dueDate"
         type="date"
-        class="flex-1 px-3 py-2 bg-surface-container-high border border-outline-variant/40 rounded-md text-on-surface focus:outline-none focus:ring-2 focus:ring-primary/50"
+        class="flex-1 px-3 py-2 bg-surface-container-high border border-outline-variant/40 rounded-md text-on-surface focus:outline-none focus:ring-2 focus:ring-primary"
       />
       <button
         v-if="dueDate"
@@ -82,7 +82,7 @@ defineEmits<{
         id="card-is-blocked"
         v-model="isBlocked"
         type="checkbox"
-        class="w-4 h-4 text-primary border-outline-variant rounded focus:ring-primary/50"
+        class="w-4 h-4 text-primary border-outline-variant rounded focus:ring-primary"
       />
       <label for="card-is-blocked" class="ml-2 text-sm font-medium text-on-surface-variant">
         Mark as blocked
@@ -97,7 +97,7 @@ defineEmits<{
         v-model="blockReason"
         rows="2"
         required
-        class="w-full px-3 py-2 bg-surface-container-high border border-outline-variant/40 rounded-md text-on-surface placeholder-on-surface-variant/50 focus:outline-none focus:ring-2 focus:ring-primary/50"
+        class="w-full px-3 py-2 bg-surface-container-high border border-outline-variant/40 rounded-md text-on-surface placeholder-on-surface-variant/50 focus:outline-none focus:ring-2 focus:ring-primary"
         placeholder="Why is this card blocked?"
       ></textarea>
     </div>
diff --git a/frontend/taskdeck-web/src/components/board/card-modal/CardModalLabels.vue b/frontend/taskdeck-web/src/components/board/card-modal/CardModalLabels.vue
index 27d4c0595..655aa488c 100644
--- a/frontend/taskdeck-web/src/components/board/card-modal/CardModalLabels.vue
+++ b/frontend/taskdeck-web/src/components/board/card-modal/CardModalLabels.vue
@@ -30,7 +30,7 @@ const selectedLabelIds = defineModel<string[]>('selectedLabelIds', { required: t
           v-model="selectedLabelIds"
           type="checkbox"
           :value="label.id"
-          class="w-4 h-4 text-primary border-outline-variant rounded focus:ring-primary/50"
+          class="w-4 h-4 text-primary border-outline-variant rounded focus:ring-primary"
         />
         <!-- Color swatch always visible so users can identify labels before selecting -->
         <span

From 7eb01c49d569ead87fa9d3ef03bf73cf7dbd2421 Mon Sep 17 00:00:00 2001
From: Chris0Jeky <jeky.tck@gmail.com>
Date: Thu, 2 Jul 2026 16:20:46 +0100
Subject: [PATCH 2/3] fix(a11y): MEDIUM sweep the last rendered ring-primary/50
 (selected-label state ring) to full opacity (#1218 review)

---
 .../src/components/board/card-modal/CardModalLabels.vue       | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/taskdeck-web/src/components/board/card-modal/CardModalLabels.vue b/frontend/taskdeck-web/src/components/board/card-modal/CardModalLabels.vue
index 655aa488c..51b193c57 100644
--- a/frontend/taskdeck-web/src/components/board/card-modal/CardModalLabels.vue
+++ b/frontend/taskdeck-web/src/components/board/card-modal/CardModalLabels.vue
@@ -20,7 +20,7 @@ const selectedLabelIds = defineModel<string[]>('selectedLabelIds', { required: t
         class="inline-flex items-center gap-2 px-3 py-1.5 rounded-md text-sm font-medium transition-all cursor-pointer"
         :class="[
           selectedLabelIds.includes(label.id)
-            ? 'text-white ring-2 ring-offset-2 ring-primary/50 td-dynamic-bg'
+            ? 'text-white ring-2 ring-offset-2 ring-primary td-dynamic-bg'
             : 'text-on-surface bg-surface-container-high hover:bg-surface-container-highest',
         ]"
         :style="selectedLabelIds.includes(label.id) ? { '--td-dynamic-color': label.colorHex } : undefined"
@@ -30,7 +30,7 @@ const selectedLabelIds = defineModel<string[]>('selectedLabelIds', { required: t
           v-model="selectedLabelIds"
           type="checkbox"
           :value="label.id"
-          class="w-4 h-4 text-primary border-outline-variant rounded focus:ring-primary"
+          class="w-4 h-4 text-primary border-outline-variant rounded"
         />
         <!-- Color swatch always visible so users can identify labels before selecting -->
         <span

From 97806d1e7227c6428425f542b559ac5fcf6fd4dc Mon Sep 17 00:00:00 2001
From: Chris0Jeky <jeky.tck@gmail.com>
Date: Thu, 2 Jul 2026 16:20:46 +0100
Subject: [PATCH 3/3] fix(a11y): MEDIUM remove compile-proven dead
 focus:ring-primary from 5 checkboxes (#1218 review)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Without a ring-width utility (focus:ring-2) and with no forms plugin,
focus:ring-primary only sets --tw-ring-color and paints nothing. Checkbox
keyboard focus is indicated by the global *:focus-visible box-shadow rule
(style.css) at 4.52:1 — already WCAG AA compliant.
---
 .../taskdeck-web/src/components/board/ColumnEditModal.vue     | 2 +-
 frontend/taskdeck-web/src/components/board/FilterPanel.vue    | 4 ++--
 .../src/components/board/card-modal/CardModalForm.vue         | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontend/taskdeck-web/src/components/board/ColumnEditModal.vue b/frontend/taskdeck-web/src/components/board/ColumnEditModal.vue
index 6e56bcc79..6310b0ee4 100644
--- a/frontend/taskdeck-web/src/components/board/ColumnEditModal.vue
+++ b/frontend/taskdeck-web/src/components/board/ColumnEditModal.vue
@@ -134,7 +134,7 @@ useEscapeToClose(() => props.isOpen, handleClose)
                 id="column-has-wip-limit"
                 v-model="hasWipLimit"
                 type="checkbox"
-                class="w-4 h-4 text-primary border-outline-variant rounded focus:ring-primary"
+                class="w-4 h-4 text-primary border-outline-variant rounded"
               />
               <label for="column-has-wip-limit" class="ml-2 text-sm font-medium text-on-surface-variant">
                 Set WIP limit
diff --git a/frontend/taskdeck-web/src/components/board/FilterPanel.vue b/frontend/taskdeck-web/src/components/board/FilterPanel.vue
index 83d07fd16..d73a50de4 100644
--- a/frontend/taskdeck-web/src/components/board/FilterPanel.vue
+++ b/frontend/taskdeck-web/src/components/board/FilterPanel.vue
@@ -155,7 +155,7 @@ const hasActiveFilters = computed(() => {
               v-model="localFilters.showBlockedOnly"
               @change="updateFilters"
               type="checkbox"
-              class="w-4 h-4 text-primary border-outline-variant rounded focus:ring-primary"
+              class="w-4 h-4 text-primary border-outline-variant rounded"
             />
             <span class="ml-2 text-sm text-on-surface">Show blocked only</span>
           </label>
@@ -181,7 +181,7 @@ const hasActiveFilters = computed(() => {
                 :checked="isLabelSelected(label.id)"
                 @change="toggleLabel(label.id)"
                 type="checkbox"
-                class="w-4 h-4 text-primary border-outline-variant rounded focus:ring-primary"
+                class="w-4 h-4 text-primary border-outline-variant rounded"
               />
               <span
                 class="ml-2 px-2 py-0.5 rounded text-xs font-medium text-white td-dynamic-bg"
diff --git a/frontend/taskdeck-web/src/components/board/card-modal/CardModalForm.vue b/frontend/taskdeck-web/src/components/board/card-modal/CardModalForm.vue
index 8e1de74bd..d69f97f54 100644
--- a/frontend/taskdeck-web/src/components/board/card-modal/CardModalForm.vue
+++ b/frontend/taskdeck-web/src/components/board/card-modal/CardModalForm.vue
@@ -82,7 +82,7 @@ defineEmits<{
         id="card-is-blocked"
         v-model="isBlocked"
         type="checkbox"
-        class="w-4 h-4 text-primary border-outline-variant rounded focus:ring-primary"
+        class="w-4 h-4 text-primary border-outline-variant rounded"
       />
       <label for="card-is-blocked" class="ml-2 text-sm font-medium text-on-surface-variant">
         Mark as blocked