Merge 2a7b12e into 6065340

gitify-app · Jun 16, 2024 · 75b5f4f · 75b5f4f
2 parents 6065340 + 2a7b12e
commit 75b5f4f
Show file tree

Hide file tree

Showing 8 changed files with 407 additions and 422 deletions.
diff --git a/biome.json b/biome.json
@@ -11,6 +11,9 @@
         "noUnusedFunctionParameters": "error",
         "useDefaultSwitchClause": "error"
       },
+      "a11y": {
+        "useKeyWithClickEvents": "off"
+      },
       "correctness": {
         "useExhaustiveDependencies": {
           "level": "warn",

diff --git a/src/components/AccountNotifications.tsx b/src/components/AccountNotifications.tsx
@@ -55,7 +55,10 @@ export const AccountNotifications = (props: IProps) => {
   return (
     <>
       {showAccountHostname && (
-        <div className="group flex items-center justify-between bg-gray-300 px-3 py-2 text-sm font-semibold dark:bg-gray-darkest dark:text-white">
+        <div
+          className="group flex items-center justify-between bg-gray-300 px-3 py-2 text-sm font-semibold dark:bg-gray-darkest dark:text-white"
+          onClick={toggleAccountNotifications}
+        >
           <div>
             <PlatformIcon type={account.platform} size={16} />
             <button
@@ -73,7 +76,7 @@ export const AccountNotifications = (props: IProps) => {
               title={toggleAccountNotificationsLabel}
               onClick={toggleAccountNotifications}
             >
-              <ChevronIcon size={20} />
+              <ChevronIcon size={14} />
             </button>
           </div>
         </div>

diff --git a/src/components/NotificationRow.test.tsx b/src/components/NotificationRow.test.tsx
@@ -370,7 +370,7 @@ describe('components/NotificationRow.tsx', () => {
         </AppContext.Provider>,
       );
 
-      fireEvent.keyDown(screen.getByRole('main'));
+      fireEvent.click(screen.getByRole('main'));
       expect(links.openNotification).toHaveBeenCalledTimes(1);
       expect(removeNotificationFromState).toHaveBeenCalledTimes(1);
     });

diff --git a/src/components/NotificationRow.tsx b/src/components/NotificationRow.tsx
@@ -114,7 +114,6 @@ export const NotificationRow: FC<IProps> = ({ notification }) => {
       <div
         className="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap"
         onClick={() => handleNotification()}
-        onKeyDown={() => handleNotification()}
       >
         <div
           className="mb-1 cursor-pointer truncate text-sm"
@@ -225,15 +224,6 @@ export const NotificationRow: FC<IProps> = ({ notification }) => {
           <CheckIcon size={16} aria-label="Mark as Done" />
         </button>
 
-        <button
-          type="button"
-          className="h-full hover:text-red-500 focus:outline-none"
-          title="Unsubscribe from Thread"
-          onClick={unsubscribeFromThread}
-        >
-          <BellSlashIcon size={14} aria-label="Unsubscribe from Thread" />
-        </button>
-
         <button
           type="button"
           className="h-full hover:text-green-500 focus:outline-none"
@@ -245,6 +235,15 @@ export const NotificationRow: FC<IProps> = ({ notification }) => {
         >
           <ReadIcon size={14} aria-label="Mark as Read" />
         </button>
+
+        <button
+          type="button"
+          className="h-full hover:text-red-500 focus:outline-none"
+          title="Unsubscribe from Thread"
+          onClick={unsubscribeFromThread}
+        >
+          <BellSlashIcon size={14} aria-label="Unsubscribe from Thread" />
+        </button>
       </div>
     </div>
   );

diff --git a/src/components/Repository.tsx b/src/components/Repository.tsx
@@ -51,7 +51,10 @@ export const RepositoryNotifications: FC<IProps> = ({
 
   return (
     <>
-      <div className="group flex items-center justify-between bg-gray-100 px-3 py-2 dark:bg-gray-darker dark:text-white">
+      <div
+        className="group flex items-center justify-between bg-gray-100 px-3 py-2 dark:bg-gray-darker dark:text-white"
+        onClick={toggleRepositoryNotifications}
+      >
         <div className="mt-0 flex flex-1 space-x-3 overflow-hidden overflow-ellipsis whitespace-nowrap text-sm font-medium">
           {avatarUrl ? (
             <img
@@ -65,21 +68,12 @@ export const RepositoryNotifications: FC<IProps> = ({
           <span
             className="cursor-pointer truncate"
             onClick={() => openRepository(repoNotifications[0].repository)}
-            onKeyDown={() => openRepository(repoNotifications[0].repository)}
           >
             {repoName}
           </span>
         </div>
 
         <div className="flex items-center justify-center gap-2 opacity-0 transition-opacity group-hover:opacity-80">
-          <button
-            type="button"
-            className="h-full hover:text-green-500 focus:outline-none"
-            title={toggleRepositoryNotificationsLabel}
-            onClick={toggleRepositoryNotifications}
-          >
-            <ChevronIcon size={16} />
-          </button>
           <button
             type="button"
             className="h-full hover:text-green-500 focus:outline-none"
@@ -89,8 +83,6 @@ export const RepositoryNotifications: FC<IProps> = ({
             <CheckIcon size={16} aria-label="Mark Repository as Done" />
           </button>
 
-          <div className="w-[14px]" />
-
           <button
             type="button"
             className="h-full hover:text-green-500 focus:outline-none"
@@ -99,6 +91,15 @@ export const RepositoryNotifications: FC<IProps> = ({
           >
             <ReadIcon size={14} aria-label="Mark Repository as Read" />
           </button>
+
+          <button
+            type="button"
+            className="h-full hover:text-green-500 focus:outline-none"
+            title={toggleRepositoryNotificationsLabel}
+            onClick={toggleRepositoryNotifications}
+          >
+            <ChevronIcon size={14} />
+          </button>
         </div>
       </div>
 

diff --git a/src/components/__snapshots__/AccountNotifications.test.tsx.snap b/src/components/__snapshots__/AccountNotifications.test.tsx.snap