fix: accessibility fixes

src/components/control/BackToTop.astro

@@ -6,7 +6,7 @@ import Button from "./Button.astro";
 <!-- There can't be a filter on parent element, or it will break `fixed` -->
 <div class="back-to-top-wrapper hidden lg:block" transition:persist>
     <div id="back-to-top-btn" class="back-to-top-btn hide flex items-center rounded-2xl overflow-hidden transition active:scale-90" onclick="topFunction()">
-        <Button card height="60px" width="60px">
+        <Button name="Back to Top" card height="60px" width="60px">
             <Icon name="material-symbols:keyboard-arrow-up-rounded" class="mx-auto"></Icon>
         </Button>
     </div>

src/components/control/Button.astro

@@ -1,6 +1,7 @@
 ---
 interface Props {
     id?: string;
+    name?: string;
     isIcon?: boolean;
     iconName?: string;
     width?: string;
@@ -15,6 +16,7 @@ interface Props {
 const props = Astro.props;
 const {
     id,
+    name,
     isIcon = false,
     iconName,
     width,
@@ -31,6 +33,7 @@ import { Icon } from 'astro-icon/components';
 
 <button id={id}
         disabled={disabled}
+        aria-label={name}
     class:list={[
     className,
     `

src/components/control/ButtonLink.astro

@@ -2,10 +2,11 @@
 interface Props {
     badge?: string
     url?: string
+    label?: string
 }
-const { badge, url } = Astro.props
+const { badge, url, name } = Astro.props
 ---
-<a href={url}>
+<a href={url} aria-label={name}>
     <button
         class:list={`
             w-full

src/components/control/ButtonTag.astro

@@ -4,10 +4,11 @@ interface Props {
     size?: string;
     dot?: boolean;
     href?: string;
+    label?: string;
 }
-const { size, dot, href }: Props = Astro.props;
+const { size, dot, href, label }: Props = Astro.props;
 ---
-<a href={href}>
+<a href={href} aria-label={label}>
     <Button regular height="32px" class="text-[15px] px-3 flex flex-row items-center rounded-lg">
         {dot && <div class="h-1 w-1 bg-[var(--btn-content)] dark:bg-[var(--card-bg)] transition rounded-md mr-2"></div>}
         <slot></slot>

src/components/control/Pagination.astro

@@ -54,7 +54,7 @@ const commonUrl: string = parts.slice(0, -1).join('/') + '/';
 ---
 
 <div class:list={[className, "flex flex-row gap-3 justify-center"]}>
-    <a href={page.url.prev}>
+    <a href={page.url.prev} aria-label={page.url.prev ? "Previous Page" : null}>
         <Button isIcon card iconName="material-symbols:chevron-left-rounded" class:list={["text-[var(--primary)] rounded-lg", {"active:scale-90": page.url.prev != undefined}]} iconSize={28}
                 disabled = {page.url.prev == undefined}
         ></Button>
@@ -69,15 +69,15 @@ const commonUrl: string = parts.slice(0, -1).join('/') + '/';
                 >
                     {p}
                 </div>
-            return <a href={commonUrl + p}>
+            return <a href={commonUrl + p} aria-label=`Page ${p}`>
                 <Button card iconName="material-symbols:chevron-left-rounded" class="rounded-lg active:scale-[0.85]" height="44px" width="44px">
                     {p}
                 </Button>
             </a>
         })}
     </div>
-    <a href={page.url.next}>
-        <Button isIcon card iconName="material-symbols:chevron-right-rounded" class:list={["text-[var(--primary)] rounded-lg", {"active:scale-90": page.url.next != undefined}]} iconSize={28}
+    <a href={page.url.next} aria-label={page.url.next ? "Next Page" : null}>
+        <Button isIcon card name="Next Page" iconName="material-symbols:chevron-right-rounded" class:list={["text-[var(--primary)] rounded-lg", {"active:scale-90": page.url.next != undefined}]} iconSize={28}
                 disabled = {page.url.next == undefined}
         ></Button>
     </a>