fix: Search box button accessibility (#6619)

* fix: Search button accessibility

* chore: Search button font

* refactor: absolute positioning removed

Author: canerakdas

components/Common/Search/index.module.css

@@ -1,14 +1,12 @@
 .searchButton {
-  @apply relative
+  @apply flex
     w-52
+    gap-2
     rounded-md
     bg-neutral-200
-    py-2
-    pl-9
-    pr-4
-    text-left
+    p-2
     text-sm
-    text-neutral-700
+    text-neutral-800
     hover:bg-neutral-300
     hover:text-neutral-900
     dark:bg-neutral-900
@@ -18,18 +16,19 @@
 }
 
 .magnifyingGlassIcon {
-  @apply absolute
-    left-2
-    top-[8px]
-    size-5;
+  @apply size-5;
 }
 
 .shortcutIndicator {
   @apply invisible
-    absolute
-    right-2
-    ml-2
+    flex
+    flex-1
+    items-center
+    justify-end
+    self-center
+    px-1
     font-ibm-plex-mono
+    text-xs
     motion-safe:transition-opacity
     motion-safe:duration-100
     md:visible;

components/Common/Search/index.tsx

@@ -40,6 +40,7 @@ export const SearchButton: FC = () => {
         type="button"
         onClick={openSearchBox}
         className={styles.searchButton}
+        aria-label={t('components.search.searchBox.placeholder')}
       >
         <MagnifyingGlassIcon className={styles.magnifyingGlassIcon} />