From a477b9ab08f28a6c18da157e32c6037d51caf951 Mon Sep 17 00:00:00 2001
From: Adam Setch <adam.setch@outlook.com>
Date: Mon, 18 Mar 2024 08:40:31 -0400
Subject: [PATCH] feat: ensure all buttons have label and accessibility text

---
 src/components/Sidebar.test.tsx               | 12 +++++-----
 src/components/Sidebar.tsx                    | 14 +++++++----
 .../__snapshots__/Sidebar.test.tsx.snap       |  6 +++--
 src/routes/Login.tsx                          |  9 ++++---
 src/routes/LoginEnterprise.tsx                | 10 +++++---
 src/routes/LoginWithToken.tsx                 | 10 +++++---
 src/routes/Settings.test.tsx                  | 24 +++++++++----------
 src/routes/Settings.tsx                       | 23 +++++++++++-------
 src/routes/__snapshots__/Login.test.tsx.snap  |  3 +++
 .../LoginEnterprise.test.tsx.snap             |  5 ++--
 .../LoginWithToken.test.tsx.snap              |  5 ++--
 .../__snapshots__/Settings.test.tsx.snap      | 11 +++++----
 12 files changed, 81 insertions(+), 51 deletions(-)

diff --git a/src/components/Sidebar.test.tsx b/src/components/Sidebar.test.tsx
index 6582f917c..b9e5a82cd 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/Sidebar.tsx b/src/components/Sidebar.tsx
index 38574a812..c29be0c75 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -66,17 +66,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 +88,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 +97,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/components/__snapshots__/Sidebar.test.tsx.snap b/src/components/__snapshots__/Sidebar.test.tsx.snap
index e9cf5c2ac..c26224da6 100644
--- a/src/components/__snapshots__/Sidebar.test.tsx.snap
+++ b/src/components/__snapshots__/Sidebar.test.tsx.snap
@@ -86,9 +86,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"
@@ -206,9 +207,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/Login.tsx b/src/routes/Login.tsx
index 214675869..1a027f8d0 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 eef567b9f..af7bd5615 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 d14285bb2..a90609cf7 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.test.tsx b/src/routes/Settings.test.tsx
index 933dd2483..fedbd5c71 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/Settings.tsx b/src/routes/Settings.tsx
index 78478e2f5..9ee9585c5 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>
diff --git a/src/routes/__snapshots__/Login.test.tsx.snap b/src/routes/__snapshots__/Login.test.tsx.snap
index 64aacb10f..50030a864 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 badaf802b..8e139ef8a 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 e2f6b682c..b35322930 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 985fcb40a..c0c3c21ec 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"