refactor: ensure all buttons have label and accessibility text

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');
   });

src/components/Sidebar.tsx

@@ -66,36 +66,40 @@ 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 });
                 } else {
                   navigate('/settings');
                 }
               }}
-              aria-label="Settings"
             >
-              <IconCog className="w-4 h-4" />
+              <IconCog className="w-4 h-4" aria-label="Settings" />
             </button>
           </>
         )}
 
         {!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>

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"

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>

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>

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>

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');
   });
 

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>

src/routes/__snapshots__/Login.test.tsx.snap

@@ -59,20 +59,23 @@ 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>
   <button
     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>
   <button
     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

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"

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"