diff --git a/frontend/src/pages/Dashboard/components/FieldStatusCard.module.css b/frontend/src/pages/Dashboard/components/FieldStatusCard.module.css index a6776f7e..326b7801 100644 --- a/frontend/src/pages/Dashboard/components/FieldStatusCard.module.css +++ b/frontend/src/pages/Dashboard/components/FieldStatusCard.module.css @@ -100,6 +100,24 @@ .row:hover { background: var(--bg-hover); } +/* + * Phase 2f keyboard-focus affordance — mirrors the FieldCard / + * OperationsTimeline / UpcomingPanel pattern from Phases 2b / 2c / 2d: + * + * - .row:focus drops the platform-default outline so mouse focus + * stays ring-free. + * - .row:focus-visible draws a token-driven brand-coloured ring + * and pairs it with the same hover background, so keyboard and + * mouse focus look identical (preserves hover/focus parity). + */ +.row:focus { outline: none; } + +.row:focus-visible { + outline: 2px solid var(--brand); + outline-offset: 2px; + background: var(--bg-hover); +} + .rowLeft { flex: 1; min-width: 0; diff --git a/frontend/src/pages/Dashboard/components/FieldStatusCard.tsx b/frontend/src/pages/Dashboard/components/FieldStatusCard.tsx index 1583269a..b1492965 100644 --- a/frontend/src/pages/Dashboard/components/FieldStatusCard.tsx +++ b/frontend/src/pages/Dashboard/components/FieldStatusCard.tsx @@ -1,3 +1,4 @@ +import type { KeyboardEvent } from 'react'; import { useNavigate } from 'react-router-dom'; import { ArrowRight, PlusCircle } from 'lucide-react'; import type { FieldDto } from '../../../types/field'; @@ -10,6 +11,43 @@ interface Props { onAddField?: () => void; } +/** + * FieldStatusCard — compact "fields snapshot" widget on the v1 + * dashboard. The header CTA ("Усі поля") and the empty-state CTA + * ("Add field") are already real