apunkt/SurfSense
1
0
Fork 0
mirror of https://github.com/MODSetter/SurfSense.git synced 2026-04-25 00:36:31 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

chore: improve accessibility in PermissionsEditor by replacing buttons with divs and adding keyboard navigation support

Browse source
This commit is contained in:
DESKTOP-RTLN3BA\$punk 2026-03-09 18:50:00 -07:00
parent 45cc527d02
commit 5dca131e3d
1 changed files with 10 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

16
surfsense_web/components/settings/roles-manager.tsx
View file

@ -695,10 +695,12 @@ function PermissionsEditor({
return (
<div key={category} className="rounded-lg border border-border/60 overflow-hidden">
<button
type="button"
<div
role="button"
tabIndex={0}
className="w-full flex items-center justify-between px-3 py-2.5 cursor-pointer hover:bg-muted/40 transition-colors"
onClick={() => toggleCategoryExpanded(category)}
onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); toggleCategoryExpanded(category); } }}
>
<div className="flex items-center gap-2.5">
<IconComponent className="h-4 w-4 text-muted-foreground shrink-0" />
@ -735,7 +737,7 @@ function PermissionsEditor({
</svg>
</motion.div>
</div>
</button>
</div>
{isExpanded && (
<motion.div
@ -752,14 +754,16 @@ function PermissionsEditor({
const isSelected = selectedPermissions.includes(perm.value);
return (
<button
<div
key={perm.value}
type="button"
role="button"
tabIndex={0}
className={cn(
"w-full flex items-center justify-between gap-3 px-2.5 py-2 rounded-md cursor-pointer transition-colors",
isSelected ? "bg-muted/60 hover:bg-muted/80" : "hover:bg-muted/40"
)}
onClick={() => onTogglePermission(perm.value)}
onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); onTogglePermission(perm.value); } }}
>
<div className="flex-1 min-w-0 text-left">
<span className="text-sm font-medium">{actionLabel}</span>
@ -773,7 +777,7 @@ function PermissionsEditor({
onClick={(e) => e.stopPropagation()}
className="shrink-0"
/>
</button>
</div>
);
})}
</div>