From 6012166d994f2c21a0692c7673e5b9f06984b7b8 Mon Sep 17 00:00:00 2001
From: Your Name <you@example.com>
Date: Thu, 19 Feb 2026 19:56:47 +0200
Subject: [PATCH] add aria-labels to TopBar buttons and CalendarPopover

---
 src/components/card-detail/CalendarPopover.tsx | 8 +++++++-
 src/components/layout/TopBar.tsx               | 6 ++++++
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/components/card-detail/CalendarPopover.tsx b/src/components/card-detail/CalendarPopover.tsx
index 5e2bd81..35d9e63 100644
--- a/src/components/card-detail/CalendarPopover.tsx
+++ b/src/components/card-detail/CalendarPopover.tsx
@@ -109,6 +109,7 @@ export function CalendarPopover({
           <Button
             variant="ghost"
             size="icon-xs"
+            aria-label="Previous month"
             onClick={() => setViewDate((d) => subMonths(d, 1))}
             className="text-pylon-text-secondary hover:text-pylon-text"
           >
@@ -118,12 +119,14 @@ export function CalendarPopover({
           <div className="flex items-center gap-1">
             <button
               onClick={() => setViewMode(viewMode === "months" ? "days" : "months")}
+              aria-label="Select month"
               className="rounded-md px-2 py-0.5 text-sm font-medium text-pylon-text transition-colors hover:bg-pylon-column"
             >
               {format(viewDate, "MMMM")}
             </button>
             <button
               onClick={() => setViewMode(viewMode === "years" ? "days" : "years")}
+              aria-label="Select year"
               className="rounded-md px-2 py-0.5 text-sm font-medium text-pylon-text transition-colors hover:bg-pylon-column"
             >
               {format(viewDate, "yyyy")}
@@ -133,6 +136,7 @@ export function CalendarPopover({
           <Button
             variant="ghost"
             size="icon-xs"
+            aria-label="Next month"
             onClick={() => setViewDate((d) => addMonths(d, 1))}
             className="text-pylon-text-secondary hover:text-pylon-text"
           >
@@ -164,7 +168,7 @@ export function CalendarPopover({
                 </div>
 
                 {/* Day grid */}
-                <div className="grid grid-cols-7">
+                <div className="grid grid-cols-7" role="grid" aria-label="Calendar days">
                   {calendarDays.map((day) => {
                     const inMonth = isSameMonth(day, viewDate);
                     const today = isTodayFn(day);
@@ -179,6 +183,8 @@ export function CalendarPopover({
                       <button
                         key={day.toISOString()}
                         onClick={() => handleSelectDate(day)}
+                        aria-selected={selected}
+                        aria-label={format(day, "EEEE, MMMM d, yyyy")}
                         className={`flex h-9 items-center justify-center rounded-lg text-sm transition-colors
                           ${selected
                             ? "bg-pylon-accent font-medium text-white"
diff --git a/src/components/layout/TopBar.tsx b/src/components/layout/TopBar.tsx
index 15dce3d..8caed03 100644
--- a/src/components/layout/TopBar.tsx
+++ b/src/components/layout/TopBar.tsx
@@ -163,6 +163,7 @@ export function TopBar() {
                 <Button
                   variant="ghost"
                   size="icon-sm"
+                  aria-label="Undo"
                   className="text-pylon-text-secondary hover:text-pylon-text"
                   onClick={() => useBoardStore.temporal.getState().undo()}
                 >
@@ -178,6 +179,7 @@ export function TopBar() {
                 <Button
                   variant="ghost"
                   size="icon-sm"
+                  aria-label="Redo"
                   className="text-pylon-text-secondary hover:text-pylon-text"
                   onClick={() => useBoardStore.temporal.getState().redo()}
                 >
@@ -193,6 +195,7 @@ export function TopBar() {
                 <Button
                   variant="ghost"
                   size="icon-sm"
+                  aria-label="Filter cards"
                   className="text-pylon-text-secondary hover:text-pylon-text"
                   onClick={() => document.dispatchEvent(new CustomEvent("toggle-filter-bar"))}
                 >
@@ -211,6 +214,7 @@ export function TopBar() {
               <Button
                 variant="ghost"
                 size="icon-sm"
+                aria-label="Board settings"
                 className="text-pylon-text-secondary hover:text-pylon-text"
               >
                 <SlidersHorizontal className="size-4" />
@@ -256,6 +260,7 @@ export function TopBar() {
             <Button
               variant="ghost"
               size="icon-sm"
+              aria-label="Command palette"
               className="text-pylon-text-secondary hover:text-pylon-text"
               onClick={() =>
                 document.dispatchEvent(new CustomEvent("open-command-palette"))
@@ -275,6 +280,7 @@ export function TopBar() {
             <Button
               variant="ghost"
               size="icon-sm"
+              aria-label="Settings"
               className="text-pylon-text-secondary hover:text-pylon-text"
               onClick={() =>
                 document.dispatchEvent(new CustomEvent("open-settings-dialog"))