chore: some minor fixes regarding UI and accessibility

nodejs · Feb 28, 2024 · 842ed68 · 842ed68
1 parent 2f3f8ae
commit 842ed68
Show file tree

Hide file tree

Showing 7 changed files with 15 additions and 9 deletions.
diff --git a/components/Common/CrossLink/index.module.css b/components/Common/CrossLink/index.module.css
@@ -10,6 +10,7 @@
     border-neutral-300
     bg-white
     p-3
+    no-underline
     dark:border-neutral-900
     dark:bg-neutral-950;
 

diff --git a/components/Common/Search/index.module.css b/components/Common/Search/index.module.css
@@ -2,18 +2,15 @@
   @apply relative
     w-52
     rounded-md
-    bg-neutral-100
+    bg-neutral-200
     py-2
     pl-9
     pr-4
     text-left
     text-sm
     text-neutral-700
-    transition-colors
-    duration-200
-    ease-in-out
-    hover:bg-neutral-200
-    hover:text-neutral-800
+    hover:bg-neutral-300
+    hover:text-neutral-900
     dark:bg-neutral-900
     dark:text-neutral-600
     dark:hover:bg-neutral-800

diff --git a/components/Common/Search/index.tsx b/components/Common/Search/index.tsx
@@ -35,8 +35,10 @@ export const SearchButton: FC = () => {
         className={styles.searchButton}
       >
         <MagnifyingGlassIcon className={styles.magnifyingGlassIcon} />
+
         {t('components.search.searchBox.placeholder')}
       </button>
+
       {isOpen ? <WithSearchBox onClose={closeSearchBox} /> : null}
     </>
   );

diff --git a/hooks/react-client/useBottomScrollListener.ts b/hooks/react-client/useBottomScrollListener.ts
@@ -29,7 +29,9 @@ const useBottomScrollListener = (
 
   useEffect(() => {
     window.addEventListener('scroll', handleScroll, { passive: true });
+
     return () => window.removeEventListener('scroll', handleScroll);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   return bottomReached;

diff --git a/hooks/react-client/useKeyboardCommands.ts b/hooks/react-client/useKeyboardCommands.ts
@@ -30,7 +30,7 @@ const useKeyboardCommands = (fn: KeyboardCommandCallback) => {
     });
 
     return () => document.removeEventListener('keydown', () => {});
-  }, []);
+  }, [fn]);
 };
 
 export default useKeyboardCommands;
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
@@ -286,7 +286,7 @@
         "platform": "Platform"
       },
       "codeBox": {
-        "communityWarning": "Package Managers and their installation scripts are not maintained by the Node.js project.s"
+        "communityWarning": "Package managers and their installation scripts are not maintained by the Node.js project."
       }
     }
   },

diff --git a/pages/en/about/index.mdx b/pages/en/about/index.mdx
@@ -4,7 +4,11 @@ layout: about.hbs
 ---
 
 <div className="my-4 flex items-center justify-center">
-  <img src="/static/images/node-mascot.svg" className="w-[100px]" />
+  <img
+    alt="Node.js mascot"
+    src="/static/images/node-mascot.svg"
+    className="w-[100px]"
+  />
 </div>
 
 ---