feat(settings): display username on logout hover (#969)

Author: setchy

src/routes/Settings.test.tsx

@@ -47,10 +47,10 @@ describe('routes/Settings.tsx', () => {
 
   it('should press the logout', async () => {
     const logoutMock = jest.fn();
-    let getByTitle;
+    let getByRole;
 
     await act(async () => {
-      const { getByTitle: getByLabelTextLocal } = render(
+      const { getByRole: getByRoleLocal } = render(
         <AppContext.Provider
           value={{
             settings: mockSettings,
@@ -64,10 +64,10 @@ describe('routes/Settings.tsx', () => {
         </AppContext.Provider>,
       );
 
-      getByTitle = getByLabelTextLocal;
+      getByRole = getByRoleLocal;
     });
 
-    fireEvent.click(getByTitle('Logout'));
+    fireEvent.click(getByRole('Logout'));
 
     expect(logoutMock).toHaveBeenCalledTimes(1);
 

src/routes/Settings.tsx

@@ -238,10 +238,14 @@ export const SettingsRoute: React.FC = () => {
 
           <button
             className={footerButtonClass}
-            title="Logout"
+            title={`Logout ${accounts.user.login}`}
+            role="Logout"
             onClick={logoutUser}
           >
-            <SignOutIcon size={18} aria-label="Logout" />
+            <SignOutIcon
+              size={18}
+              aria-label={`Logout ${accounts.user.login}`}
+            />
           </button>
 
           <button

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

@@ -412,10 +412,11 @@ exports[`routes/Settings.tsx should render itself & its children 1`] = `
       </button>
       <button
         class="hover:text-gray-500 py-1 px-2 my-1 mx-2 focus:outline-none"
-        title="Logout"
+        role="Logout"
+        title="Logout octocat"
       >
         <svg
-          aria-label="Logout"
+          aria-label="Logout octocat"
           class="octicon octicon-sign-out"
           fill="currentColor"
           focusable="false"