refactor: improve props usage and dynamic rendering in LinkButton (#599)

- update LinkButton Props by using HTMLAttributes from astro/types
- use dynamic tags for rendering element dynamically
- improve a11y for pagination

src/components/Header.astro

@@ -97,8 +97,8 @@ const isActive = (path: string) => {
                     "active-nav [&>svg]:stroke-accent": isActive("/archives"),
                   },
                 ]}
-                ariaLabel="archives"
                 title="Archives"
+                aria-label="archives"
               >
                 <IconArchive class="hidden sm:inline-block" />
                 <span class="sm:sr-only">Archives</span>
@@ -113,8 +113,8 @@ const isActive = (path: string) => {
               "focus-outline flex p-3 sm:p-1",
               { "[&>svg]:stroke-accent": isActive("/search") },
             ]}
-            ariaLabel="search"
             title="Search"
+            aria-label="search"
           >
             <IconSearch />
             <span class="sr-only">Search</span>

src/components/LinkButton.astro

@@ -1,45 +1,21 @@
 ---
-export interface Props {
+import type { HTMLAttributes } from "astro/types";
-  id?: string;
-  href: string;
-  class?: string;
-  ariaLabel?: string;
-  title?: string;
-  disabled?: boolean;
-}
 
-const {
+type Props = { disabled?: boolean } & HTMLAttributes<"a">;
-  id,
+
-  href,
+const { disabled, class: className, ...attrs } = Astro.props;
-  class: className = "",
+
-  ariaLabel,
+const Button = disabled ? "span" : "a";
-  title,
-  disabled = false,
-} = Astro.props;
 ---
 
-{
+<Button
-  disabled ? (
-    <span
-      id={id}
-      class:list={["group inline-flex items-center gap-1", className]}
-      title={title}
   aria-disabled={disabled}
-    >
-      <slot />
-    </span>
-  ) : (
-    <a
-      id={id}
-      {href}
   class:list={[
-        "group inline-flex items-center gap-1 hover:text-accent",
+    "group inline-flex items-center gap-1",
+    { "hover:text-accent": !disabled },
     className,
   ]}
-      aria-label={ariaLabel}
+  {...attrs}
-      title={title}
 >
   <slot />
-    </a>
+</Button>
-  )
-}

src/components/Pagination.astro

@@ -14,12 +14,16 @@ const { page } = Astro.props;
 
 {
   page.lastPage > 1 && (
-    <nav class="mt-auto mb-8 flex justify-center" aria-label="Pagination">
+    <nav
+      class="mt-auto mb-8 flex justify-center"
+      role="navigation"
+      aria-label="Pagination Navigation"
+    >
       <LinkButton
         disabled={!page.url.prev}
         href={page.url.prev as string}
         class:list={["me-4 select-none", { "opacity-50": !page.url.prev }]}
-        ariaLabel="Previous"
+        aria-label="Goto Previous Page"
       >
         <IconArrowLeft class="inline-block rtl:rotate-180" />
         Prev
@@ -29,7 +33,7 @@ const { page } = Astro.props;
         disabled={!page.url.next}
         href={page.url.next as string}
         class:list={["ms-4 select-none", { "opacity-50": !page.url.next }]}
-        ariaLabel="Next"
+        aria-label="Goto Next Page"
       >
         Next
         <IconArrowRight class="inline-block rtl:rotate-180" />