admin/accounted
3
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ui): make row selection checkboxes always visible at muted opacity (#2093)

Browse Source 
* fix(ui): make row selection checkboxes always visible at muted opacity

User feedback: bulk-select checkboxes hidden until hover are "sjukt
pilligt": an invisible 16px target forces a precise hover-then-aim per
row, and bulk selection is a primary workflow on list pages.

New CHECKBOX_REVEAL_CLASS in dry-table.tsx: rest at opacity-50, solid on
row hover, focus, coarse pointers, and checked state. Applied to the 8
selection-checkbox sites (transaction inbox, skattekonto inbox, journal
list, invoices, supplier invoices, orders, pending, invoice inbox
workspace). Also fixes a touch bug: TransactionInboxCard and
SkattekontoInboxCard lacked pointer-coarse fallback, leaving unselected
checkboxes permanently invisible on touch devices.

Row action controls (chevrons, quiet links) keep HOVER_REVEAL_CLASS.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_015n8vUx9Nukr8mHC7CVNF7y

* fix(ui): meet WCAG 3:1 on resting selection checkboxes via border-foreground

Skeptic finding: the checkbox primitive's border-input is ~1.4:1 against
the page, so the new opacity-50 resting state composited to ~1.2:1,
under the 3:1 non-text contrast minimum design.md commits to. Putting
border-foreground unconditionally on the 8 reveal checkboxes lands the
resting border at >=3.4:1 in every theme (light 3.41:1, dark 4.24:1,
white-label palettes similar) and the hover/solid state at ~17:1.

The border class lives at call sites, not in CHECKBOX_REVEAL_CLASS,
because the constant is sometimes applied to a borderless wrapper
(InvoiceInboxWorkspace); documented in dry-table.tsx.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_015n8vUx9Nukr8mHC7CVNF7y

---------

Co-authored-by: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Mattsson
2026-09-01 10:39:34 +02:00
committed by GitHub
co-authored by Claude Fable 5
parent 05dce83a2b
commit 5f81c0638c
9 changed files with 48 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/extensions/general/InvoiceInboxWorkspace.tsx
+8 -4
View File
@@ -48,7 +48,7 @@ import {
} from 'lucide-react'
import Link from 'next/link'
import { cn, formatCurrency, formatDate, formatDateLong } from '@/lib/utils'
import { QUIET_LINK_CLASS } from '@/components/ui/dry-table'
import { QUIET_LINK_CLASS, CHECKBOX_REVEAL_CLASS } from '@/components/ui/dry-table'
import { GoogleMark, MicrosoftMark } from '@/components/ui/provider-marks'
import { StartCard } from '@/components/dashboard/StartCard'
import EditKonteringDialog from '@/components/extensions/general/EditKonteringDialog'
@@ -2168,8 +2168,12 @@ function InboxRow({
<div
className={cn(
'flex items-center pl-2.5 pr-1.5 transition-opacity',
// Always visible on touch (no hover), or when any selection is active.
anyChecked ? 'opacity-100' : 'md:opacity-0 md:group-hover:opacity-100 opacity-100'
// Solid on touch (pointer-coarse) or when any selection is active;
// otherwise muted-but-visible at rest. focus-within because this
// wraps the checkbox rather than being it.
anyChecked
? 'opacity-100'
: cn(CHECKBOX_REVEAL_CLASS, 'focus-within:opacity-100')
)}
onClick={(e) => e.stopPropagation()}
>
@@ -2177,7 +2181,7 @@ function InboxRow({
checked={isChecked}
onCheckedChange={onToggleChecked}
aria-label="Markera post"
className="h-3.5 w-3.5"
className="h-3.5 w-3.5 border-foreground"
/>
</div>
)}