From 943b24c371f60acc290ef3745cc2fecd1170b37b Mon Sep 17 00:00:00 2001
From: Your Name <you@example.com>
Date: Sun, 15 Feb 2026 19:19:34 +0200
Subject: [PATCH] =?UTF-8?q?feat:=20accessibility=20pass=20=E2=80=94=20sema?=
 =?UTF-8?q?ntic=20HTML,=20ARIA,=20focus=20indicators,=20high=20contrast?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/board/BoardView.tsx     | 37 +++++++++++++++++++++++++-
 src/components/board/CardThumbnail.tsx |  2 ++
 src/components/board/KanbanColumn.tsx  | 26 ++++++++++--------
 src/index.css                          | 11 ++++++++
 4 files changed, 64 insertions(+), 12 deletions(-)

diff --git a/src/components/board/BoardView.tsx b/src/components/board/BoardView.tsx
index bb5437f..7c1e3f4 100644
--- a/src/components/board/BoardView.tsx
+++ b/src/components/board/BoardView.tsx
@@ -248,14 +248,49 @@ export function BoardView() {
 
   const columnIds = board.columns.map((c) => c.id);
 
+  const [announcement, setAnnouncement] = useState("");
+
+  const handleDragEndWithAnnouncement = useCallback(
+    (event: DragEndEvent) => {
+      handleDragEnd(event);
+      const { active, over } = event;
+      if (over && board) {
+        const type = active.data.current?.type;
+        if (type === "card") {
+          const card = board.cards[active.id as string];
+          const targetCol = over.data.current?.type === "column"
+            ? board.columns.find((c) => c.id === (over.data.current?.columnId ?? over.id))
+            : findColumnByCardId(board, over.id as string);
+          if (card && targetCol) {
+            setAnnouncement(`Moved card "${card.title}" to ${targetCol.title}`);
+          }
+        } else if (type === "column") {
+          const col = board.columns.find((c) => c.id === (active.id as string));
+          if (col) {
+            setAnnouncement(`Reordered column "${col.title}"`);
+          }
+        }
+      }
+    },
+    [handleDragEnd, board]
+  );
+
   return (
     <>
+    {/* Visually hidden live region for drag-and-drop announcements */}
+    <div
+      aria-live="polite"
+      aria-atomic="true"
+      className="sr-only"
+    >
+      {announcement}
+    </div>
     <DndContext
       sensors={sensors}
       collisionDetection={closestCorners}
       onDragStart={handleDragStart}
       onDragOver={handleDragOver}
-      onDragEnd={handleDragEnd}
+      onDragEnd={handleDragEndWithAnnouncement}
     >
       <SortableContext
         items={columnIds}
diff --git a/src/components/board/CardThumbnail.tsx b/src/components/board/CardThumbnail.tsx
index 88bb83b..483b4e2 100644
--- a/src/components/board/CardThumbnail.tsx
+++ b/src/components/board/CardThumbnail.tsx
@@ -53,6 +53,8 @@ export function CardThumbnail({ card, boardLabels, columnId, onCardClick }: Card
       transition={{ type: "spring", stiffness: 300, damping: 25 }}
       {...attributes}
       {...listeners}
+      role="article"
+      aria-label={card.title}
     >
       {/* Label dots */}
       {card.labels.length > 0 && (
diff --git a/src/components/board/KanbanColumn.tsx b/src/components/board/KanbanColumn.tsx
index 9b098d7..8becd30 100644
--- a/src/components/board/KanbanColumn.tsx
+++ b/src/components/board/KanbanColumn.tsx
@@ -60,11 +60,14 @@ export function KanbanColumn({ column, onCardClick }: KanbanColumnProps) {
     width,
   };
 
+  const cardCount = column.cardIds.length;
+
   return (
-    <motion.div
+    <motion.section
       ref={setSortableNodeRef}
       style={style}
       className="group/column flex shrink-0 flex-col rounded-lg bg-pylon-column"
+      aria-label={`${column.title} column, ${cardCount} card${cardCount !== 1 ? "s" : ""}`}
       initial={prefersReducedMotion ? false : { opacity: 0, x: 20 }}
       animate={{ opacity: 1, x: 0 }}
       transition={{ type: "spring", stiffness: 300, damping: 25 }}
@@ -81,21 +84,22 @@ export function KanbanColumn({ column, onCardClick }: KanbanColumnProps) {
         strategy={verticalListSortingStrategy}
       >
         <ScrollArea className="flex-1 overflow-y-auto">
-          <div ref={setDroppableNodeRef} className="flex min-h-[40px] flex-col gap-2 p-2">
+          <ul ref={setDroppableNodeRef} className="flex min-h-[40px] list-none flex-col gap-2 p-2">
             {column.cardIds.map((cardId) => {
               const card = board?.cards[cardId];
               if (!card) return null;
               return (
-                <CardThumbnail
-                  key={cardId}
-                  card={card}
-                  boardLabels={board?.labels ?? []}
-                  columnId={column.id}
-                  onCardClick={onCardClick}
-                />
+                <li key={cardId}>
+                  <CardThumbnail
+                    card={card}
+                    boardLabels={board?.labels ?? []}
+                    columnId={column.id}
+                    onCardClick={onCardClick}
+                  />
+                </li>
               );
             })}
-          </div>
+          </ul>
         </ScrollArea>
       </SortableContext>
 
@@ -118,6 +122,6 @@ export function KanbanColumn({ column, onCardClick }: KanbanColumnProps) {
           </Button>
         </div>
       )}
-    </motion.div>
+    </motion.section>
   );
 }
diff --git a/src/index.css b/src/index.css
index 69c9087..7bf2bcd 100644
--- a/src/index.css
+++ b/src/index.css
@@ -146,6 +146,17 @@
     @apply bg-background text-foreground;
     font-family: "Satoshi", system-ui, -apple-system, sans-serif;
   }
+  :focus-visible {
+    outline: 2px solid var(--pylon-accent);
+    outline-offset: 2px;
+  }
+}
+
+@media (prefers-contrast: more) {
+  :root {
+    --pylon-text: oklch(10% 0.02 50);
+    --pylon-text-secondary: oklch(35% 0.01 50);
+  }
 }
 
 @media (prefers-reduced-motion: reduce) {