feat: enhance folder and document selection functionality

- Updated DocumentNode to use a div instead of a button for better accessibility and added keyboard interaction for selection.
- Introduced Checkbox component in FolderNode for selecting folders, with state management for selection (all, some, none).
- Implemented folder selection state logic in FolderTreeView to manage document selection across nested folders.
- Added handleToggleFolderSelect function in DocumentsSidebar to manage selection of documents based on folder selection.

surfsense_web/components/documents/DocumentNode.tsx

@@ -89,7 +89,7 @@ export const DocumentNode = React.memo(function DocumentNode({
 	const isProcessing = statusState === "pending" || statusState === "processing";
 	const [dropdownOpen, setDropdownOpen] = useState(false);
 	const [exporting, setExporting] = useState<string | null>(null);
-	const rowRef = useRef<HTMLButtonElement>(null);
+	const rowRef = useRef<HTMLDivElement>(null);
 
 	const handleExport = useCallback(
 		(format: string) => {
@@ -102,8 +102,8 @@ export const DocumentNode = React.memo(function DocumentNode({
 	);
 
 	const attachRef = useCallback(
-		(node: HTMLButtonElement | null) => {
-			(rowRef as React.MutableRefObject<HTMLButtonElement | null>).current = node;
+		(node: HTMLDivElement | null) => {
+			(rowRef as React.MutableRefObject<HTMLDivElement | null>).current = node;
 			drag(node);
 		},
 		[drag]
@@ -112,8 +112,9 @@ export const DocumentNode = React.memo(function DocumentNode({
 	return (
 		<ContextMenu onOpenChange={onContextMenuOpenChange}>
 			<ContextMenuTrigger asChild>
-				<button
-					type="button"
+				<div
+					role="button"
+					tabIndex={0}
 					ref={attachRef}
 					className={cn(
 					"group flex h-8 w-full items-center gap-2.5 rounded-md px-1 text-sm hover:bg-accent/50 cursor-pointer select-none text-left",
@@ -122,6 +123,12 @@ export const DocumentNode = React.memo(function DocumentNode({
 					)}
 					style={{ paddingLeft: `${depth * 16 + 4}px` }}
 					onClick={handleCheckChange}
+					onKeyDown={(e) => {
+						if (e.key === "Enter" || e.key === " ") {
+							e.preventDefault();
+							handleCheckChange();
+						}
+					}}
 				>
 				{(() => {
 					if (statusState === "pending") {
@@ -231,7 +238,7 @@ export const DocumentNode = React.memo(function DocumentNode({
 							</DropdownMenuItem>
 						</DropdownMenuContent>
 					</DropdownMenu>
-				</button>
+				</div>
 			</ContextMenuTrigger>
 
 			{contextMenuOpen && (