bo/worklenz
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #270 from shancds/test/row-kanban-board-v1.2.0

Browse Source 
Enhance TaskCard accessibility by adding title attribute to task name
This commit is contained in:
Chamika J
2025-07-15 15:09:57 +05:30
committed by GitHub
parent c34b94c7db d4620148bd
commit ba5d4975af
2 changed files with 23 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
worklenz-frontend/src/components/enhanced-kanban/EnhancedKanbanBoardNativeDnD/TaskCard.tsx
View File

@@ -454,7 +454,7 @@ const TaskCard: React.FC<TaskCardProps> = memo(({
style={{ backgroundColor: themeMode === 'dark' ? (sub.priority_color_dark || sub.priority_color || '#d9d9d9') : (sub.priority_color || '#d9d9d9') }} style={{ backgroundColor: themeMode === 'dark' ? (sub.priority_color_dark || sub.priority_color || '#d9d9d9') : (sub.priority_color || '#d9d9d9') }}
></span> ></span>
) : null} ) : null}
<span className="flex-1 truncate text-xs text-gray-800 dark:text-gray-100">{sub.name}</span> <span className="flex-1 truncate text-xs text-gray-800 dark:text-gray-100" title={sub.name}>{sub.name}</span>
<span <span
className="task-due-date ml-2 text-[10px] text-gray-500 dark:text-gray-400" className="task-due-date ml-2 text-[10px] text-gray-500 dark:text-gray-400"
> >

34
worklenz-frontend/src/components/enhanced-kanban/EnhancedKanbanBoardNativeDnD/TaskProgressCircle.tsx
View File

@@ -16,7 +16,7 @@ const TaskProgressCircle: React.FC<{ task: IProjectTask; size?: number }> = ({ t
cx={size / 2} cx={size / 2}
cy={size / 2} cy={size / 2}
r={radius} r={radius}
stroke="#3b82f6" stroke={progress === 100 ? "#22c55e" : "#3b82f6"}
strokeWidth={strokeWidth} strokeWidth={strokeWidth}
fill="none" fill="none"
strokeDasharray={circumference} strokeDasharray={circumference}
@@ -24,17 +24,27 @@ const TaskProgressCircle: React.FC<{ task: IProjectTask; size?: number }> = ({ t
strokeLinecap="round" strokeLinecap="round"
style={{ transition: 'stroke-dashoffset 0.3s' }} style={{ transition: 'stroke-dashoffset 0.3s' }}
/> />
{task.complete_ratio && <text {progress === 100 ? (
x="50%" // Green checkmark icon
y="50%" <g>
textAnchor="middle" <circle cx={size / 2} cy={size / 2} r={radius} fill="#22c55e" opacity="0.15" />
dominantBaseline="central" <svg x={(size/2)-(size*0.22)} y={(size/2)-(size*0.22)} width={size*0.44} height={size*0.44} viewBox="0 0 24 24">
fontSize={size * 0.38} <path d="M5 13l4 4L19 7" stroke="#22c55e" strokeWidth="2.2" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
fill="#3b82f6" </svg>
fontWeight="bold" </g>
> ) : progress > 0 && (
{Math.round(progress)} <text
</text>} x="50%"
y="50%"
textAnchor="middle"
dominantBaseline="central"
fontSize={size * 0.38}
fill="#3b82f6"
fontWeight="bold"
>
{Math.round(progress)}
</text>
)}
</svg> </svg>
); );
}; };