fix: add accessibility label on buttons

LR-Tech-Blog · Jan 10, 2024 · a92fff0 · a92fff0
1 parent 104daaa
commit a92fff0
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 11 deletions.
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
@@ -22,10 +22,10 @@ import SponsorButton from "./SponsorButton.astro";
         class="tooltip tooltip-top flex items-center"
         data-tip="Fork me"
       >
-        <IconButton name="fork" height="17" width="17" />
+        <IconButton name="fork" height="17" width="17" alt="Goto to Github" />
       </a>
       <a href="/rss.xml" class="tooltip tooltip-top flex items-center" data-tip="RSS">
-        <IconButton name="rss" height="17" width="17" />
+        <IconButton name="rss" height="17" width="17" alt="Check RSS page" />
       </a>
       <SponsorButton/>
     </aside>

diff --git a/src/components/IconButton.astro b/src/components/IconButton.astro
@@ -5,11 +5,12 @@ interface Props {
     name: string,
     width: string,
     height?: string
+    alt: string
 }
 
-const props = Astro.props
+const { name, width, height, alt } = Astro.props
 ---
 
-<button class="transition hover:scale-110 focus:ring-2">
-    <Icon name={props.name} width={props.width} height={props.height}/>
+<button class="transition hover:scale-110 focus:ring-2" aria-label={alt}>
+    <Icon name={name} width={width} height={height}/>
 </button>
diff --git a/src/components/PostSideBarLeft.astro b/src/components/PostSideBarLeft.astro
@@ -5,10 +5,10 @@ import IconButton from "./IconButton.astro";
 <aside class="flex flex-row gap-6 items-center">
     <span class="font-bold text-xs">SHARE</span>
     <span id="copyLink">
-        <IconButton name="link" width="30" height="30"/>
+        <IconButton name="link" width="30" height="30" alt="Copy link" />
     </span>
     <span id="shareTwitter">
-        <IconButton name="twitter" width="30" height="30"/>
+        <IconButton name="twitter" width="30" height="30" alt="Share on Twitter (X)"/>
     </span>
     <!-- <button id="shareLinkedin" class="transition hover:scale-110">
         <Icon name="linkedin" width="30" height="30"/>

diff --git a/src/components/ToggleLightDark.astro b/src/components/ToggleLightDark.astro
@@ -2,8 +2,7 @@
 import { Icon } from 'astro-icon'
 ---
 
-<button id="toggle-theme" class="swap swap-rotate">
-    <input type="checkbox"/>
+<button id="toggle-theme" class="swap swap-rotate" aria-label="Toggle light/dark mode">
     <span id="toggle-icon-sun" class="swap-on">
         <Icon name="sun" width="30" height="30" />
     </span>

diff --git a/src/pages/about.astro b/src/pages/about.astro
@@ -33,10 +33,10 @@ const linkedinUrl = adm.linkedin;
       </div>
       <div class="flex flex-row gap-3">
         <social-button data-url={githubUrl}>
-          <IconButton name="github" width="30" height="30" />
+          <IconButton name="github" width="30" height="30" alt="Goto creator's GitHub" />
         </social-button>
         <social-button data-url={linkedinUrl}>
-          <IconButton name="linkedin" width="30" height="30" />
+          <IconButton name="linkedin" width="30" height="30" alt="Goto creator's Linkedin" />
         </social-button>
       </div>
       <div>