mirror of
https://github.com/Dokploy/dokploy.git
synced 2026-07-13 09:55:29 +02:00
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 <47042324+Siumauricio@users.noreply.github.com>
This commit is contained in:
@@ -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,8 +132,11 @@ 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
|
||||
@@ -139,8 +144,8 @@ export const Navbar = () => {
|
||||
.map((n) => n[0])
|
||||
.join("")}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
</DropdownMenuTrigger>
|
||||
</DropdownMenuTrigger>
|
||||
</Avatar>
|
||||
<DropdownMenuContent className="w-56" align="end">
|
||||
<DropdownMenuLabel className="flex flex-col">
|
||||
My Account
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user