From 623a9230bd7a6cf33858dea4ed8509cee14e1922 Mon Sep 17 00:00:00 2001
From: Gildas Garcia <1122076+djhi@users.noreply.github.com>
Date: Mon, 6 Jul 2026 16:57:02 +0200
Subject: [PATCH] fix: add labels to org home page view buttons (#47633)

## Problem

The buttons on the organization home page that allow to switch between
list and grid views are not accessible.

## Solution

Add screen readers only text to these buttons.

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

## Summary of changes

* **Bug Fixes / Improvements**
* Improved accessibility for project view toggle controls and the
clear-search action.
  * Added an explicit accessible label to the clear button.
* Added screen-reader text and tooltips to better communicate grid vs.
list view.
* **Other**
* Improved error handling robustness when updating report snippet
visibility.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 .../components/interfaces/HomePageActions.tsx | 31 ++++++++++++++-----
 .../ui/src/components/shadcn/ui/toggle.tsx    |  4 +--
 2 files changed, 26 insertions(+), 9 deletions(-)

diff --git a/apps/studio/components/interfaces/HomePageActions.tsx b/apps/studio/components/interfaces/HomePageActions.tsx
index adb9f6ac43e..bd8aa2a774d 100644
--- a/apps/studio/components/interfaces/HomePageActions.tsx
+++ b/apps/studio/components/interfaces/HomePageActions.tsx
@@ -6,7 +6,7 @@ import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { parseAsArrayOf, parseAsString, parseAsStringLiteral, useQueryState } from 'nuqs'
 import { useEffect, useRef } from 'react'
-import { Button, ToggleGroup, ToggleGroupItem } from 'ui'
+import { Button, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipTrigger } from 'ui'
 import { Input } from 'ui-patterns/DataInputs/Input'
 
 import { FilterPopover } from '../ui/FilterPopover'
@@ -98,6 +98,7 @@ export const HomePageActions = ({ slug: _slug, hideNewProject = false }: HomePag
                 icon={<X />}
                 onClick={() => setSearch('')}
                 className="p-0 h-5 w-5"
+                aria-label="Clear"
               />
             ),
           ]}
@@ -138,12 +139,28 @@ export const HomePageActions = ({ slug: _slug, hideNewProject = false }: HomePag
             value={viewMode}
             onValueChange={(value) => value && setViewMode(value as 'grid' | 'table')}
           >
-            <ToggleGroupItem value="grid" size="sm" className="h-[26px] w-[26px] p-0">
-              <Grid size={14} strokeWidth={1.5} />
-            </ToggleGroupItem>
-            <ToggleGroupItem value="table" size="sm" className="h-[26px] w-[26px] p-0">
-              <List size={14} strokeWidth={1.5} />
-            </ToggleGroupItem>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <ToggleGroupItem value="grid" className="h-[26px] w-[26px] p-0">
+                  <Grid size={14} strokeWidth={1.5} />
+                  <span className="sr-only">Toggle grid view</span>
+                </ToggleGroupItem>
+              </TooltipTrigger>
+              <TooltipContent side="bottom">
+                <p>Toggle grid view</p>
+              </TooltipContent>
+            </Tooltip>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <ToggleGroupItem value="table" className="h-[26px] w-[26px] p-0">
+                  <List size={14} strokeWidth={1.5} />
+                  <span className="sr-only">Toggle list view</span>
+                </ToggleGroupItem>
+              </TooltipTrigger>
+              <TooltipContent side="bottom">
+                <p>Toggle list view</p>
+              </TooltipContent>
+            </Tooltip>
           </ToggleGroup>
         )}
 
diff --git a/packages/ui/src/components/shadcn/ui/toggle.tsx b/packages/ui/src/components/shadcn/ui/toggle.tsx
index f890298b2ff..7264f15c40b 100644
--- a/packages/ui/src/components/shadcn/ui/toggle.tsx
+++ b/packages/ui/src/components/shadcn/ui/toggle.tsx
@@ -1,13 +1,13 @@
 'use client'
 
-import { Toggle as TogglePrimitive } from 'radix-ui'
 import { cva, type VariantProps } from 'class-variance-authority'
+import { Toggle as TogglePrimitive } from 'radix-ui'
 import * as React from 'react'
 
 import { cn } from '../../../lib/utils/cn'
 
 const toggleVariants = cva(
-  'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors text-foreground-light data-[state=on]:bg-accent data-[state=on]:bg-surface-300 data-[state=on]:text-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 ring-offset-background bg-surface-200 hover:bg-surface-300 px-3 py-1 h-auto transition-all',
+  'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors text-foreground-light data-[state=on]:bg-accent data-[state=on]:bg-surface-300 data-[state=on]:text-foreground aria-checked:bg-accent aria-checked:bg-surface-300 aria-checked:text-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 ring-offset-background bg-surface-200 hover:bg-surface-300 px-3 py-1 h-auto transition-all',
   {
     variants: {
       variant: {