fix(a11y): sweep focus:ring-primary/50 to full-opacity ring for WCAG AA contrast (#1218)

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"
               />
               <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">

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"
             />
             <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"
               />
               <span
                 class="ml-2 px-2 py-0.5 rounded text-xs font-medium text-white td-dynamic-bg"

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>

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>

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"
       />
       <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>

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/50"
+          class="w-4 h-4 text-primary border-outline-variant rounded"
         />
         <!-- Color swatch always visible so users can identify labels before selecting -->
         <span