Repository: gitify-app/gitify
Pull request #891 (2024-03-18 12:41:49)

refactor: ensure all buttons have label and accessibility text
Ensure each button has a `label` property for hover-over text, and that `aria-label` for accessibility is set appropriately for icons


Patch:
diff --git a/package.json b/package.json
index ed66830f..a84432a2 100644
--- a/package.json
+++ b/package.json
@@ -105,7 +105,7 @@
     "@electron/remote": "2.1.2",
     "@primer/octicons-react": "19.8.0",
     "axios": "1.6.8",
-    "date-fns": "3.5.0",
+    "date-fns": "3.6.0",
     "electron-updater": "6.1.8",
     "final-form": "4.20.10",
     "menubar": "9.4.0",
@@ -136,7 +136,7 @@
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
     "nock": "13.5.4",
-    "postcss": "8.4.35",
+    "postcss": "8.4.36",
     "postcss-loader": "8.1.1",
     "prettier": "3.2.5",
     "react-test-renderer": "18.2.0",
@@ -148,7 +148,7 @@
     "webpack-cli": "5.1.4",
     "webpack-merge": "5.10.0"
   },
-  "packageManager": "pnpm@8.15.4",
+  "packageManager": "pnpm@8.15.5",
   "lint-staged": {
     "*.{md,js,ts,tsx}": "prettier --write"
   },
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 14523a02..23f57bc3 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -18,8 +18,8 @@ dependencies:
     specifier: 1.6.8
     version: 1.6.8
   date-fns:
-    specifier: 3.5.0
-    version: 3.5.0
+    specifier: 3.6.0
+    version: 3.6.0
   electron-updater:
     specifier: 6.1.8
     version: 6.1.8
@@ -84,7 +84,7 @@ devDependencies:
     version: 4.4.10
   autoprefixer:
     specifier: 10.4.18
-    version: 10.4.18(postcss@8.4.35)
+    version: 10.4.18(postcss@8.4.36)
   css-loader:
     specifier: 6.10.0
     version: 6.10.0(webpack@5.90.3)
@@ -107,11 +107,11 @@ devDependencies:
     specifier: 13.5.4
     version: 13.5.4
   postcss:
-    specifier: 8.4.35
-    version: 8.4.35
+    specifier: 8.4.36
+    version: 8.4.36
   postcss-loader:
     specifier: 8.1.1
-    version: 8.1.1(postcss@8.4.35)(typescript@5.4.2)(webpack@5.90.3)
+    version: 8.1.1(postcss@8.4.36)(typescript@5.4.2)(webpack@5.90.3)
   prettier:
     specifier: 3.2.5
     version: 3.2.5
@@ -1684,7 +1684,7 @@ packages:
     engines: {node: '>= 4.0.0'}
     dev: true
 
-  /autoprefixer@10.4.18(postcss@8.4.35):
+  /autoprefixer@10.4.18(postcss@8.4.36):
     resolution: {integrity: sha512-1DKbDfsr6KUElM6wg+0zRNkB/Q7WcKYAaK+pzXn+Xqmszm/5Xa9coeNdtP88Vi+dPzZnMjhge8GIV49ZQkDa+g==}
     engines: {node: ^10 || ^12 || >=14}
     hasBin: true
@@ -1696,7 +1696,7 @@ packages:
       fraction.js: 4.3.7
       normalize-range: 0.1.2
       picocolors: 1.0.0
-      postcss: 8.4.35
+      postcss: 8.4.36
       postcss-value-parser: 4.2.0
     dev: true
 
@@ -2251,12 +2251,12 @@ packages:
       webpack:
         optional: true
     dependencies:
-      icss-utils: 5.1.0(postcss@8.4.35)
-      postcss: 8.4.35
-      postcss-modules-extract-imports: 3.0.0(postcss@8.4.35)
-      postcss-modules-local-by-default: 4.0.4(postcss@8.4.35)
-      postcss-modules-scope: 3.1.1(postcss@8.4.35)
-      postcss-modules-values: 4.0.0(postcss@8.4.35)
+      icss-utils: 5.1.0(postcss@8.4.36)
+      postcss: 8.4.36
+      postcss-modules-extract-imports: 3.0.0(postcss@8.4.36)
+      postcss-modules-local-by-default: 4.0.4(postcss@8.4.36)
+      postcss-modules-scope: 3.1.1(postcss@8.4.36)
+      postcss-modules-values: 4.0.0(postcss@8.4.36)
       postcss-value-parser: 4.2.0
       semver: 7.5.4
       webpack: 5.90.3(webpack-cli@5.1.4)
@@ -2295,8 +2295,8 @@ packages:
       whatwg-url: 11.0.0
     dev: true
 
-  /date-fns@3.5.0:
-    resolution: {integrity: sha512-a+DwyXn7NOfdJireCzAA0B9p7jIXEu/Q9JKCyMYvH6+0vPUNbQceA0neXrdfJ/xzl3mhOh5vibQQ3936Tssm6A==}
+  /date-fns@3.6.0:
+    resolution: {integrity: sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==}
     dev: false
 
   /debug@4.3.4:
@@ -3188,13 +3188,13 @@ packages:
       safer-buffer: 2.1.2
     dev: true
 
-  /icss-utils@5.1.0(postcss@8.4.35):
+  /icss-utils@5.1.0(postcss@8.4.36):
     resolution: {integrity: sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==}
     engines: {node: ^10 || ^12 || >= 14}
     peerDependencies:
       postcss: ^8.1.0
     dependencies:
-      postcss: 8.4.35
+      postcss: 8.4.36
     dev: true
 
   /ieee754@1.2.1:
@@ -4537,29 +4537,29 @@ packages:
       xmlbuilder: 15.1.1
     dev: true
 
-  /postcss-import@15.1.0(postcss@8.4.35):
+  /postcss-import@15.1.0(postcss@8.4.36):
     resolution: {integrity: sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==}
     engines: {node: '>=14.0.0'}
     peerDependencies:
       postcss: ^8.0.0
     dependencies:
-      postcss: 8.4.35
+      postcss: 8.4.36
       postcss-value-parser: 4.2.0
       read-cache: 1.0.0
       resolve: 1.22.2
     dev: true
 
-  /postcss-js@4.0.1(postcss@8.4.35):
+  /postcss-js@4.0.1(postcss@8.4.36):
     resolution: {integrity: sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==}
     engines: {node: ^12 || ^14 || >= 16}
     peerDependencies:
       postcss: ^8.4.21
     dependencies:
       camelcase-css: 2.0.1
-      postcss: 8.4.35
+      postcss: 8.4.36
     dev: true
 
-  /postcss-load-config@4.0.1(postcss@8.4.35):
+  /postcss-load-config@4.0.1(postcss@8.4.36):
     resolution: {integrity: sha512-vEJIc8RdiBRu3oRAI0ymerOn+7rPuMvRXslTvZUKZonDHFIczxztIyJ1urxM1x9JXEikvpWWTUUqal5j/8QgvA==}
     engines: {node: '>= 14'}
     peerDependencies:
@@ -4572,11 +4572,11 @@ packages:
         optional: true
     dependencies:
       lilconfig: 2.1.0
-      postcss: 8.4.35
+      postcss: 8.4.36
       yaml: 2.3.2
     dev: true
 
-  /postcss-loader@8.1.1(postcss@8.4.35)(typescript@5.4.2)(webpack@5.90.3):
+  /postcss-loader@8.1.1(postcss@8.4.36)(typescript@5.4.2)(webpack@5.90.3):
     resolution: {integrity: sha512-0IeqyAsG6tYiDRCYKQJLAmgQr47DX6N7sFSWvQxt6AcupX8DIdmykuk/o/tx0Lze3ErGHJEp5OSRxrelC6+NdQ==}
     engines: {node: '>= 18.12.0'}
     peerDependencies:
@@ -4591,61 +4591,61 @@ packages:
     dependencies:
       cosmiconfig: 9.0.0(typescript@5.4.2)
       jiti: 1.20.0
-      postcss: 8.4.35
+      postcss: 8.4.36
       semver: 7.5.4
       webpack: 5.90.3(webpack-cli@5.1.4)
     transitivePeerDependencies:
       - typescript
     dev: true
 
-  /postcss-modules-extract-imports@3.0.0(postcss@8.4.35):
+  /postcss-modules-extract-imports@3.0.0(postcss@8.4.36):
     resolution: {integrity: sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==}
     engines: {node: ^10 || ^12 || >= 14}
     peerDependencies:
       postcss: ^8.1.0
     dependencies:
-      postcss: 8.4.35
+      postcss: 8.4.36
     dev: true
 
-  /postcss-modules-local-by-default@4.0.4(postcss@8.4.35):
+  /postcss-modules-local-by-default@4.0.4(postcss@8.4.36):
     resolution: {integrity: sha512-L4QzMnOdVwRm1Qb8m4x8jsZzKAaPAgrUF1r/hjDR2Xj7R+8Zsf97jAlSQzWtKx5YNiNGN8QxmPFIc/sh+RQl+Q==}
     engines: {node: ^10 || ^12 || >= 14}
     peerDependencies:
       postcss: ^8.1.0
     dependencies:
-      icss-utils: 5.1.0(postcss@8.4.35)
-      postcss: 8.4.35
+      icss-utils: 5.1.0(postcss@8.4.36)
+      postcss: 8.4.36
       postcss-selector-parser: 6.0.13
       postcss-value-parser: 4.2.0
     dev: true
 
-  /postcss-modules-scope@3.1.1(postcss@8.4.35):
+  /postcss-modules-scope@3.1.1(postcss@8.4.36):
     resolution: {integrity: sha512-uZgqzdTleelWjzJY+Fhti6F3C9iF1JR/dODLs/JDefozYcKTBCdD8BIl6nNPbTbcLnGrk56hzwZC2DaGNvYjzA==}
     engines: {node: ^10 || ^12 || >= 14}
     peerDependencies:
       postcss: ^8.1.0
     dependencies:
-      postcss: 8.4.35
+      postcss: 8.4.36
       postcss-selector-parser: 6.0.13
     dev: true
 
-  /postcss-modules-values@4.0.0(postcss@8.4.35):
+  /postcss-modules-values@4.0.0(postcss@8.4.36):
     resolution: {integrity: sha512-RDxHkAiEGI78gS2ofyvCsu7iycRv7oqw5xMWn9iMoR0N/7mf9D50ecQqUo5BZ9Zh2vH4bCUR/ktCqbB9m8vJjQ==}
     engines: {node: ^10 || ^12 || >= 14}
     peerDependencies:
       postcss: ^8.1.0
     dependencies:
-      icss-utils: 5.1.0(postcss@8.4.35)
-      postcss: 8.4.35
+      icss-utils: 5.1.0(postcss@8.4.36)
+      postcss: 8.4.36
     dev: true
 
-  /postcss-nested@6.0.1(postcss@8.4.35):
+  /postcss-nested@6.0.1(postcss@8.4.36):
     resolution: {integrity: sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==}
     engines: {node: '>=12.0'}
     peerDependencies:
       postcss: ^8.2.14
     dependencies:
-      postcss: 8.4.35
+      postcss: 8.4.36
       postcss-selector-parser: 6.0.13
     dev: true
 
@@ -4661,13 +4661,13 @@ packages:
     resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
     dev: true
 
-  /postcss@8.4.35:
-    resolution: {integrity: sha512-u5U8qYpBCpN13BsiEB0CbR1Hhh4Gc0zLFuedrHJKMctHCHAGrMdG0PRM/KErzAL3CU6/eckEtmHNB3x6e3c0vA==}
+  /postcss@8.4.36:
+    resolution: {integrity: sha512-/n7eumA6ZjFHAsbX30yhHup/IMkOmlmvtEi7P+6RMYf+bGJSUHc3geH4a0NSZxAz/RJfiS9tooCTs9LAVYUZKw==}
     engines: {node: ^10 || ^12 || >=14}
     dependencies:
       nanoid: 3.3.7
       picocolors: 1.0.0
-      source-map-js: 1.0.2
+      source-map-js: 1.1.0
     dev: true
 
   /prettier@3.2.5:
@@ -5170,8 +5170,8 @@ packages:
     dev: true
     optional: true
 
-  /source-map-js@1.0.2:
-    resolution: {integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==}
+  /source-map-js@1.1.0:
+    resolution: {integrity: sha512-9vC2SfsJzlej6MAaMPLu8HiBSHGdRAJ9hVFYN1ibZoNkeanmDmLUcIrj6G9DGL7XMJ54AKg/G75akXl1/izTOw==}
     engines: {node: '>=0.10.0'}
     dev: true
 
@@ -5369,11 +5369,11 @@ packages:
       normalize-path: 3.0.0
       object-hash: 3.0.0
       picocolors: 1.0.0
-      postcss: 8.4.35
-      postcss-import: 15.1.0(postcss@8.4.35)
-      postcss-js: 4.0.1(postcss@8.4.35)
-      postcss-load-config: 4.0.1(postcss@8.4.35)
-      postcss-nested: 6.0.1(postcss@8.4.35)
+      postcss: 8.4.36
+      postcss-import: 15.1.0(postcss@8.4.36)
+      postcss-js: 4.0.1(postcss@8.4.36)
+      postcss-load-config: 4.0.1(postcss@8.4.36)
+      postcss-nested: 6.0.1(postcss@8.4.36)
       postcss-selector-parser: 6.0.13
       resolve: 1.22.2
       sucrase: 3.34.0
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index 38574a81..c0f685ef 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -43,11 +43,14 @@ export const Sidebar: React.FC = () => {
   return (
     <div className="flex flex-col fixed left-14 w-14 -ml-14 h-full bg-gray-sidebar overflow-y-auto	">
       <div className="flex flex-col flex-1 items-center py-4">
-        <Logo
+        <button
           className="w-5 my-3 mx-auto cursor-pointer"
-          data-testid="gitify-logo"
+          title="Open Gitify on GitHub"
           onClick={onOpenBrowser}
-        />
+          data-testid="gitify-logo"
+        >
+          <Logo aria-label="Open Gitify" />
+        </button>
 
         <div
           className={`flex justify-around self-stretch items-center my-1 py-1 px-2 text-xs font-extrabold cursor-pointer ${
@@ -66,17 +69,21 @@ export const Sidebar: React.FC = () => {
           <>
             <button
               className={footerButtonClasses}
+              title="Refresh Notifications"
               onClick={() => {
                 navigate('/', { replace: true });
                 fetchNotifications();
               }}
-              aria-label="Refresh Notifications"
             >
-              <IconRefresh className="w-3.5 h-3.5" />
+              <IconRefresh
+                className="w-3.5 h-3.5"
+                aria-label="Refresh Notifications"
+              />
             </button>
 
             <button
               className={footerButtonClasses}
+              title="Settings"
               onClick={() => {
                 if (location.pathname.startsWith('/settings')) {
                   navigate('/', { replace: true });
@@ -84,9 +91,8 @@ export const Sidebar: React.FC = () => {
                   navigate('/settings');
                 }
               }}
-              aria-label="Settings"
             >
-              <IconCog className="w-4 h-4" />
+              <IconCog className="w-4 h-4" aria-label="Settings" />
             </button>
           </>
         )}
@@ -94,8 +100,9 @@ export const Sidebar: React.FC = () => {
         {!isLoggedIn && (
           <button
             className={footerButtonClasses}
+            title="Quit Gitify"
+            aria-label="Quit Gitify"
             onClick={quitApp}
-            aria-label="Quit App"
           >
             <IconQuit className="w-3.5 h-3.5" />
           </button>
diff --git a/src/routes/Login.tsx b/src/routes/Login.tsx
index 21467586..1a027f8d 100644
--- a/src/routes/Login.tsx
+++ b/src/routes/Login.tsx
@@ -38,24 +38,27 @@ export const LoginRoute: React.FC = () => {
 
       <button
         className={loginButtonClass}
-        onClick={loginUser}
+        title="Login with GitHub"
         aria-label="Login with GitHub"
+        onClick={loginUser}
       >
         Login to GitHub
       </button>
 
       <button
         className={loginButtonClass}
-        onClick={() => navigate('/login-enterprise')}
+        title="Login with GitHub Enterprise"
         aria-label="Login with GitHub Enterprise"
+        onClick={() => navigate('/login-enterprise')}
       >
         Login to GitHub Enterprise
       </button>
 
       <button
         className="bg-none hover:text-gray-800 dark:text-gray-100 dark:hover:text-gray-300 mt-4 focus:outline-none"
-        onClick={() => navigate('/login-token')}
+        title="Login with Personal Token"
         aria-label="Login with Personal Token"
+        onClick={() => navigate('/login-token')}
       >
         <small>or login with a personal token</small>
       </button>
diff --git a/src/routes/LoginEnterprise.tsx b/src/routes/LoginEnterprise.tsx
index eef567b9..af7bd561 100644
--- a/src/routes/LoginEnterprise.tsx
+++ b/src/routes/LoginEnterprise.tsx
@@ -85,9 +85,9 @@ export const LoginEnterpriseRoute: React.FC = () => {
 
         <button
           className="float-right px-4 py-2 my-4 bg-gray-300 font-semibold rounded text-sm text-center hover:bg-gray-500 hover:text-white dark:text-black focus:outline-none"
+          title="Login Button"
           disabled={submitting || pristine}
           type="submit"
-          title="Login Button"
         >
           Login
         </button>
@@ -108,10 +108,14 @@ export const LoginEnterpriseRoute: React.FC = () => {
       <div className="flex justify-between items-center mt-4 py-2 mx-8">
         <button
           className="focus:outline-none"
-          aria-label="Go Back"
+          title="Go Back"
           onClick={() => navigate(-1)}
         >
-          <ArrowLeftIcon size={20} className="hover:text-gray-400" />
+          <ArrowLeftIcon
+            size={20}
+            className="hover:text-gray-400"
+            aria-label="Go Back"
+          />
         </button>
 
         <h3 className="text-lg font-semibold">Login with GitHub Enterprise</h3>
diff --git a/src/routes/LoginWithToken.tsx b/src/routes/LoginWithToken.tsx
index d14285bb..a90609cf 100644
--- a/src/routes/LoginWithToken.tsx
+++ b/src/routes/LoginWithToken.tsx
@@ -95,9 +95,9 @@ export const LoginWithToken: React.FC = () => {
 
         <button
           className="float-right px-4 py-2 my-4 bg-gray-300 font-semibold rounded text-sm text-center hover:bg-gray-500 hover:text-white dark:text-black focus:outline-none"
+          title="Submit Button"
           disabled={submitting || pristine}
           type="submit"
-          title="Submit Button"
         >
           Submit
         </button>
@@ -120,10 +120,14 @@ export const LoginWithToken: React.FC = () => {
       <div className="flex justify-between items-center mt-4 py-2 mx-8">
         <button
           className="focus:outline-none"
-          aria-label="Go Back"
+          title="Go Back"
           onClick={() => navigate(-1)}
         >
-          <ArrowLeftIcon size={20} className="hover:text-gray-400" />
+          <ArrowLeftIcon
+            size={20}
+            className="hover:text-gray-400"
+            aria-label="Go Back"
+          />
         </button>
 
         <h3 className="text-lg font-semibold">Login with an access token</h3>
diff --git a/src/routes/Settings.tsx b/src/routes/Settings.tsx
index 78478e2f..9ee9585c 100644
--- a/src/routes/Settings.tsx
+++ b/src/routes/Settings.tsx
@@ -84,10 +84,14 @@ export const SettingsRoute: React.FC = () => {
       <div className="flex justify-between items-center mt-4 py-2 mx-8">
         <button
           className="focus:outline-none"
-          aria-label="Go Back"
+          title="Go Back"
           onClick={() => navigate(-1)}
         >
-          <ArrowLeftIcon size={20} className="hover:text-gray-400" />
+          <ArrowLeftIcon
+            size={20}
+            className="hover:text-gray-400"
+            aria-label="Go Back"
+          />
         </button>
 
         <h3 className="text-lg font-semibold">Settings</h3>
@@ -165,26 +169,29 @@ export const SettingsRoute: React.FC = () => {
         <div>
           <button
             className={footerButtonClass}
-            aria-label="Login with GitHub Enterprise"
+            title="Login with GitHub Enterprise"
             onClick={goToEnterprise}
           >
-            <IconAddAccount className="w-5 h-5" />
+            <IconAddAccount
+              className="w-5 h-5"
+              aria-label="Login with GitHub Enterprise"
+            />
           </button>
 
           <button
             className={footerButtonClass}
-            aria-label="Logout"
+            title="Logout"
             onClick={logoutUser}
           >
-            <IconLogOut className="w-5 h-5" />
+            <IconLogOut className="w-5 h-5" aria-label="Logout" />
           </button>
 
           <button
             className={`${footerButtonClass} mr-0`}
-            aria-label="Quit Gitify"
+            title="Quit Gitify"
             onClick={quitApp}
           >
-            <IconQuit className="w-5 h-5" />
+            <IconQuit className="w-5 h-5" aria-label="Quit Gitify" />
           </button>
         </div>
       </div>


Test patch:
diff --git a/src/components/Sidebar.test.tsx b/src/components/Sidebar.test.tsx
index 6582f917..b9e5a82c 100644
--- a/src/components/Sidebar.test.tsx
+++ b/src/components/Sidebar.test.tsx
@@ -61,7 +61,7 @@ describe('components/Sidebar.tsx', () => {
   });
 
   it('should refresh the notifications', () => {
-    const { getByLabelText } = render(
+    const { getByTitle } = render(
       <AppContext.Provider
         value={{ isLoggedIn: true, notifications: [], fetchNotifications }}
       >
@@ -71,19 +71,19 @@ describe('components/Sidebar.tsx', () => {
       </AppContext.Provider>,
     );
     fetchNotifications.mockReset();
-    fireEvent.click(getByLabelText('Refresh Notifications'));
+    fireEvent.click(getByTitle('Refresh Notifications'));
     expect(fetchNotifications).toHaveBeenCalledTimes(1);
   });
 
   it('go to the settings route', () => {
-    const { getByLabelText } = render(
+    const { getByTitle } = render(
       <AppContext.Provider value={{ isLoggedIn: true, notifications: [] }}>
         <MemoryRouter>
           <Sidebar />
         </MemoryRouter>
       </AppContext.Provider>,
     );
-    fireEvent.click(getByLabelText('Settings'));
+    fireEvent.click(getByTitle('Settings'));
     expect(mockNavigate).toHaveBeenNthCalledWith(1, '/settings');
   });
 
@@ -108,14 +108,14 @@ describe('components/Sidebar.tsx', () => {
   });
 
   it('should quit the app', () => {
-    const { getByLabelText } = render(
+    const { getByTitle } = render(
       <AppContext.Provider value={{ isLoggedIn: false, notifications: [] }}>
         <MemoryRouter>
           <Sidebar />
         </MemoryRouter>
       </AppContext.Provider>,
     );
-    fireEvent.click(getByLabelText('Quit App'));
+    fireEvent.click(getByTitle('Quit Gitify'));
     expect(ipcRenderer.send).toHaveBeenCalledTimes(1);
     expect(ipcRenderer.send).toHaveBeenCalledWith('app-quit');
   });
diff --git a/src/components/__snapshots__/Sidebar.test.tsx.snap b/src/components/__snapshots__/Sidebar.test.tsx.snap
index e9cf5c2a..5b1f0bf9 100644
--- a/src/components/__snapshots__/Sidebar.test.tsx.snap
+++ b/src/components/__snapshots__/Sidebar.test.tsx.snap
@@ -7,51 +7,58 @@ exports[`components/Sidebar.tsx should render itself & its children (logged in)
   <div
     className="flex flex-col flex-1 items-center py-4"
   >
-    <svg
+    <button
       className="w-5 my-3 mx-auto cursor-pointer"
       data-testid="gitify-logo"
       onClick={[Function]}
-      role="logo"
-      viewBox="0 0 500 500"
-      xmlns="http://www.w3.org/2000/svg"
-      xmlnsXlink="http://www.w3.org/1999/xlink"
+      title="Open Gitify on GitHub"
     >
-      <defs>
-        <linearGradient
-          id="linearGradient-light"
-          x1="90.8779989%"
-          x2="-1.30249747%"
-          y1="80.0676288%"
-          y2="32.7108237%"
-        >
-          <stop
-            offset="0%"
-            stopColor="#CCCCCC"
-          />
-          <stop
-            offset="100%"
-            stopColor="#FFFFFF"
-          />
-        </linearGradient>
-      </defs>
-      <g
-        fill="none"
-        fillRule="evenodd"
-        stroke="none"
-        strokeWidth="1"
+      <svg
+        aria-label="Open Gitify"
+        className=""
+        onClick={[Function]}
+        role="logo"
+        viewBox="0 0 500 500"
+        xmlns="http://www.w3.org/2000/svg"
+        xmlnsXlink="http://www.w3.org/1999/xlink"
       >
+        <defs>
+          <linearGradient
+            id="linearGradient-light"
+            x1="90.8779989%"
+            x2="-1.30249747%"
+            y1="80.0676288%"
+            y2="32.7108237%"
+          >
+            <stop
+              offset="0%"
+              stopColor="#CCCCCC"
+            />
+            <stop
+              offset="100%"
+              stopColor="#FFFFFF"
+            />
+          </linearGradient>
+        </defs>
         <g
-          fill="url(#linearGradient-light)"
-          fillRule="nonzero"
-          id="Logo"
-          transform="translate(6.000000, 6.000000)"
+          fill="none"
+          fillRule="evenodd"
+          stroke="none"
+          strokeWidth="1"
         >
-          <path
-            d="M330.391053,10.2526316 C361.413773,10.2526316 386.562656,35.4015165 386.562656,66.4242368 C386.562656,97.4469571 361.413773,122.595841 330.391053,122.595842 L330.365421,122.570211 L247.319105,122.570211 C180.042515,122.499128 125.399186,176.890222 125.159,244.166421 L125.133789,244.219632 L125.154247,245.84774 C126.219609,301.255958 164.473457,349.116728 218.453292,362.268048 C272.940509,375.542983 329.466993,350.045988 355.583747,300.428701 L272.258632,300.427737 C257.346614,300.427737 243.046846,294.496977 232.512078,283.942976 C221.97731,273.388975 216.072618,259.078414 216.099748,244.166421 C216.099748,213.150778 241.242989,188.007632 272.258632,188.007632 L371.119632,188.007632 C379.28704,188.480415 386.935401,192.166372 392.393842,198.260263 L474.869789,300.324632 L474.978789,300.325211 L474.952789,300.426632 L474.953158,300.427737 L474.951789,300.427632 L474.173714,303.448935 C446.939817,406.220475 353.906452,478.028529 247.319105,478.080211 C118.007789,478.080211 12.8157895,373.144526 12.8157895,244.166421 C12.8157895,115.188316 117.905263,10.2526316 247.319105,10.2526316 L330.391053,10.2526316 Z"
-          />
+          <g
+            fill="url(#linearGradient-light)"
+            fillRule="nonzero"
+            id="Logo"
+            transform="translate(6.000000, 6.000000)"
+          >
+            <path
+              d="M330.391053,10.2526316 C361.413773,10.2526316 386.562656,35.4015165 386.562656,66.4242368 C386.562656,97.4469571 361.413773,122.595841 330.391053,122.595842 L330.365421,122.570211 L247.319105,122.570211 C180.042515,122.499128 125.399186,176.890222 125.159,244.166421 L125.133789,244.219632 L125.154247,245.84774 C126.219609,301.255958 164.473457,349.116728 218.453292,362.268048 C272.940509,375.542983 329.466993,350.045988 355.583747,300.428701 L272.258632,300.427737 C257.346614,300.427737 243.046846,294.496977 232.512078,283.942976 C221.97731,273.388975 216.072618,259.078414 216.099748,244.166421 C216.099748,213.150778 241.242989,188.007632 272.258632,188.007632 L371.119632,188.007632 C379.28704,188.480415 386.935401,192.166372 392.393842,198.260263 L474.869789,300.324632 L474.978789,300.325211 L474.952789,300.426632 L474.953158,300.427737 L474.951789,300.427632 L474.173714,303.448935 C446.939817,406.220475 353.906452,478.028529 247.319105,478.080211 C118.007789,478.080211 12.8157895,373.144526 12.8157895,244.166421 C12.8157895,115.188316 117.905263,10.2526316 247.319105,10.2526316 L330.391053,10.2526316 Z"
+            />
+          </g>
         </g>
-      </g>
-    </svg>
+      </svg>
+    </button>
     <div
       aria-label="4 Unread Notifications"
       className="flex justify-around self-stretch items-center my-1 py-1 px-2 text-xs font-extrabold cursor-pointer text-green-500"
@@ -86,9 +93,10 @@ exports[`components/Sidebar.tsx should render itself & its children (logged in)
     className="py-4 px-3"
   >
     <button
-      aria-label="Quit App"
+      aria-label="Quit Gitify"
       className="flex justify-evenly items-center bg-transparent border-0 w-full text-sm text-white my-1 py-2 cursor-pointer hover:text-gray-500 focus:outline-none"
       onClick={[Function]}
+      title="Quit Gitify"
     >
       <svg
         aria-hidden="true"
@@ -127,51 +135,58 @@ exports[`components/Sidebar.tsx should render itself & its children (logged out)
   <div
     className="flex flex-col flex-1 items-center py-4"
   >
-    <svg
+    <button
       className="w-5 my-3 mx-auto cursor-pointer"
       data-testid="gitify-logo"
       onClick={[Function]}
-      role="logo"
-      viewBox="0 0 500 500"
-      xmlns="http://www.w3.org/2000/svg"
-      xmlnsXlink="http://www.w3.org/1999/xlink"
+      title="Open Gitify on GitHub"
     >
-      <defs>
-        <linearGradient
-          id="linearGradient-light"
-          x1="90.8779989%"
-          x2="-1.30249747%"
-          y1="80.0676288%"
-          y2="32.7108237%"
-        >
-          <stop
-            offset="0%"
-            stopColor="#CCCCCC"
-          />
-          <stop
-            offset="100%"
-            stopColor="#FFFFFF"
-          />
-        </linearGradient>
-      </defs>
-      <g
-        fill="none"
-        fillRule="evenodd"
-        stroke="none"
-        strokeWidth="1"
+      <svg
+        aria-label="Open Gitify"
+        className=""
+        onClick={[Function]}
+        role="logo"
+        viewBox="0 0 500 500"
+        xmlns="http://www.w3.org/2000/svg"
+        xmlnsXlink="http://www.w3.org/1999/xlink"
       >
+        <defs>
+          <linearGradient
+            id="linearGradient-light"
+            x1="90.8779989%"
+            x2="-1.30249747%"
+            y1="80.0676288%"
+            y2="32.7108237%"
+          >
+            <stop
+              offset="0%"
+              stopColor="#CCCCCC"
+            />
+            <stop
+              offset="100%"
+              stopColor="#FFFFFF"
+            />
+          </linearGradient>
+        </defs>
         <g
-          fill="url(#linearGradient-light)"
-          fillRule="nonzero"
-          id="Logo"
-          transform="translate(6.000000, 6.000000)"
+          fill="none"
+          fillRule="evenodd"
+          stroke="none"
+          strokeWidth="1"
         >
-          <path
-            d="M330.391053,10.2526316 C361.413773,10.2526316 386.562656,35.4015165 386.562656,66.4242368 C386.562656,97.4469571 361.413773,122.595841 330.391053,122.595842 L330.365421,122.570211 L247.319105,122.570211 C180.042515,122.499128 125.399186,176.890222 125.159,244.166421 L125.133789,244.219632 L125.154247,245.84774 C126.219609,301.255958 164.473457,349.116728 218.453292,362.268048 C272.940509,375.542983 329.466993,350.045988 355.583747,300.428701 L272.258632,300.427737 C257.346614,300.427737 243.046846,294.496977 232.512078,283.942976 C221.97731,273.388975 216.072618,259.078414 216.099748,244.166421 C216.099748,213.150778 241.242989,188.007632 272.258632,188.007632 L371.119632,188.007632 C379.28704,188.480415 386.935401,192.166372 392.393842,198.260263 L474.869789,300.324632 L474.978789,300.325211 L474.952789,300.426632 L474.953158,300.427737 L474.951789,300.427632 L474.173714,303.448935 C446.939817,406.220475 353.906452,478.028529 247.319105,478.080211 C118.007789,478.080211 12.8157895,373.144526 12.8157895,244.166421 C12.8157895,115.188316 117.905263,10.2526316 247.319105,10.2526316 L330.391053,10.2526316 Z"
-          />
+          <g
+            fill="url(#linearGradient-light)"
+            fillRule="nonzero"
+            id="Logo"
+            transform="translate(6.000000, 6.000000)"
+          >
+            <path
+              d="M330.391053,10.2526316 C361.413773,10.2526316 386.562656,35.4015165 386.562656,66.4242368 C386.562656,97.4469571 361.413773,122.595841 330.391053,122.595842 L330.365421,122.570211 L247.319105,122.570211 C180.042515,122.499128 125.399186,176.890222 125.159,244.166421 L125.133789,244.219632 L125.154247,245.84774 C126.219609,301.255958 164.473457,349.116728 218.453292,362.268048 C272.940509,375.542983 329.466993,350.045988 355.583747,300.428701 L272.258632,300.427737 C257.346614,300.427737 243.046846,294.496977 232.512078,283.942976 C221.97731,273.388975 216.072618,259.078414 216.099748,244.166421 C216.099748,213.150778 241.242989,188.007632 272.258632,188.007632 L371.119632,188.007632 C379.28704,188.480415 386.935401,192.166372 392.393842,198.260263 L474.869789,300.324632 L474.978789,300.325211 L474.952789,300.426632 L474.953158,300.427737 L474.951789,300.427632 L474.173714,303.448935 C446.939817,406.220475 353.906452,478.028529 247.319105,478.080211 C118.007789,478.080211 12.8157895,373.144526 12.8157895,244.166421 C12.8157895,115.188316 117.905263,10.2526316 247.319105,10.2526316 L330.391053,10.2526316 Z"
+            />
+          </g>
         </g>
-      </g>
-    </svg>
+      </svg>
+    </button>
     <div
       aria-label="4 Unread Notifications"
       className="flex justify-around self-stretch items-center my-1 py-1 px-2 text-xs font-extrabold cursor-pointer text-green-500"
@@ -206,9 +221,10 @@ exports[`components/Sidebar.tsx should render itself & its children (logged out)
     className="py-4 px-3"
   >
     <button
-      aria-label="Quit App"
+      aria-label="Quit Gitify"
       className="flex justify-evenly items-center bg-transparent border-0 w-full text-sm text-white my-1 py-2 cursor-pointer hover:text-gray-500 focus:outline-none"
       onClick={[Function]}
+      title="Quit Gitify"
     >
       <svg
         aria-hidden="true"
diff --git a/src/routes/Settings.test.tsx b/src/routes/Settings.test.tsx
index 933dd248..fedbd5c7 100644
--- a/src/routes/Settings.test.tsx
+++ b/src/routes/Settings.test.tsx
@@ -46,10 +46,10 @@ describe('routes/Settings.tsx', () => {
 
   it('should press the logout', async () => {
     const logoutMock = jest.fn();
-    let getByLabelText;
+    let getByTitle;
 
     await act(async () => {
-      const { getByLabelText: getByLabelTextLocal } = render(
+      const { getByTitle: getByLabelTextLocal } = render(
         <AppContext.Provider
           value={{
             settings: mockSettings,
@@ -63,10 +63,10 @@ describe('routes/Settings.tsx', () => {
         </AppContext.Provider>,
       );
 
-      getByLabelText = getByLabelTextLocal;
+      getByTitle = getByLabelTextLocal;
     });
 
-    fireEvent.click(getByLabelText('Logout'));
+    fireEvent.click(getByTitle('Logout'));
 
     expect(logoutMock).toHaveBeenCalledTimes(1);
 
@@ -265,10 +265,10 @@ describe('routes/Settings.tsx', () => {
   });
 
   it('should go to the enterprise login route', async () => {
-    let getByLabelText;
+    let getByTitle;
 
     await act(async () => {
-      const { getByLabelText: getByLabelTextLocal } = render(
+      const { getByTitle: getByTitleLocal } = render(
         <AppContext.Provider
           value={{
             settings: mockSettings,
@@ -280,20 +280,20 @@ describe('routes/Settings.tsx', () => {
           </MemoryRouter>
         </AppContext.Provider>,
       );
-      getByLabelText = getByLabelTextLocal;
+      getByTitle = getByTitleLocal;
     });
 
-    fireEvent.click(getByLabelText('Login with GitHub Enterprise'));
+    fireEvent.click(getByTitle('Login with GitHub Enterprise'));
     expect(mockNavigate).toHaveBeenNthCalledWith(1, '/login-enterprise', {
       replace: true,
     });
   });
 
   it('should quit the app', async () => {
-    let getByLabelText;
+    let getByTitle;
 
     await act(async () => {
-      const { getByLabelText: getByLabelTextLocal } = render(
+      const { getByTitle: getByTitleLocal } = render(
         <AppContext.Provider
           value={{ settings: mockSettings, accounts: mockAccounts }}
         >
@@ -302,10 +302,10 @@ describe('routes/Settings.tsx', () => {
           </MemoryRouter>
         </AppContext.Provider>,
       );
-      getByLabelText = getByLabelTextLocal;
+      getByTitle = getByTitleLocal;
     });
 
-    fireEvent.click(getByLabelText('Quit Gitify'));
+    fireEvent.click(getByTitle('Quit Gitify'));
     expect(ipcRenderer.send).toHaveBeenCalledWith('app-quit');
   });
 
diff --git a/src/routes/__snapshots__/Login.test.tsx.snap b/src/routes/__snapshots__/Login.test.tsx.snap
index 64aacb10..50030a86 100644
--- a/src/routes/__snapshots__/Login.test.tsx.snap
+++ b/src/routes/__snapshots__/Login.test.tsx.snap
@@ -59,6 +59,7 @@ exports[`routes/Login.tsx should render itself & its children 1`] = `
     aria-label="Login with GitHub"
     className="w-48 py-2 my-2 bg-gray-300 font-semibold rounded text-xs text-center dark:text-black hover:bg-gray-500 hover:text-white focus:outline-none"
     onClick={[Function]}
+    title="Login with GitHub"
   >
     Login to GitHub
   </button>
@@ -66,6 +67,7 @@ exports[`routes/Login.tsx should render itself & its children 1`] = `
     aria-label="Login with GitHub Enterprise"
     className="w-48 py-2 my-2 bg-gray-300 font-semibold rounded text-xs text-center dark:text-black hover:bg-gray-500 hover:text-white focus:outline-none"
     onClick={[Function]}
+    title="Login with GitHub Enterprise"
   >
     Login to GitHub Enterprise
   </button>
@@ -73,6 +75,7 @@ exports[`routes/Login.tsx should render itself & its children 1`] = `
     aria-label="Login with Personal Token"
     className="bg-none hover:text-gray-800 dark:text-gray-100 dark:hover:text-gray-300 mt-4 focus:outline-none"
     onClick={[Function]}
+    title="Login with Personal Token"
   >
     <small>
       or login with a personal token
diff --git a/src/routes/__snapshots__/LoginEnterprise.test.tsx.snap b/src/routes/__snapshots__/LoginEnterprise.test.tsx.snap
index badaf802..8e139ef8 100644
--- a/src/routes/__snapshots__/LoginEnterprise.test.tsx.snap
+++ b/src/routes/__snapshots__/LoginEnterprise.test.tsx.snap
@@ -8,12 +8,13 @@ exports[`routes/LoginEnterprise.js renders correctly 1`] = `
     className="flex justify-between items-center mt-4 py-2 mx-8"
   >
     <button
-      aria-label="Go Back"
       className="focus:outline-none"
       onClick={[Function]}
+      title="Go Back"
     >
       <svg
-        aria-hidden="true"
+        aria-hidden="false"
+        aria-label="Go Back"
         className="hover:text-gray-400"
         fill="currentColor"
         focusable="false"
diff --git a/src/routes/__snapshots__/LoginWithToken.test.tsx.snap b/src/routes/__snapshots__/LoginWithToken.test.tsx.snap
index e2f6b682..b3532293 100644
--- a/src/routes/__snapshots__/LoginWithToken.test.tsx.snap
+++ b/src/routes/__snapshots__/LoginWithToken.test.tsx.snap
@@ -8,12 +8,13 @@ exports[`routes/LoginWithToken.js renders correctly 1`] = `
     className="flex justify-between items-center mt-4 py-2 mx-8"
   >
     <button
-      aria-label="Go Back"
       className="focus:outline-none"
       onClick={[Function]}
+      title="Go Back"
     >
       <svg
-        aria-hidden="true"
+        aria-hidden="false"
+        aria-label="Go Back"
         className="hover:text-gray-400"
         fill="currentColor"
         focusable="false"
diff --git a/src/routes/__snapshots__/Settings.test.tsx.snap b/src/routes/__snapshots__/Settings.test.tsx.snap
index 985fcb40..c0c3c21e 100644
--- a/src/routes/__snapshots__/Settings.test.tsx.snap
+++ b/src/routes/__snapshots__/Settings.test.tsx.snap
@@ -37,11 +37,12 @@ exports[`routes/Settings.tsx should render itself & its children 1`] = `
     class="flex justify-between items-center mt-4 py-2 mx-8"
   >
     <button
-      aria-label="Go Back"
       class="focus:outline-none"
+      title="Go Back"
     >
       <svg
-        aria-hidden="true"
+        aria-hidden="false"
+        aria-label="Go Back"
         class="hover:text-gray-400"
         fill="currentColor"
         focusable="false"
@@ -288,8 +289,8 @@ exports[`routes/Settings.tsx should render itself & its children 1`] = `
     </small>
     <div>
       <button
-        aria-label="Login with GitHub Enterprise"
         class="hover:text-gray-500 py-1 px-2 my-1 mx-2 focus:outline-none"
+        title="Login with GitHub Enterprise"
       >
         <svg
           aria-hidden="true"
@@ -318,8 +319,8 @@ exports[`routes/Settings.tsx should render itself & its children 1`] = `
         </svg>
       </button>
       <button
-        aria-label="Logout"
         class="hover:text-gray-500 py-1 px-2 my-1 mx-2 focus:outline-none"
+        title="Logout"
       >
         <svg
           aria-hidden="true"
@@ -348,8 +349,8 @@ exports[`routes/Settings.tsx should render itself & its children 1`] = `
         </svg>
       </button>
       <button
-        aria-label="Quit Gitify"
         class="hover:text-gray-500 py-1 px-2 my-1 mx-2 focus:outline-none mr-0"
+        title="Quit Gitify"
       >
         <svg
           aria-hidden="true"