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

improve card thumbnail accessibility: aging opacity, ARIA labels

Browse Source
This commit is contained in:
Your Name
2026-02-19 19:48:08 +02:00
parent 3d2fc5a09d
commit 21e09279eb
1 changed files with 9 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/board/CardThumbnail.tsx
View File

@@ -46,9 +46,9 @@ function getDueDateStatus(dueDate: string | null): { color: string; bgColor: str
function getAgingOpacity(updatedAt: string): number { function getAgingOpacity(updatedAt: string): number {
const days = (Date.now() - new Date(updatedAt).getTime()) / (1000 * 60 * 60 * 24); const days = (Date.now() - new Date(updatedAt).getTime()) / (1000 * 60 * 60 * 24);
if (days <= 7) return 1.0; if (days <= 7) return 1.0;
if (days <= 14) return 0.85; if (days <= 14) return 0.9;
if (days <= 30) return 0.7; if (days <= 30) return 0.8;
return 0.55; return 0.7;
} }
/* ---------- Priority colors ---------- */ /* ---------- Priority colors ---------- */
@@ -175,13 +175,14 @@ export function CardThumbnail({ card, boardLabels, columnId, onCardClick, isFocu
<span <span
className={`size-2.5 shrink-0 rounded-full ${card.priority === "urgent" ? "animate-pulse" : ""}`} className={`size-2.5 shrink-0 rounded-full ${card.priority === "urgent" ? "animate-pulse" : ""}`}
style={{ backgroundColor: PRIORITY_COLORS[card.priority] }} style={{ backgroundColor: PRIORITY_COLORS[card.priority] }}
title={`Priority: ${card.priority}`} aria-label={`Priority: ${card.priority}`}
role="img"
/> />
)} )}
{dueDateStatus && card.dueDate && ( {dueDateStatus && card.dueDate && (
<span <span
className={`font-mono text-xs rounded px-1 py-0.5 ${dueDateStatus.color} ${dueDateStatus.bgColor}`} className={`font-mono text-xs rounded px-1 py-0.5 ${dueDateStatus.color} ${dueDateStatus.bgColor}`}
title={dueDateStatus.label} aria-label={`Due: ${format(new Date(card.dueDate), "MMM d")} - ${dueDateStatus.label}`}
> >
{format(new Date(card.dueDate), "MMM d")} {format(new Date(card.dueDate), "MMM d")}
</span> </span>
@@ -193,7 +194,7 @@ export function CardThumbnail({ card, boardLabels, columnId, onCardClick, isFocu
<DescriptionPreview description={card.description} /> <DescriptionPreview description={card.description} />
)} )}
{card.attachments.length > 0 && ( {card.attachments.length > 0 && (
<span className="flex items-center gap-0.5 text-pylon-text-secondary"> <span className="flex items-center gap-0.5 text-pylon-text-secondary" aria-label={`${card.attachments.length} attachment${card.attachments.length !== 1 ? "s" : ""}`} role="img">
<Paperclip className="size-3" /> <Paperclip className="size-3" />
<span className="font-mono text-xs">{card.attachments.length}</span> <span className="font-mono text-xs">{card.attachments.length}</span>
</span> </span>
@@ -343,6 +344,8 @@ function DescriptionPreview({ description }: { description: string }) {
ref={iconRef} ref={iconRef}
onMouseEnter={handleEnter} onMouseEnter={handleEnter}
onMouseLeave={handleLeave} onMouseLeave={handleLeave}
aria-label="Has description"
role="img"
> >
<AlignLeft className="size-3 text-pylon-text-secondary" /> <AlignLeft className="size-3 text-pylon-text-secondary" />
{createPortal( {createPortal(