lashman/openpylon
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 3 Wiki Activity

add aria-labels to TopBar buttons and CalendarPopover

Browse Source
This commit is contained in:
Your Name
2026-02-19 19:56:47 +02:00
parent 0b155c6023
commit 6012166d99
2 changed files with 13 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/card-detail/CalendarPopover.tsx
View File

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

6
src/components/layout/TopBar.tsx
View File

@@ -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"))