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 a9fbaa2c0d
commit 07034c6a25
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 {
const days = (Date.now() - new Date(updatedAt).getTime()) / (1000 * 60 * 60 * 24);
if (days <= 7) return 1.0;
if (days <= 14) return 0.85;
if (days <= 30) return 0.7;
return 0.55;
if (days <= 14) return 0.9;
if (days <= 30) return 0.8;
return 0.7;
}
/* ---------- Priority colors ---------- */
@@ -175,13 +175,14 @@ export function CardThumbnail({ card, boardLabels, columnId, onCardClick, isFocu
<span
className={`size-2.5 shrink-0 rounded-full ${card.priority === "urgent" ? "animate-pulse" : ""}`}
style={{ backgroundColor: PRIORITY_COLORS[card.priority] }}
title={`Priority: ${card.priority}`}
aria-label={`Priority: ${card.priority}`}
role="img"
/>
)}
{dueDateStatus && card.dueDate && (
<span
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")}
</span>
@@ -193,7 +194,7 @@ export function CardThumbnail({ card, boardLabels, columnId, onCardClick, isFocu
<DescriptionPreview description={card.description} />
)}
{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" />
<span className="font-mono text-xs">{card.attachments.length}</span>
</span>
@@ -343,6 +344,8 @@ function DescriptionPreview({ description }: { description: string }) {
ref={iconRef}
onMouseEnter={handleEnter}
onMouseLeave={handleLeave}
aria-label="Has description"
role="img"
>
<AlignLeft className="size-3 text-pylon-text-secondary" />
{createPortal(