update accessiblity:

src/layouts/helpers/SearchModal.tsx

@@ -140,6 +140,7 @@ const SearchModal = () => {
                 width="18"
                 className="hover:text-red-500 cursor-pointer -mt-0.5"
               >
+                <title>close icon</title>
                 <path
                   fill="currentcolor"
                   d="M256 512A256 256 0 10256 0a256 256 0 100 512zM175 175c9.4-9.4 24.6-9.4 33.9.0l47 47 47-47c9.4-9.4 24.6-9.4 33.9.0s9.4 24.6.0 33.9l-47 47 47 47c9.4 9.4 9.4 24.6.0 33.9s-24.6 9.4-33.9.0l-47-47-47 47c-9.4 9.4-24.6 9.4-33.9.0s-9.4-24.6.0-33.9l47-47-47-47c-9.4-9.4-9.4-24.6.0-33.9z"
@@ -152,6 +153,7 @@ const SearchModal = () => {
                 width="18"
                 className="-mt-0.5"
               >
+                <title>search icon</title>
                 <path
                   fill="currentcolor"
                   d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8.0 45.3s-32.8 12.5-45.3.0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9.0 208S93.1.0 208 0 416 93.1 416 208zM208 352a144 144 0 100-288 144 144 0 100 288z"
@@ -167,7 +169,6 @@ const SearchModal = () => {
             name="search"
             value={searchString}
             onChange={handleSearch}
-            autoFocus
             autoComplete="off"
           />
         </div>

src/layouts/partials/Header.astro

@@ -75,6 +75,7 @@ const { pathname } = Astro.url;
                     <li class="nav-dropdown-item">
                       <a
                         href={child.url}
+                        aria-label={child.name}
                         class={`nav-dropdown-link block ${
                           (pathname === `${child.url}/` ||
                             pathname === child.url) &&

src/pages/index.astro

@@ -54,7 +54,7 @@ const { banner, features }: Homepage = homepage.data;
                 src={banner.image}
                 height={380}
                 width={1200}
-                alt="banner image"
+                alt="banner"
                 format="webp"
               />
             </div>

src/styles/search.scss

@@ -1,6 +1,6 @@
 .search {
   &-modal {
-    @apply z-50 fixed top-0 left-0 w-full h-full flex items-start justify-center invisible opacity-0;
+    @apply z-50 fixed -top-10 left-0 w-full h-full flex items-start justify-center invisible opacity-0;
     &.show {
       @apply visible opacity-100;
     }