From 5dca131e3d096afa27bcec039a16b80b35d2776f Mon Sep 17 00:00:00 2001
From: "DESKTOP-RTLN3BA\\$punk" <vermarohanfinal@gmail.com>
Date: Mon, 9 Mar 2026 18:50:00 -0700
Subject: [PATCH] chore: improve accessibility in PermissionsEditor by
 replacing buttons with divs and adding keyboard navigation support

---
 .../components/settings/roles-manager.tsx        | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/surfsense_web/components/settings/roles-manager.tsx b/surfsense_web/components/settings/roles-manager.tsx
index f448c76d0..b56de97bd 100644
--- a/surfsense_web/components/settings/roles-manager.tsx
+++ b/surfsense_web/components/settings/roles-manager.tsx
@@ -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>