From 046274bda8b01bfc0c05214aef9c4eea95479886 Mon Sep 17 00:00:00 2001
From: Isaac Mills <rooster0055@protonmail.com>
Date: Sat, 12 Jul 2025 19:08:20 -0600
Subject: [PATCH] Make links accessible

---
 src/components/project.html           |  2 +-
 src/components/tab-button.html        | 10 ++++++++++
 src/components/tab-content.html       | 16 ++++------------
 src/link/components/github.html       |  2 +-
 src/link/components/linkedin.html     |  2 +-
 src/link/components/listenbrainz.html |  2 +-
 src/link/components/website.html      |  2 +-
 src/link/components/x.html            |  2 +-
 src/link/components/youtube.html      |  2 +-
 src/style.css                         |  7 +++----
 10 files changed, 24 insertions(+), 23 deletions(-)
 create mode 100644 src/components/tab-button.html

diff --git a/src/components/project.html b/src/components/project.html
index 62d3785..b0e8f96 100644
--- a/src/components/project.html
+++ b/src/components/project.html
@@ -11,7 +11,7 @@
     <div class="figure">
       <slot:img></slot:img>
     </div>
-    <if condition="text != ''">
+    <if condition="text != '' && !$slots.text?.filled">
       <p style="font-size: 200px; text-align: center; margin: 0; padding: 0;">{{text}}</p>
     </if>
     <markdown>
diff --git a/src/components/tab-button.html b/src/components/tab-button.html
new file mode 100644
index 0000000..04369f7
--- /dev/null
+++ b/src/components/tab-button.html
@@ -0,0 +1,10 @@
+<script props>
+  module.exports = {
+    page: props.page,
+    aria_selected: Boolean(props.selected)
+  }
+</script>
+<button hx-get="/partials/{{page}}" hx-push-url="/{{page}}" role="tab" aria-selected="{{aria_selected}}"
+  aria-controls="tab-content">
+  <yield></yield>
+</button>
\ No newline at end of file
diff --git a/src/components/tab-content.html b/src/components/tab-content.html
index 6979781..a0d3fad 100644
--- a/src/components/tab-content.html
+++ b/src/components/tab-content.html
@@ -4,18 +4,10 @@
   }
 </script>
 <nav class="tab-list" role="tablist" hx-indicator="#indicator">
-  <button hx-get="/partials/projects.html" hx-push-url="/projects.html" class="{{ selected-- == 0 ? 'selected' : '' }}"
-    role="tab" aria-selected="{{ selected == -1 ? 'true' : 'false' }}" aria-controls="tab-content">Our
-    Projects</button>
-  <button hx-get="/partials/who_we_are.html" hx-push-url="/who_we_are.html"
-    class="{{ selected-- == 0 ? 'selected' : '' }}" role="tab" aria-selected="{{ selected == -1 ? 'true' : 'false' }}"
-    aria-controls="tab-content">Who we are</button>
-  <button hx-get="/partials/interests.html" hx-push-url="/interests.html"
-    class="{{ selected-- == 0 ? 'selected' : '' }}" role="tab" aria-selected="{{ selected == -1 ? 'true' : 'false' }}"
-    aria-controls="tab-content">Our Interests</button>
-  <button hx-get="/partials/page_four.html" hx-push-url="/page_four.html"
-    class="{{ selected-- == 0 ? 'selected' : '' }}" role="tab" aria-selected="{{ selected == -1 ? 'true' : 'false' }}"
-    aria-controls="tab-content">Page Four</button>
+  <x-tab-button page="projects.html" selected="{{ selected-- == 0 }}">Our Projects</x-tab-button>
+  <x-tab-button page="who_we_are.html" selected="{{ selected-- == 0 }}">Who we are</x-tab-button>
+  <x-tab-button page="interests.html" selected="{{ selected-- == 0 }}">Our Interests</x-tab-button>
+  <x-tab-button page="page_four.html" selected="{{ selected-- == 0 }}">Page Four</x-tab-button>
 </nav>
 <hr style="margin: 0">
 <div id="tab-content" role="tabpanel" class="tab-content">
diff --git a/src/link/components/github.html b/src/link/components/github.html
index fc1ef27..b2b3373 100644
--- a/src/link/components/github.html
+++ b/src/link/components/github.html
@@ -3,7 +3,7 @@
     href: props.href,
   }
 </script>
-<a href="https://github.com/{{href}}" target="_blank">
+<a href="https://github.com/{{href}}" target="_blank" alt="{{href}} on GitHub">
   <svg width="16.405pt" height="16pt" version="1.1" viewBox="0 0 16.405 16" xml:space="preserve"
     xmlns="http://www.w3.org/2000/svg">
     <path
diff --git a/src/link/components/linkedin.html b/src/link/components/linkedin.html
index 3580033..ec3fdee 100644
--- a/src/link/components/linkedin.html
+++ b/src/link/components/linkedin.html
@@ -3,7 +3,7 @@
     href: props.href,
   }
 </script>
-<a href="https://www.linkedin.com/in/{{href}}" target="_blank">
+<a href="https://www.linkedin.com/in/{{href}}" target="_blank" alt="{{href}} on LinkedIn">
   <svg width="18.79pt" height="16pt" version="1.1" viewBox="0 0 18.79 16" xml:space="preserve"
     xmlns="http://www.w3.org/2000/svg">
     <g fill="#fff" stroke-width=".78292">
diff --git a/src/link/components/listenbrainz.html b/src/link/components/listenbrainz.html
index 59f1f0c..4b07937 100644
--- a/src/link/components/listenbrainz.html
+++ b/src/link/components/listenbrainz.html
@@ -3,7 +3,7 @@
     href: props.href,
   }
 </script>
-<a href="https://listenbrainz.org/user/{{href}}" target="_blank">
+<a href="https://listenbrainz.org/user/{{href}}" target="_blank" alt="{{href}} on ListenBrainz">
   <svg width="14.286pt" height="16pt" version="1.1" viewBox="0 0 14.286 16" xml:space="preserve"
     xmlns="http://www.w3.org/2000/svg">
     <polygon class="st0" transform="matrix(.57143 0 0 .57143 -1.3714 -.62857)"
diff --git a/src/link/components/website.html b/src/link/components/website.html
index a4c7d11..388ad54 100644
--- a/src/link/components/website.html
+++ b/src/link/components/website.html
@@ -3,7 +3,7 @@
     href: props.href,
   }
 </script>
-<a href="{{href}}" target="_blank">
+<a href="{{href}}" target="_blank" alt="Associated webpage">
   <svg id="Filled" width="16pt" height="16pt" version="1.1" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
     <path
       d="m8 0a8 8 0 1 0 8 8 8.0087 8.0087 0 0 0-8-8zm2.148 4.6667h-4.296a13.076 13.076 0 0 1 2.148-3.0587 13.047 13.047 0 0 1 2.148 3.0587zm0.53333 1.3333a6.8073 6.8073 0 0 1 0.31733 2 6.8073 6.8073 0 0 1-0.31733 2h-5.364a6.8073 6.8073 0 0 1-0.31733-2 6.8073 6.8073 0 0 1 0.31733-2zm-4.4147-4.4293a13.117 13.117 0 0 0-1.884 3.096h-2.1473a6.6873 6.6873 0 0 1 4.0313-3.096zm-4.9333 6.4293a6.6573 6.6573 0 0 1 0.30733-2h2.2927a8.0107 8.0107 0 0 0-0.26667 2 8.0107 8.0107 0 0 0 0.26667 2h-2.2927a6.6573 6.6573 0 0 1-0.30733-2zm0.902 3.3333h2.1473a13.117 13.117 0 0 0 1.884 3.096 6.6873 6.6873 0 0 1-4.0313-3.096zm3.6167 0h4.296a13.076 13.076 0 0 1-2.148 3.0587 13.047 13.047 0 0 1-2.148-3.0587zm3.8847 3.096a13.117 13.117 0 0 0 1.8807-3.096h2.1473a6.6873 6.6873 0 0 1-4.028 3.096zm4.93-6.4293a6.6573 6.6573 0 0 1-0.30733 2h-2.2927a8.0107 8.0107 0 0 0 0.26667-2 8.0107 8.0107 0 0 0-0.26667-2h2.2913a6.6573 6.6573 0 0 1 0.30867 2zm-3.0493-3.3333a13.117 13.117 0 0 0-1.8807-3.096 6.6873 6.6873 0 0 1 4.028 3.096z"
diff --git a/src/link/components/x.html b/src/link/components/x.html
index a6ee984..668d4ce 100644
--- a/src/link/components/x.html
+++ b/src/link/components/x.html
@@ -3,7 +3,7 @@
     href: props.href,
   }
 </script>
-<a href="https://x.com/{{href}}" target="_blank">
+<a href="https://x.com/{{href}}" target="_blank" alt="{{href}} on X">
   <svg width="17.7pt" height="16pt" version="1.1" viewBox="0 0 17.7 16" xmlns="http://www.w3.org/2000/svg">
     <path
       d="m13.939 0h2.7155l-5.931 6.7769 6.9767 9.2231h-5.4612l-4.2804-5.5924-4.8926 5.5924h-2.7199l6.3425-7.2503-6.6884-8.7497h5.5998l3.8652 5.1116 4.4729-5.1116zm-0.95358 14.377h1.5038l-9.7084-12.838h-1.6151l9.819 12.838z"
diff --git a/src/link/components/youtube.html b/src/link/components/youtube.html
index ce3168a..7ab8c95 100644
--- a/src/link/components/youtube.html
+++ b/src/link/components/youtube.html
@@ -3,7 +3,7 @@
     href: props.href,
   }
 </script>
-<a href="https://www.youtube.com/channel/{{href}}" target="_blank">
+<a href="https://www.youtube.com/channel/{{href}}" target="_blank" alt="{{href}} on YouTube">
   <svg width="22.711pt" height="16pt" version="1.1" viewBox="0 0 22.711 16" xml:space="preserve"
     xmlns="http://www.w3.org/2000/svg">
     <path
diff --git a/src/style.css b/src/style.css
index 0db884f..6026faa 100644
--- a/src/style.css
+++ b/src/style.css
@@ -125,7 +125,7 @@ html {
   font-size: 16pt;
 }
 
-.tab-list button.selected {
+.tab-list button[aria-selected=true] {
   font-weight: bold;
   border-bottom: solid 6px #eee;
 }
@@ -149,7 +149,7 @@ html {
 
 .person {
   clip-path: circle(50%);
-  margin: 10px 0;
+  margin: 15px 0;
 }
 
 body {
@@ -225,7 +225,6 @@ a {
 
   .project p {
     font-size: 14pt;
-    text-align: left;
   }
 }
 
@@ -240,7 +239,7 @@ a {
     font-size: 16pt;
   }
 
-  .tab-list button.selected {
+  .tab-list button[aria-selected=true] {
     background-color: #eee;
     font-weight: bold;
     color: black;