refactor: add title to unread notifications button (#896)

* refactor: add title to unread notifications button

* test: update snapshot

* test: fix tests

Author: setchy

src/components/Sidebar.test.tsx

@@ -137,22 +137,22 @@ 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 />
           </MemoryRouter>
         </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');

src/components/Sidebar.tsx

@@ -52,16 +52,19 @@ export const Sidebar: React.FC = () => {
           <Logo aria-label="Open Gitify" />
         </button>
 
-        <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">

src/components/__snapshots__/Sidebar.test.tsx.snap

@@ -59,13 +59,14 @@ 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"
     >
       <svg
-        aria-hidden="true"
+        aria-hidden="false"
+        aria-label="4 Unread Notifications"
         className="octicon octicon-bell"
         fill="currentColor"
         focusable="false"
@@ -87,7 +88,7 @@ exports[`components/Sidebar.tsx should render itself & its children (logged in)
         />
       </svg>
       4
-    </div>
+    </button>
   </div>
   <div
     className="py-4 px-3"
@@ -187,13 +188,14 @@ 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"
     >
       <svg
-        aria-hidden="true"
+        aria-hidden="false"
+        aria-label="4 Unread Notifications"
         className="octicon octicon-bell"
         fill="currentColor"
         focusable="false"
@@ -215,7 +217,7 @@ exports[`components/Sidebar.tsx should render itself & its children (logged out)
         />
       </svg>
       4
-    </div>
+    </button>
   </div>
   <div
     className="py-4 px-3"