Repair tab indexes

kubgus · Nov 15, 2024 · 77fdd02 · 77fdd02
1 parent 01960f0
commit 77fdd02
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 13 deletions.
diff --git a/src/components/contact-bar.astro b/src/components/contact-bar.astro
@@ -1,29 +1,30 @@
 ---
+const { tabindex = "0" } = Astro.props;
 ---
 
 <figure aria-label="Personal links">
 
-    <a href="mailto:business@gustafik.com" aria-label="Email" target="_blank" class="implied">
+    <a tabindex={tabindex} href="mailto:business@gustafik.com" aria-label="Email" target="_blank" class="implied">
         <i aria-hidden="true" class="fas fa-envelope"></i>
     </a>
 
-    <a href="https://github.com/kubgus" aria-label="GitHub" target="_blank" class="implied">
+    <a tabindex={tabindex} href="https://github.com/kubgus" aria-label="GitHub" target="_blank" class="implied">
         <i aria-hidden="true" class="fab fa-github"></i>
     </a>
 
-    <a href="https://www.linkedin.com/in/kubgus/" aria-label="LinkedIn" target="_blank" class="implied">
+    <a tabindex={tabindex} href="https://www.linkedin.com/in/kubgus/" aria-label="LinkedIn" target="_blank" class="implied">
         <i aria-hidden="true" class="fab fa-linkedin"></i>
     </a>
 
-    <a href="https://twitter.com/gustafik_dev" aria-label="Twitter" target="_blank" class="implied">
+    <a tabindex={tabindex} href="https://twitter.com/gustafik_dev" aria-label="Twitter" target="_blank" class="implied">
         <i aria-hidden="true" class="fab fa-x-twitter"></i>
     </a>
 
-    <a href="https://discord.com/users/643898809193332786/" aria-label="Discord" target="_blank" class="implied">
+    <a tabindex={tabindex} href="https://discord.com/users/643898809193332786/" aria-label="Discord" target="_blank" class="implied">
         <i aria-hidden="true" class="fab fa-discord"></i>
     </a>
 
-    <a href="https://patreon.com/user?u=96061849&utm_medium=clipboard_copy&utm_source=copyLink&utm_campaign=creatorshare_creator&utm_content=join_link" aria-label="Patreon" target="_blank" class="implied">
+    <a tabindex={tabindex} href="https://patreon.com/user?u=96061849&utm_medium=clipboard_copy&utm_source=copyLink&utm_campaign=creatorshare_creator&utm_content=join_link" aria-label="Patreon" target="_blank" class="implied">
         <i aria-hidden="true" class="fab fa-patreon"></i>
     </a>
 

diff --git a/src/components/navbar.astro b/src/components/navbar.astro
@@ -5,8 +5,8 @@ const { fixed = false, href = "/" } = Astro.props;
 ---
 
 <header class={fixed ? "scrolled" : ""}>
-    <a href={href} class="implied" aria-hidden="true">Jakub Gustafik</a>
-    <ContactBar />
+    <a tabindex="-1" href={href} class="implied" aria-hidden="true">Jakub Gustafik</a>
+    <ContactBar tabindex="-1" />
 </header>
 
 <script define:vars={{ fixed }} is:inline>

diff --git a/src/components/picture-frame.astro b/src/components/picture-frame.astro
@@ -2,7 +2,7 @@
 const { data } = Astro.props;
 ---
 
-<button title={data?.title ?? "Frame"} popovertarget={data?.title ?? ""}>
+<button tabindex="-1" title={data?.title ?? "Frame"} popovertarget={data?.title ?? ""}>
     <img src={data?.src ?? "/favicon.png"} alt={data?.title ?? "Frame"} width="128" height="128" class="base" />
     <div class="popover" id={data?.title ?? ""} aria-hidden="true" popover>
         <img src={data?.src ?? "/favicon.png"} alt={data?.title ?? "Frame"} width="256" height="256"/>

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -45,15 +45,15 @@ let tab = "tab-1", translateSelector = "0%";
         <div>
             <h1>Jakub Gustafik</h1>
             <span class="faded">Student & software developer based in Slovakia</span>
-            <ContactBar />
+            <ContactBar tabindex="2" />
         </div>
     </header>
 
     <nav id="picker" class="container">
         <div class="content-selector-container">
-            <a href="/" class={tab === "tab-1" ? "content-selector active" : "content-selector"} id="about-me">About me</a>
-            <a href="/" class={tab === "tab-2" ? "content-selector active" : "content-selector"} id="projects">Projects</a>
-            <a href="/" class={tab === "tab-3" ? "content-selector active" : "content-selector"} id="blog">Blog</a>
+            <a tabindex="1" href="/" class={tab === "tab-1" ? "content-selector active" : "content-selector"} id="about-me">About me</a>
+            <a tabindex="1" href="/" class={tab === "tab-2" ? "content-selector active" : "content-selector"} id="projects">Projects</a>
+            <a tabindex="1" href="/" class={tab === "tab-3" ? "content-selector active" : "content-selector"} id="blog">Blog</a>
         </div>
         <div aria-hidden="true" class="select-indicator" />
     </nav>