Skip to content

fix(clients): add keyboard accessibility to empty state rows #104

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
rudra1337-dev wants to merge 6 commits into
base: dev
Choose a base branch
from
Open

fix(clients): add keyboard accessibility to empty state rows #104

Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
e0aed4f
fix(clients): add keyboard accessibility to empty state rows
rudra1337-dev Mar 31, 2026
b4dcd84
fix(clients): address review comments, fix accessibility and test issues
rudra1337-dev Apr 8, 2026
d03c71c
fix(auth): re-enable authentication check using mifosToken
rudra1337-dev Apr 8, 2026
ba9e557
chore: remove pnpm-lock.yaml from PR
rudra1337-dev Apr 8, 2026
2d51a2a
Merge branch 'dev' into fix/clients-empty-state-accessibility
rudra1337-dev Apr 29, 2026
97e1dd8
Merge branch 'dev' into fix/clients-empty-state-accessibility
rudra1337-dev May 15, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
137 changes: 103 additions & 34 deletions src/pages/clients/Clients.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -218,40 +218,109 @@ const Clients = () => {
</TableHeader>

<TableBody>
{filtered.map((c: ClientRow) => (
<TableRow
key={c.id}
onClick={() => c.id && navigate(`/clients/${c.id}/general`)}
className="cursor-pointer hover:bg-zinc-100 dark:hover:bg-zinc-700 transition-colors text-base"
>
<TableCell className="px-6 py-4 font-medium">
{c.displayName ?? '—'}
</TableCell>
<TableCell className="px-6 py-4">
{c.accountNumber ?? '—'}
</TableCell>
<TableCell className="px-6 py-4">
{c.externalId ?? '—'}
</TableCell>
<TableCell className="px-6 py-4">
{c?.status?.id === 300 && (
<FontAwesomeIcon
icon={faCircle}
className="w-4 h-4 text-green-500"
/>
)}
{c?.status?.id === 200 && (
<FontAwesomeIcon
icon={faCircle}
className="w-4 h-4 text-yellow-500"
/>
)}
</TableCell>
<TableCell className="px-6 py-4">
{c.officeName ?? '—'}
</TableCell>
</TableRow>
))}
{(() => {
const hasSearch = searchTerm.trim() !== ''

return rows.length === 0 && !hasSearch ? (
<TableRow
tabIndex={!hasSearch ? 0 : undefined}
role={!hasSearch ? 'button' : undefined}
onClick={
!hasSearch ? () => navigate('/clients/create') : undefined
}
onKeyDown={e => {
if (hasSearch) return
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault()
navigate('/clients/create')
}
}}
>
<TableCell
colSpan={5}
className="text-center py-6 text-gray-500"
>
{t('empty.noClients', 'No clients available')}
</TableCell>
</TableRow>
) : rows.length === 0 && hasSearch ? (
<TableRow>
<TableCell
colSpan={5}
className="text-center py-6 text-gray-500"
>
{t('empty.noResults', 'No matching clients found')}
</TableCell>
</TableRow>
) : filtered.length === 0 ? (
<TableRow>
<TableCell
colSpan={5}
className="text-center py-6 text-gray-500"
>
{t('empty.noResults', 'No matching clients found')}
</TableCell>
</TableRow>
) : (
filtered.map((c: ClientRow) => {
const canNavigate = typeof c.id === 'number'

return (
<TableRow
key={c.id}
tabIndex={canNavigate ? 0 : -1}
role={canNavigate ? 'link' : undefined}
aria-disabled={canNavigate ? undefined : true}
onClick={
canNavigate
? () => navigate(`/clients/${c.id}/general`)
: undefined
}
onKeyDown={e => {
if (!canNavigate) return

if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault()
navigate(`/clients/${c.id}/general`)
}
}}
className={`${
canNavigate
? 'cursor-pointer hover:bg-zinc-100 dark:hover:bg-zinc-700'
: ''
} transition-colors text-base`}
>
<TableCell className="px-6 py-4 font-medium">
{c.displayName ?? '—'}
</TableCell>
<TableCell className="px-6 py-4">
{c.accountNumber ?? '—'}
</TableCell>
<TableCell className="px-6 py-4">
{c.externalId ?? '—'}
</TableCell>
<TableCell className="px-6 py-4">
{c?.status?.id === 300 && (
<FontAwesomeIcon
icon={faCircle}
className="w-4 h-4 text-green-500"
/>
)}
{c?.status?.id === 200 && (
<FontAwesomeIcon
icon={faCircle}
className="w-4 h-4 text-yellow-500"
/>
)}
</TableCell>
<TableCell className="px-6 py-4">
{c.officeName ?? '—'}
</TableCell>
</TableRow>
)
})
)
})()}
</TableBody>
</Table>
</div>
Expand Down