monoadmin/the-other-dude
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(a11y): add keyboard nav to fleet table rows, fix ARIA, add scope

Browse Source 
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Jason Staack
2026-03-15 21:10:08 -05:00
parent c0f6f84677
commit 2e9584d2c7
1 changed files with 5 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/src/components/fleet/FleetTable.tsx
View File

@@ -246,7 +246,7 @@ export function FleetTable({
const tableHead = ( const tableHead = (
<thead> <thead>
<tr className="border-b border-border bg-surface"> <tr className="border-b border-border bg-surface">
<th scope="col" className="px-2 py-2 text-xs font-medium text-text-muted w-6"></th> <th scope="col" className="px-2 py-2 text-xs font-medium text-text-muted w-6"><span className="sr-only">Status</span></th>
<SortHeader column="hostname" label="Hostname" {...sortProps} className="text-left" /> <SortHeader column="hostname" label="Hostname" {...sortProps} className="text-left" />
<SortHeader column="ip_address" label="IP" {...sortProps} className="text-left" /> <SortHeader column="ip_address" label="IP" {...sortProps} className="text-left" />
<SortHeader column="model" label="Model" {...sortProps} className="text-left" /> <SortHeader column="model" label="Model" {...sortProps} className="text-left" />
@@ -328,7 +328,8 @@ export function FleetTable({
selectedIndex === virtualRow.index && 'bg-elevated/50', selectedIndex === virtualRow.index && 'bg-elevated/50',
)} )}
onClick={() => handleDeviceClick(device)} onClick={() => handleDeviceClick(device)}
aria-selected={selectedIndex === virtualRow.index} tabIndex={0}
onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); handleDeviceClick(device) } }}
style={{ style={{
position: 'absolute', position: 'absolute',
top: 0, top: 0,
@@ -388,7 +389,8 @@ export function FleetTable({
selectedIndex === idx && 'bg-elevated/50', selectedIndex === idx && 'bg-elevated/50',
)} )}
onClick={() => handleDeviceClick(device)} onClick={() => handleDeviceClick(device)}
aria-selected={selectedIndex === idx} tabIndex={0}
onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); handleDeviceClick(device) } }}
> >
{renderDeviceRow(device)} {renderDeviceRow(device)}
</tr> </tr>