a11y: make tender card date keyboard accessible

This commit is contained in:
2026-09-06 16:31:08 +03:00
parent 628635fea1
commit 07cfd6198f
2 changed files with 9 additions and 3 deletions
+4 -3
View File
@@ -32,9 +32,10 @@ export const TenderCard = ({ tender }) => {
<div className="bg-white rounded-xl border border-blue-200/80 shadow-xs hover:shadow-md transition-all overflow-hidden flex flex-col md:flex-row group border-l-4 border-l-blue-600">
{/* Left Date Block */}
<div
<button type="button"
onClick={() => setActiveTenderDetail(tender)}
className="bg-[#edf4ff] group-hover:bg-[#e2edff] text-blue-900 md:w-36 p-4 flex flex-col items-center justify-center shrink-0 border-b md:border-b-0 md:border-r border-blue-100 cursor-pointer select-none transition-colors"
aria-label={`${tender.tarih || 'Tarih doğrulanmalı'} tarih bilgisi; ihale detayını aç`}
className="bg-[#edf4ff] group-hover:bg-[#e2edff] text-blue-900 md:w-36 p-4 flex flex-col items-center justify-center shrink-0 border-b md:border-b-0 md:border-r border-blue-100 cursor-pointer select-none transition-colors text-center focus-visible:outline-2 focus-visible:outline-blue-600 focus-visible:outline-offset-[-2px]"
>
<span className="text-[9px] font-black uppercase tracking-widest text-blue-900/50">İhale</span>
<span className="text-3xl font-black tracking-tight text-blue-700 leading-none">{day}</span>
@@ -42,7 +43,7 @@ export const TenderCard = ({ tender }) => {
<span className="text-[11px] font-semibold bg-white/80 px-2 py-0.5 rounded-full text-blue-800 mt-2 border border-blue-200">
{tender.saat || 'Saat doğrulanmalı'}
</span>
</div>
</button>
{/* Main Card Content */}
<div className="flex-1 p-4 flex flex-col justify-between space-y-3">