refactor: better focus-visible a11y

Dokploy · Dec 29, 2024 · aaca050 · aaca050
1 parent 8c8ffe0
commit aaca050
Show file tree

Hide file tree

Showing 8 changed files with 43 additions and 21 deletions.
diff --git a/apps/dokploy/components/dashboard/docker/show/show-containers.tsx b/apps/dokploy/components/dashboard/docker/show/show-containers.tsx
@@ -72,7 +72,7 @@ export const ShowContainers = ({ serverId }: Props) => {
 
 	return (
 		<div className="mt-6 grid gap-4 pb-20 w-full">
-			<div className="flex flex-col gap-4  w-full overflow-auto">
+			<div className="flex flex-col gap-4  w-full">
 				<div className="flex items-center gap-2 max-sm:flex-wrap">
 					<Input
 						placeholder="Filter by name..."

diff --git a/apps/dokploy/components/dashboard/settings/profile/profile-form.tsx b/apps/dokploy/components/dashboard/settings/profile/profile-form.tsx
@@ -194,11 +194,11 @@ export const ProfileForm = () => {
 												}}
 												defaultValue={field.value}
 												value={field.value}
-												className="flex flex-row flex-wrap gap-2 max-xl:justify-center"
+												className="flex flex-row flex-wrap gap-2 max-xl:justify-center "
 											>
 												{availableAvatars.map((image) => (
 													<FormItem key={image}>
-														<FormLabel className="[&:has([data-state=checked])>img]:border-primary [&:has([data-state=checked])>img]:border-1 [&:has([data-state=checked])>img]:p-px cursor-pointer">
+														<FormLabel className="[&:has([data-state=checked])>img]:border-primary [&:has([data-state=checked])>img]:ring-ring [&:has([data-state=checked])>img]:ring-2 [&:has([data-state=checked])>img]:p-px cursor-pointer">
 															<FormControl>
 																<RadioGroupItem
 																	value={image}

diff --git a/apps/dokploy/components/layouts/navbar.tsx b/apps/dokploy/components/layouts/navbar.tsx
@@ -93,7 +93,9 @@ export const Navbar = () => {
 				<div className="text-medium box-border flex flex-grow basis-0 flex-row flex-nowrap items-center justify-start whitespace-nowrap bg-transparent no-underline">
 					<Link
 						href="/dashboard/projects"
-						className={cn("flex flex-row items-center gap-2")}
+						className={cn(
+							"flex flex-row items-center gap-2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1",
+						)}
 					>
 						<Logo />
 						<span className="text-sm font-semibold text-primary max-sm:hidden">
@@ -126,17 +128,20 @@ export const Navbar = () => {
 					</li>
 
 					<DropdownMenu>
-						<DropdownMenuTrigger asChild>
-							<Avatar className="size-10 cursor-pointer border border-border items-center">
+						<Avatar
+							className="size-10 cursor-pointer border border-border items-center focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+							asChild
+						>
+							<DropdownMenuTrigger>
 								<AvatarImage src={data?.image || ""} alt="@shadcn" />
 								<AvatarFallback>
 									{data?.email
 										?.split(" ")
 										.map((n) => n[0])
 										.join("")}
 								</AvatarFallback>
-							</Avatar>
-						</DropdownMenuTrigger>
+							</DropdownMenuTrigger>
+						</Avatar>
 						<DropdownMenuContent className="w-56" align="end">
 							<DropdownMenuLabel className="flex flex-col">
 								My Account

diff --git a/apps/dokploy/components/layouts/navigation-tabs.tsx b/apps/dokploy/components/layouts/navigation-tabs.tsx
@@ -146,8 +146,8 @@ export const NavigationTabs = ({ tab, children }: Props) => {
 						router.push(tab?.index || "");
 					}}
 				>
-					<div className="flex flex-row items-center justify-between w-full gap-4 max-sm:overflow-x-auto overflow-y-hidden border-b border-b-divider pb-1">
-						<TabsList className="bg-transparent relative px-0">
+					<div className="flex flex-row items-center justify-between w-full gap-4 max-sm:overflow-x-auto border-b border-b-divider pb-1">
+						<TabsList className="bg-transparent relative px-0 pb-[8px]">
 							{tabMap.map((tab, index) => {
 								if (tab?.isShow && !tab?.isShow?.({ rol: data?.rol, user })) {
 									return null;
@@ -172,7 +172,11 @@ export const NavigationTabs = ({ tab, children }: Props) => {
 						</TabsList>
 					</div>
 
-					<TabsContent value={activeTab} className="w-full">
+					<TabsContent
+						value={activeTab}
+						className="w-full"
+						tabIndex={undefined}
+					>
 						{children}
 					</TabsContent>
 				</Tabs>

diff --git a/apps/dokploy/components/ui/file-tree.tsx b/apps/dokploy/components/ui/file-tree.tsx
@@ -146,7 +146,7 @@ const TreeItem = React.forwardRef<HTMLDivElement, TreeItemProps>(
 										<AccordionPrimitive.Item value={item.id}>
 											<AccordionTrigger
 												className={cn(
-													"px-2 hover:before:opacity-100  before:absolute before:left-0 before:w-full before:opacity-0 before:bg-muted/80 before:h-[1.75rem] before:-z-10",
+													"px-2 hover:before:opacity-100  before:absolute before:left-0 before:w-full before:opacity-0 before:bg-muted/80 before:h-[1.75rem] before:-z-10 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
 													selectedItemId === item.id &&
 														"before:opacity-100 before:bg-accent text-accent-foreground before:border-l-2 before:border-l-accent-foreground/50 dark:before:border-0",
 												)}
@@ -214,19 +214,20 @@ const TreeItem = React.forwardRef<HTMLDivElement, TreeItemProps>(
 TreeItem.displayName = "TreeItem";
 
 const Leaf = React.forwardRef<
-	HTMLDivElement,
-	React.HTMLAttributes<HTMLDivElement> & {
+	HTMLButtonElement,
+	React.HTMLAttributes<HTMLButtonElement> & {
 		item: TreeDataItem;
 		isSelected?: boolean;
 		Icon?: LucideIcon;
 	}
 >(({ className, item, isSelected, Icon, ...props }, ref) => {
 	return (
-		<div
+		<button
 			ref={ref}
+			type="button"
 			className={cn(
 				"flex items-center py-2 px-2 cursor-pointer \
-			hover:before:opacity-100 before:absolute before:left-0 before:right-1 before:w-full transition-colors before:opacity-0 before:bg-muted/80 before:h-[1.75rem] before:-z-10",
+			hover:before:opacity-100 before:absolute before:left-0 before:right-1 before:w-full transition-colors before:opacity-0 before:bg-muted/80 before:h-[1.75rem] before:-z-10 rounded-lg focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 relative focus-visible:z-10",
 				className,
 				isSelected &&
 					"before:opacity-100 before:bg-accent bg-border rounded-lg   text-accent-foreground before:border-l-2 before:border-l-accent-foreground/50 dark:before:border-0",
@@ -246,7 +247,7 @@ const Leaf = React.forwardRef<
 				/>
 			)}
 			<p className=" text-sm whitespace-normal font-mono">{item.name}</p>
-		</div>
+		</button>
 	);
 });
 

diff --git a/apps/dokploy/components/ui/input.tsx b/apps/dokploy/components/ui/input.tsx
@@ -14,7 +14,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
 					type={type}
 					className={cn(
 						// bg-gray
-						"flex h-10 w-full rounded-md bg-input px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none  focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+						"flex h-10 w-full rounded-md bg-input px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50",
 						className,
 					)}
 					ref={ref}

diff --git a/apps/dokploy/components/ui/select.tsx b/apps/dokploy/components/ui/select.tsx
@@ -17,7 +17,7 @@ const SelectTrigger = React.forwardRef<
 	<SelectPrimitive.Trigger
 		ref={ref}
 		className={cn(
-			"flex h-10 w-full items-center justify-between rounded-md border border-input bg-input px-3 py-2 text-sm  placeholder:text-muted-foreground focus:outline-none  focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+			"flex h-10 w-full items-center justify-between rounded-md border border-input bg-input px-3 py-2 text-sm  placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
 			className,
 		)}
 		{...props}

diff --git a/apps/dokploy/components/ui/tooltip.tsx b/apps/dokploy/components/ui/tooltip.tsx
@@ -7,7 +7,19 @@ const TooltipProvider = TooltipPrimitive.Provider;
 
 const Tooltip = TooltipPrimitive.Root;
 
-const TooltipTrigger = TooltipPrimitive.Trigger;
+const TooltipTrigger = React.forwardRef<
+	React.ElementRef<typeof TooltipPrimitive.Trigger>,
+	React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+	<TooltipPrimitive.Trigger
+		ref={ref}
+		className={cn(
+			"focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1",
+			className,
+		)}
+		{...props}
+	/>
+));
 
 const TooltipPortal = TooltipPrimitive.Portal;
 
@@ -19,7 +31,7 @@ const TooltipContent = React.forwardRef<
 		ref={ref}
 		sideOffset={sideOffset}
 		className={cn(
-			"z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+			"z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ",
 			className,
 		)}
 		{...props}