refactor: better focus-visible a11y (#1017)

* refactor: better focus-visible a11y * style: fix tree leaf width * style: input focus ring size * refactor: focus a11y on project pages * fix: project-environment import statement * style: `ring-border` on input * refactor: use ring border --------- Co-authored-by: Mauricio Siu <[email protected]>
Dokploy · Jan 11, 2025 · 87f4c7b · 87f4c7b
1 parent 9db979e
commit 87f4c7b
Show file tree

Hide file tree

Showing 15 changed files with 64 additions and 38 deletions.
diff --git a/apps/dokploy/components/dashboard/docker/logs/docker-logs-id.tsx b/apps/dokploy/components/dashboard/docker/logs/docker-logs-id.tsx
@@ -226,7 +226,7 @@ export const DockerLogsId: React.FC<Props> = ({
 
 	return (
 		<div className="flex flex-col gap-4">
-			<div className="rounded-lg overflow-hidden">
+			<div className="rounded-lg">
 				<div className="space-y-4">
 					<div className="flex flex-wrap justify-between items-start sm:items-center gap-4">
 						<div className="flex flex-wrap gap-4">

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/project/add-template.tsx b/apps/dokploy/components/dashboard/project/add-template.tsx
@@ -226,7 +226,7 @@ export const AddTemplate = ({ projectId }: Props) => {
 																href={template.links.github}
 																target="_blank"
 																className={
-																	"text-sm text-muted-foreground p-3 rounded-full hover:bg-border items-center flex transition-colors"
+																	"text-sm text-muted-foreground p-3 rounded-full hover:bg-border items-center flex transition-colors focus-visible:ring-ring focus-visible:ring-2 focus-visible:outline-none"
 																}
 															>
 																<Github className="size-4 text-muted-foreground" />
@@ -236,7 +236,7 @@ export const AddTemplate = ({ projectId }: Props) => {
 																	href={template.links.website}
 																	target="_blank"
 																	className={
-																		"text-sm text-muted-foreground p-3 rounded-full hover:bg-border items-center flex transition-colors"
+																		"text-sm text-muted-foreground p-3 rounded-full hover:bg-border items-center flex transition-colors focus-visible:ring-ring focus-visible:ring-2 focus-visible:outline-none"
 																	}
 																>
 																	<Globe className="size-4 text-muted-foreground" />
@@ -247,7 +247,7 @@ export const AddTemplate = ({ projectId }: Props) => {
 																	href={template.links.docs}
 																	target="_blank"
 																	className={
-																		"text-sm text-muted-foreground p-3 rounded-full hover:bg-border items-center flex transition-colors"
+																		"text-sm text-muted-foreground p-3 rounded-full hover:bg-border items-center flex transition-colors focus-visible:ring-ring focus-visible:ring-2 focus-visible:outline-none"
 																	}
 																>
 																	<BookText className="size-4 text-muted-foreground" />
@@ -257,7 +257,7 @@ export const AddTemplate = ({ projectId }: Props) => {
 																href={`https://github.com/Dokploy/dokploy/tree/canary/apps/dokploy/templates/${template.id}`}
 																target="_blank"
 																className={
-																	"text-sm text-muted-foreground p-3 rounded-full hover:bg-border items-center flex transition-colors"
+																	"text-sm text-muted-foreground p-3 rounded-full hover:bg-border items-center flex transition-colors focus-visible:ring-ring focus-visible:ring-2 focus-visible:outline-none"
 																}
 															>
 																<Code className="size-4 text-muted-foreground" />

diff --git a/apps/dokploy/components/dashboard/projects/show.tsx b/apps/dokploy/components/dashboard/projects/show.tsx
@@ -126,13 +126,16 @@ export const ShowProjects = () => {
 
 					return (
 						<div key={project.projectId} className="w-full lg:max-w-md">
-							<Link href={`/dashboard/project/${project.projectId}`}>
+							<Link
+								href={`/dashboard/project/${project.projectId}`}
+								className="focus-visible:outline-none ring-ring focus-visible:ring-offset-2 focus-visible:ring-1 block rounded-lg"
+							>
 								<Card className="group relative w-full  bg-transparent transition-colors hover:bg-card">
 									{flattedDomains.length > 1 ? (
 										<DropdownMenu>
 											<DropdownMenuTrigger asChild>
 												<Button
-													className="absolute -right-3 -top-3 size-9 translate-y-1 rounded-full p-0 opacity-0 transition-all duration-200 group-hover:translate-y-0 group-hover:opacity-100"
+													className="absolute -right-3 -top-3 size-9 translate-y-1 rounded-full p-0 opacity-0 transition-all duration-200 group-hover:translate-y-0 group-hover:opacity-100 focus-visible:translate-y-0 focus-visible:opacity-100"
 													size="sm"
 													variant="default"
 												>
@@ -149,10 +152,11 @@ export const ShowProjects = () => {
 										</DropdownMenu>
 									) : flattedDomains[0] ? (
 										<Button
-											className="absolute -right-3 -top-3 size-9 translate-y-1 rounded-full p-0 opacity-0 transition-all duration-200 group-hover:translate-y-0 group-hover:opacity-100"
+											className="absolute -right-3 -top-3 size-9 translate-y-1 rounded-full p-0 opacity-0 transition-all duration-200 group-hover:translate-y-0 group-hover:opacity-100 focus-visible:translate-y-0 focus-visible:opacity-100"
 											size="sm"
 											variant="default"
-											onClick={(e) => e.stopPropagation()}
+											/* onClick={(e) => e.stopPropagation()} */
+											asChild
 										>
 											<Link
 												href={`${

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
@@ -97,7 +97,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">
@@ -130,17 +132,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/button.tsx b/apps/dokploy/components/ui/button.tsx
@@ -1,4 +1,4 @@
-import { Slot } from "@radix-ui/react-slot";
+import { Slot, Slottable } from "@radix-ui/react-slot";
 import { type VariantProps, cva } from "class-variance-authority";
 import * as React from "react";
 
@@ -68,7 +68,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
 					{...props}
 				>
 					{isLoading && <Loader2 className="animate-spin" />}
-					{children}
+					<Slottable>{children}</Slottable>
 				</Comp>
 			</>
 		);

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 w-full",
 				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-2 focus-visible:ring-border 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/tabs.tsx b/apps/dokploy/components/ui/tabs.tsx
@@ -38,13 +38,14 @@ TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
 const TabsContent = React.forwardRef<
 	React.ElementRef<typeof TabsPrimitive.Content>,
 	React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
->(({ className, ...props }, ref) => (
+>(({ className, tabIndex, ...props }, ref) => (
 	<TabsPrimitive.Content
 		ref={ref}
 		className={cn(
 			"mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
 			className,
 		)}
+		tabIndex={tabIndex}
 		{...props}
 	/>
 ));

diff --git a/apps/dokploy/components/ui/textarea.tsx b/apps/dokploy/components/ui/textarea.tsx
@@ -10,7 +10,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
 		return (
 			<textarea
 				className={cn(
-					"flex min-h-[80px] w-full rounded-md border border-input bg-input px-3 py-2 text-sm  placeholder:text-muted-foreground focus-visible:outline-none  focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+					"flex min-h-[80px] w-full rounded-md border border-input bg-input px-3 py-2 text-sm  placeholder:text-muted-foreground focus-visible:outline-none   focus-visible:ring-2 focus-visible:ring-border  disabled:cursor-not-allowed disabled:opacity-50",
 					className,
 				)}
 				ref={ref}

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}

diff --git a/apps/dokploy/pages/dashboard/project/[projectId].tsx b/apps/dokploy/pages/dashboard/project/[projectId].tsx
@@ -1,16 +1,15 @@
 import { AddApplication } from "@/components/dashboard/project/add-application";
+import { ProjectEnvironment } from "@/components/dashboard/projects/project-environment";
 import { AddCompose } from "@/components/dashboard/project/add-compose";
 import { AddDatabase } from "@/components/dashboard/project/add-database";
 import { AddTemplate } from "@/components/dashboard/project/add-template";
-import { ProjectEnvironment } from "@/components/dashboard/projects/project-environment";
 import {
 	MariadbIcon,
 	MongodbIcon,
 	MysqlIcon,
 	PostgresqlIcon,
 	RedisIcon,
 } from "@/components/icons/data-tools-icons";
-import { DashboardLayout } from "@/components/layouts/dashboard-layout";
 import { ProjectLayout } from "@/components/layouts/project-layout";
 import { DateTooltip } from "@/components/shared/date-tooltip";
 import { StatusTooltip } from "@/components/shared/status-tooltip";
@@ -205,7 +204,7 @@ const Project = (
 					{(auth?.rol === "admin" || user?.canCreateServices) && (
 						<div className="flex flex-row gap-4 flex-wrap">
 							<ProjectEnvironment projectId={projectId}>
-								<Button variant="outline">Project Environment</Button>
+								<Button variant="outline">Project Enviroment</Button>
 							</ProjectEnvironment>
 							<DropdownMenu>
 								<DropdownMenuTrigger asChild>
@@ -236,7 +235,7 @@ const Project = (
 				</header>
 			</div>
 
-			<div className="flex w-full gap-8">
+			<div className="flex w-full gap-8 ">
 				{emptyServices ? (
 					<div className="flex h-[70vh] w-full flex-col items-center justify-center">
 						<FolderInput className="size-10 md:size-28 text-muted" />