update accessiblity:

package.json

@@ -1,6 +1,6 @@
 {
   "name": "astroplate",
-  "version": "3.3.1",
+  "version": "3.3.2",
   "description": "Astro and Tailwindcss boilerplate",
   "author": "zeon.studio",
   "license": "MIT",
@@ -36,7 +36,6 @@
     "react-lite-youtube-embed": "^2.4.0",
     "remark-collapse": "^0.1.2",
     "remark-toc": "^9.0.0",
-    "sharp": "^0.33.2",
     "swiper": "^11.0.5"
   },
   "devDependencies": {
@@ -53,6 +52,7 @@
     "prettier-plugin-astro": "^0.13.0",
     "prettier-plugin-tailwindcss": "^0.5.11",
     "sass": "^1.70.0",
+    "sharp": "0.33.1",
     "tailwind-bootstrap-grid": "^5.1.0",
     "tailwindcss": "^3.4.1",
     "typescript": "5.3.3"

readme.md

@@ -10,8 +10,8 @@
 </h2>
 
 <p align=center>
-  <a href="https://github.com/withastro/astro/releases/tag/astro%404.2.0" alt="Contributors">
+  <a href="https://github.com/withastro/astro/releases/tag/astro%404.3.2" alt="Contributors">
-    <img src="https://img.shields.io/static/v1?label=ASTRO&message=4.2&color=000&logo=astro" />
+    <img src="https://img.shields.io/static/v1?label=ASTRO&message=4.3&color=000&logo=astro" />
   </a>
 
   <a href="https://github.com/zeon-studio/astroplate/blob/main/LICENSE">

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;
     }