From 599ec622417a6cae001d96f17c874478f75d9640 Mon Sep 17 00:00:00 2001
From: Siddharth Kumar Gope <siddharth8271skg2@gmail.com>
Date: Mon, 14 Jul 2025 02:00:16 +0530
Subject: [PATCH] added tooltip and span to icons for accessiblity

---
 .../Layout/Dashboard/DashboardSidebar.tsx     | 19 ++++++-
 .../Notifications/NotificationsPopover.tsx    | 51 ++++++++++++-------
 2 files changed, 50 insertions(+), 20 deletions(-)

diff --git a/clients/apps/web/src/components/Layout/Dashboard/DashboardSidebar.tsx b/clients/apps/web/src/components/Layout/Dashboard/DashboardSidebar.tsx
index 01ac28133b..deedb1c0b4 100644
--- a/clients/apps/web/src/components/Layout/Dashboard/DashboardSidebar.tsx
+++ b/clients/apps/web/src/components/Layout/Dashboard/DashboardSidebar.tsx
@@ -22,6 +22,12 @@ import {
   SidebarTrigger,
   useSidebar,
 } from '@polar-sh/ui/components/atoms/Sidebar'
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@polar-sh/ui/components/ui/tooltip'
 import { AnimatePresence, motion } from 'framer-motion'
 import { ChevronDown } from 'lucide-react'
 import Link from 'next/link'
@@ -70,8 +76,17 @@ export const DashboardSidebar = ({
           animate={{ opacity: 1 }}
           transition={{ duration: 1 }}
         >
-          <NotificationsPopover />
-          <SidebarTrigger />
+          <NotificationsPopover isCollapsed={isCollapsed} />
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <SidebarTrigger />
+              </TooltipTrigger>
+              <TooltipContent side="right">
+                {isCollapsed ? 'Expand Sidebar' : 'Collapse Sidebar'}
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
         </motion.div>
       </SidebarHeader>
 
diff --git a/clients/apps/web/src/components/Notifications/NotificationsPopover.tsx b/clients/apps/web/src/components/Notifications/NotificationsPopover.tsx
index d1944a2f74..321166679c 100644
--- a/clients/apps/web/src/components/Notifications/NotificationsPopover.tsx
+++ b/clients/apps/web/src/components/Notifications/NotificationsPopover.tsx
@@ -14,6 +14,12 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from '@polar-sh/ui/components/ui/popover'
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@polar-sh/ui/components/ui/tooltip'
 import { getCentsInDollarString } from '@polar-sh/ui/lib/money'
 import Link from 'next/link'
 import { useEffect, useRef, useState } from 'react'
@@ -22,7 +28,7 @@ import Icon from '../Icons/Icon'
 
 type NotificationSchema = schemas['NotificationsList']['notifications'][number]
 
-export const NotificationsPopover = () => {
+export const NotificationsPopover = ({ isCollapsed }: { isCollapsed: boolean }) => {
   const [show, setShow] = useState(false)
   const [showBadge, setShowBadge] = useState(false)
 
@@ -83,23 +89,32 @@ export const NotificationsPopover = () => {
 
   return (
     <Popover>
-      <Button
-        className="relative h-8 w-8"
-        variant="ghost"
-        onMouseDown={clickBell}
-        asChild
-      >
-        <PopoverTrigger>
-          <BoltOutlined
-            className="!h-5 !w-5"
-            fontSize="medium"
-            aria-hidden="true"
-          />
-          {showBadge && (
-            <div className="dark:border-polar-700 absolute right-1 top-1 h-1.5 w-1.5 rounded-full bg-blue-500" />
-          )}
-        </PopoverTrigger>
-      </Button>
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button
+              className="relative h-8 w-8"
+              variant="ghost"
+              onMouseDown={clickBell}
+              asChild
+              aria-label="Notifications"
+            >
+              <PopoverTrigger>
+                <span className="sr-only">Notifications</span>
+                <BoltOutlined
+                  className="!h-5 !w-5"
+                  fontSize="medium"
+                  aria-hidden="true"
+                />
+                {showBadge && (
+                  <div className="dark:border-polar-700 absolute right-1 top-1 h-1.5 w-1.5 rounded-full bg-blue-500" />
+                )}
+              </PopoverTrigger>
+            </Button>
+          </TooltipTrigger>
+          {isCollapsed && <TooltipContent side="right">Notifications</TooltipContent>}
+        </Tooltip>
+      </TooltipProvider>
       <PopoverContent sideOffset={12} align="start">
         <List
           notifications={notifs.data?.notifications ?? []}