From 8f69cfaaaee71fb2a9e740e979cb7e1e5392bbb1 Mon Sep 17 00:00:00 2001
From: Gildas Garcia <1122076+djhi@users.noreply.github.com>
Date: Tue, 7 Jul 2026 11:11:20 +0200
Subject: [PATCH] fix: add an accessible text to the organization dashboard
 link (#47672)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Problem

People using screen readers can't find how to navigate back to the
organization dashboard.

## Solution

- Add an invisible label for screen readers
- Add a tooltip for all users

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
* Added a tooltip to the home navigation icon on hover (“Back to
organization home”).
* Enhanced app layout dropdowns to accept custom trigger content,
improving accessibility with updated labels for branches, organizations,
and projects.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 .../layouts/AppLayout/AppLayoutDropdown.tsx   |  8 ++---
 .../layouts/AppLayout/BranchDropdown.tsx      |  7 ++++-
 .../AppLayout/OrganizationDropdown.tsx        |  7 ++++-
 .../layouts/AppLayout/ProjectDropdown.tsx     |  7 ++++-
 .../Navigation/LayoutHeader/HomeIcon.tsx      | 30 +++++++++++--------
 5 files changed, 39 insertions(+), 20 deletions(-)

diff --git a/apps/studio/components/layouts/AppLayout/AppLayoutDropdown.tsx b/apps/studio/components/layouts/AppLayout/AppLayoutDropdown.tsx
index a13ba98f846..7104f3398fe 100644
--- a/apps/studio/components/layouts/AppLayout/AppLayoutDropdown.tsx
+++ b/apps/studio/components/layouts/AppLayout/AppLayoutDropdown.tsx
@@ -42,7 +42,7 @@ export interface AppLayoutDropdownWithPopoverProps {
   commandContent: ReactNode
   open: boolean
   onOpenChange: (open: boolean) => void
-  triggerButtonClassName?: string
+  triggerButton?: ReactNode
 }
 
 export function AppLayoutDropdownWithPopover({
@@ -52,7 +52,7 @@ export function AppLayoutDropdownWithPopover({
   commandContent,
   open,
   onOpenChange,
-  triggerButtonClassName,
+  triggerButton,
 }: AppLayoutDropdownWithPopoverProps) {
   return (
     <Popover open={open} onOpenChange={onOpenChange} modal={false}>
@@ -60,9 +60,7 @@ export function AppLayoutDropdownWithPopover({
         <Link href={linkHref} className={linkClassName}>
           {linkContent}
         </Link>
-        <PopoverTrigger asChild>
-          <AppLayoutDropdownTriggerButton className={triggerButtonClassName} />
-        </PopoverTrigger>
+        <PopoverTrigger asChild>{triggerButton}</PopoverTrigger>
       </div>
       <PopoverContent className="p-0" side="bottom" align="start">
         {commandContent}
diff --git a/apps/studio/components/layouts/AppLayout/BranchDropdown.tsx b/apps/studio/components/layouts/AppLayout/BranchDropdown.tsx
index bbd73078f5c..6d84e7ad253 100644
--- a/apps/studio/components/layouts/AppLayout/BranchDropdown.tsx
+++ b/apps/studio/components/layouts/AppLayout/BranchDropdown.tsx
@@ -2,7 +2,11 @@ import { useParams } from 'common'
 import { useState } from 'react'
 import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader'
 
-import { AppLayoutDropdownError, AppLayoutDropdownWithPopover } from './AppLayoutDropdown'
+import {
+  AppLayoutDropdownError,
+  AppLayoutDropdownTriggerButton,
+  AppLayoutDropdownWithPopover,
+} from './AppLayoutDropdown'
 import { BranchBadge } from './BranchBadge'
 import { BranchDropdownCommandContent } from './BranchDropdownCommandContent'
 import { useEmbeddedCloseHandler } from './useEmbeddedCloseHandler'
@@ -108,6 +112,7 @@ export const BranchDropdown = ({
       commandContent={commandContent}
       open={open}
       onOpenChange={handleOpenChange}
+      triggerButton={<AppLayoutDropdownTriggerButton aria-label="Show project branches" />}
     />
   )
 }
diff --git a/apps/studio/components/layouts/AppLayout/OrganizationDropdown.tsx b/apps/studio/components/layouts/AppLayout/OrganizationDropdown.tsx
index a995829b43c..95ababa6939 100644
--- a/apps/studio/components/layouts/AppLayout/OrganizationDropdown.tsx
+++ b/apps/studio/components/layouts/AppLayout/OrganizationDropdown.tsx
@@ -5,7 +5,11 @@ import { useState } from 'react'
 import { Badge, cn } from 'ui'
 import { GenericSkeletonLoader, ShimmeringLoader } from 'ui-patterns/ShimmeringLoader'
 
-import { AppLayoutDropdownError, AppLayoutDropdownWithPopover } from './AppLayoutDropdown'
+import {
+  AppLayoutDropdownError,
+  AppLayoutDropdownTriggerButton,
+  AppLayoutDropdownWithPopover,
+} from './AppLayoutDropdown'
 import { OrganizationDropdownCommandContent } from './OrganizationDropdownCommandContent'
 import { useEmbeddedCloseHandler } from './useEmbeddedCloseHandler'
 import PartnerIcon from '@/components/ui/PartnerIcon'
@@ -92,6 +96,7 @@ export const OrganizationDropdown = ({
       commandContent={commandContent}
       open={open}
       onOpenChange={handleOpenChange}
+      triggerButton={<AppLayoutDropdownTriggerButton aria-label="Show organizations" />}
     />
   )
 }
diff --git a/apps/studio/components/layouts/AppLayout/ProjectDropdown.tsx b/apps/studio/components/layouts/AppLayout/ProjectDropdown.tsx
index 77b0dab49eb..b5c6ec77c60 100644
--- a/apps/studio/components/layouts/AppLayout/ProjectDropdown.tsx
+++ b/apps/studio/components/layouts/AppLayout/ProjectDropdown.tsx
@@ -111,7 +111,12 @@ function ProjectDropdownPlatformView({
 
       <OrganizationProjectSelector
         {...selectorProps}
-        renderTrigger={() => <AppLayoutDropdownTriggerButton className="shrink-0" />}
+        renderTrigger={() => (
+          <AppLayoutDropdownTriggerButton
+            className="shrink-0"
+            aria-label="Show organization projects"
+          />
+        )}
       />
     </div>
   )
diff --git a/apps/studio/components/layouts/Navigation/LayoutHeader/HomeIcon.tsx b/apps/studio/components/layouts/Navigation/LayoutHeader/HomeIcon.tsx
index 0d3b227d3d6..f3e97c9e12b 100644
--- a/apps/studio/components/layouts/Navigation/LayoutHeader/HomeIcon.tsx
+++ b/apps/studio/components/layouts/Navigation/LayoutHeader/HomeIcon.tsx
@@ -1,6 +1,6 @@
 import Link from 'next/link'
 import { useRouter } from 'next/router'
-import { cn } from 'ui'
+import { cn, Tooltip, TooltipContent, TooltipTrigger } from 'ui'
 
 import { useOrganizationsQuery } from '@/data/organizations/organizations-query'
 import { useIsFeatureEnabled } from '@/hooks/misc/useIsFeatureEnabled'
@@ -29,16 +29,22 @@ export const HomeIcon = ({ className }: { className?: string }) => {
   const href = IS_PLATFORM ? getDefaultOrgRedirect() : '/project/default'
 
   return (
-    <Link
-      href={href}
-      onClick={() => track('header_home_logo_clicked')}
-      className={cn('items-center justify-center shrink-0 flex', className)}
-    >
-      <img
-        alt="Supabase"
-        src={`${router.basePath}/img/supabase-logo.svg`}
-        className={largeLogo ? 'h-[20px]' : 'h-[18px]'}
-      />
-    </Link>
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Link
+          href={href}
+          onClick={() => track('header_home_logo_clicked')}
+          className={cn('items-center justify-center shrink-0 flex', className)}
+        >
+          <img
+            alt="Supabase"
+            src={`${router.basePath}/img/supabase-logo.svg`}
+            className={largeLogo ? 'h-[20px]' : 'h-[18px]'}
+          />
+          <span className="sr-only">Back to organization home</span>
+        </Link>
+      </TooltipTrigger>
+      <TooltipContent aria-hidden>Back to organization home</TooltipContent>
+    </Tooltip>
   )
 }