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:
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

View File

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

View File

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