Dokploy/dokploy
1
0
Fork 0
mirror of https://github.com/Dokploy/dokploy.git synced 2026-07-05 14:05:30 +02:00
Code Issues Packages Projects Releases Wiki Activity

refactor: better focus-visible a11y (#1017)

Browse Source 
* 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 <47042324+Siumauricio@users.noreply.github.com>
This commit is contained in:
Tobias Barsnes
2025-01-12 00:42:05 +01:00
committed by GitHub
parent 9db979e43f
commit 87f4c7b71b
15 changed files with 64 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/dokploy/components/dashboard/docker/logs/docker-logs-id.tsx
View File

@@ -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">

2
apps/dokploy/components/dashboard/docker/show/show-containers.tsx
View File

@@ -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..."

8
apps/dokploy/components/dashboard/project/add-template.tsx
View File

@@ -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" />

12
apps/dokploy/components/dashboard/projects/show.tsx
View File

@@ -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={`${

4
apps/dokploy/components/dashboard/settings/profile/profile-form.tsx
View File

@@ -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}