From 6f7f2f07fea8d5378201b4bc64ab74e44befe41a Mon Sep 17 00:00:00 2001
From: Adam Setch <adam.setch@outlook.com>
Date: Mon, 18 Mar 2024 08:51:17 -0400
Subject: [PATCH 1/3] refactor: add title to unread notifications button

---
 src/components/Sidebar.tsx                     | 11 +++++++----
 .../__snapshots__/Sidebar.test.tsx.snap        | 18 ++++++++++--------
 2 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index 38574a812..23372a08e 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -49,16 +49,19 @@ export const Sidebar: React.FC = () => {
           onClick={onOpenBrowser}
         />
 
-        <div
+        <button
           className={`flex justify-around self-stretch items-center my-1 py-1 px-2 text-xs font-extrabold cursor-pointer ${
             notificationsCount > 0 ? 'text-green-500' : 'text-white'
           }`}
           onClick={onOpenGitHubNotifications}
-          aria-label={`${notificationsCount} Unread Notifications`}
+          title={`${notificationsCount} Unread Notifications`}
         >
-          <BellIcon size={12} />
+          <BellIcon
+            size={12}
+            aria-label={`${notificationsCount} Unread Notifications`}
+          />
           {notificationsCount > 0 && notificationsCount}
-        </div>
+        </button>
       </div>
 
       <div className="py-4 px-3">
diff --git a/src/components/__snapshots__/Sidebar.test.tsx.snap b/src/components/__snapshots__/Sidebar.test.tsx.snap
index e9cf5c2ac..6b17ae527 100644
--- a/src/components/__snapshots__/Sidebar.test.tsx.snap
+++ b/src/components/__snapshots__/Sidebar.test.tsx.snap
@@ -52,13 +52,14 @@ exports[`components/Sidebar.tsx should render itself & its children (logged in)
         </g>
       </g>
     </svg>
-    <div
-      aria-label="4 Unread Notifications"
+    <button
       className="flex justify-around self-stretch items-center my-1 py-1 px-2 text-xs font-extrabold cursor-pointer text-green-500"
       onClick={[Function]}
+      title="4 Unread Notifications"
     >
       <svg
-        aria-hidden="true"
+        aria-hidden="false"
+        aria-label="4 Unread Notifications"
         className="octicon octicon-bell"
         fill="currentColor"
         focusable="false"
@@ -80,7 +81,7 @@ exports[`components/Sidebar.tsx should render itself & its children (logged in)
         />
       </svg>
       4
-    </div>
+    </button>
   </div>
   <div
     className="py-4 px-3"
@@ -172,13 +173,14 @@ exports[`components/Sidebar.tsx should render itself & its children (logged out)
         </g>
       </g>
     </svg>
-    <div
-      aria-label="4 Unread Notifications"
+    <button
       className="flex justify-around self-stretch items-center my-1 py-1 px-2 text-xs font-extrabold cursor-pointer text-green-500"
       onClick={[Function]}
+      title="4 Unread Notifications"
     >
       <svg
-        aria-hidden="true"
+        aria-hidden="false"
+        aria-label="4 Unread Notifications"
         className="octicon octicon-bell"
         fill="currentColor"
         focusable="false"
@@ -200,7 +202,7 @@ exports[`components/Sidebar.tsx should render itself & its children (logged out)
         />
       </svg>
       4
-    </div>
+    </button>
   </div>
   <div
     className="py-4 px-3"

From 74fc8fc48b27e462ad50b9c41fd2bcec435b2b8d Mon Sep 17 00:00:00 2001
From: Adam Setch <adam.setch@outlook.com>
Date: Mon, 18 Mar 2024 10:42:49 -0400
Subject: [PATCH 2/3] test: update snapshot

---
 src/components/__snapshots__/Sidebar.test.tsx.snap | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/components/__snapshots__/Sidebar.test.tsx.snap b/src/components/__snapshots__/Sidebar.test.tsx.snap
index 86d27f68a..8db67adcc 100644
--- a/src/components/__snapshots__/Sidebar.test.tsx.snap
+++ b/src/components/__snapshots__/Sidebar.test.tsx.snap
@@ -59,8 +59,7 @@ exports[`components/Sidebar.tsx should render itself & its children (logged in)
         </g>
       </svg>
     </button>
-    <div
-      aria-label="4 Unread Notifications"
+    <button
       className="flex justify-around self-stretch items-center my-1 py-1 px-2 text-xs font-extrabold cursor-pointer text-green-500"
       onClick={[Function]}
       title="4 Unread Notifications"
@@ -189,8 +188,7 @@ exports[`components/Sidebar.tsx should render itself & its children (logged out)
         </g>
       </svg>
     </button>
-    <div
-      aria-label="4 Unread Notifications"
+    <button
       className="flex justify-around self-stretch items-center my-1 py-1 px-2 text-xs font-extrabold cursor-pointer text-green-500"
       onClick={[Function]}
       title="4 Unread Notifications"

From cf19e721ef51548edf8877ea56b9fad9d609b932 Mon Sep 17 00:00:00 2001
From: Adam Setch <adam.setch@outlook.com>
Date: Mon, 18 Mar 2024 10:51:57 -0400
Subject: [PATCH 3/3] test: fix tests

---
 src/components/Sidebar.test.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/Sidebar.test.tsx b/src/components/Sidebar.test.tsx
index b9e5a82cd..685b496b3 100644
--- a/src/components/Sidebar.test.tsx
+++ b/src/components/Sidebar.test.tsx
@@ -137,7 +137,7 @@ describe('components/Sidebar.tsx', () => {
 
   describe('should render the notifications icon', () => {
     it('when there are 0 notifications', () => {
-      const { getByLabelText } = render(
+      const { getByTitle } = render(
         <AppContext.Provider value={{ isLoggedIn: true, notifications: [] }}>
           <MemoryRouter>
             <Sidebar />
@@ -145,14 +145,14 @@ describe('components/Sidebar.tsx', () => {
         </AppContext.Provider>,
       );
 
-      const notificationsIcon = getByLabelText('0 Unread Notifications');
+      const notificationsIcon = getByTitle('0 Unread Notifications');
       expect(notificationsIcon.className).toContain('text-white');
       expect(notificationsIcon.childNodes.length).toBe(1);
       expect(notificationsIcon.childNodes[0].nodeName).toBe('svg');
     });
 
     it('when there are more than 0 notifications', () => {
-      const { getByLabelText } = render(
+      const { getByTitle } = render(
         <AppContext.Provider
           value={{
             isLoggedIn: true,
@@ -165,7 +165,7 @@ describe('components/Sidebar.tsx', () => {
         </AppContext.Provider>,
       );
 
-      const notificationsIcon = getByLabelText('4 Unread Notifications');
+      const notificationsIcon = getByTitle('4 Unread Notifications');
       expect(notificationsIcon.className).toContain('text-green-500');
       expect(notificationsIcon.childNodes.length).toBe(2);
       expect(notificationsIcon.childNodes[0].nodeName).toBe('svg');