From 09557656807ade01c5ad5dde718c24b0dc0ebdc2 Mon Sep 17 00:00:00 2001
From: Sean O'Connor <sean@soconnor.dev>
Date: Fri, 14 Feb 2025 11:02:26 -0500
Subject: [PATCH] Enhance tab accessibility and styling with ARIA attributes
 and refined CSS

---
 assets/style.css | 38 +++++++++++++++++++++++++++++++++-----
 index.html       | 24 ++++++++++++++----------
 2 files changed, 47 insertions(+), 15 deletions(-)

diff --git a/assets/style.css b/assets/style.css
index 386c184..ac4ee9f 100644
--- a/assets/style.css
+++ b/assets/style.css
@@ -80,6 +80,9 @@ body {
     border-radius: var(--radius);
     box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
     transition: background-color 0.3s ease, border-color 0.3s ease;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
 }
 
 .card-header {
@@ -89,6 +92,7 @@ body {
 
 .card-content {
     padding: 1.5rem;
+    flex: 1;
 }
 
 .header-banner {
@@ -151,20 +155,25 @@ body {
 
 .tabs-list {
     display: flex;
+    gap: 0.5rem;
     border-bottom: 1px solid hsl(var(--border));
     margin-bottom: 1.5rem;
+    padding: 0 0.5rem;
 }
 
 .tab {
+    position: relative;
     padding: 0.75rem 1rem;
-    border-bottom: 2px solid transparent;
     color: hsl(var(--muted-foreground));
     font-weight: 500;
+    font-size: 0.875rem;
     cursor: pointer;
-    transition: all 0.3s ease;
+    transition: all 0.2s ease;
     background: none;
     border: none;
     outline: none;
+    user-select: none;
+    margin-bottom: -1px;
 }
 
 .tab:hover {
@@ -173,7 +182,17 @@ body {
 
 .tab[data-state="active"] {
     color: hsl(var(--foreground));
-    border-bottom-color: hsl(var(--primary));
+}
+
+.tab[data-state="active"]::after {
+    content: '';
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    height: 2px;
+    background: hsl(var(--primary));
+    border-radius: var(--radius) var(--radius) 0 0;
 }
 
 .tab-content {
@@ -195,7 +214,7 @@ body {
     display: flex;
     flex-direction: column;
     gap: 1rem;
-    padding: 1rem;
+    padding: 1.5rem;
     background: hsl(var(--card));
     border: 1px solid hsl(var(--border));
     border-radius: var(--radius);
@@ -209,13 +228,14 @@ body {
 
 .plugin-header {
     display: flex;
-    align-items: center;
+    align-items: flex-start;
     gap: 1rem;
 }
 
 .plugin-icon {
     width: 3rem;
     height: 3rem;
+    min-width: 3rem;
     border-radius: calc(var(--radius) - 0.25rem);
     object-fit: contain;
     background: hsl(var(--secondary));
@@ -247,6 +267,13 @@ body {
     overflow: hidden;
 }
 
+/* Images */
+img {
+    max-width: 100%;
+    height: auto;
+}
+
+/* Badges */
 .badge {
     display: inline-flex;
     align-items: center;
@@ -257,6 +284,7 @@ body {
     background: hsl(var(--primary) / 0.1);
     color: hsl(var(--primary));
     transition: all 0.3s ease;
+    margin: 0.25rem;
 }
 
 .badge-secondary {
diff --git a/index.html b/index.html
index a60a50f..9148bb0 100644
--- a/index.html
+++ b/index.html
@@ -29,12 +29,12 @@
                     <!-- Tabs -->
                     <div class="tabs">
                         <div class="tabs-list" role="tablist">
-                            <button class="tab" role="tab" data-state="active" data-tab="overview">Overview</button>
-                            <button class="tab" role="tab" data-tab="plugins">Available Plugins</button>
+                            <button class="tab" role="tab" aria-selected="true" data-state="active" data-tab="overview">Overview</button>
+                            <button class="tab" role="tab" aria-selected="false" data-tab="plugins">Available Plugins</button>
                         </div>
 
                         <!-- Overview Tab -->
-                        <div class="tab-content" data-state="active" role="tabpanel" data-tab="overview">
+                        <div class="tab-content" data-state="active" role="tabpanel" data-tab="overview" aria-hidden="false">
                             <div class="grid grid-cols-2">
                                 <!-- Author Info -->
                                 <div class="card">
@@ -75,7 +75,7 @@
                                         </div>
                                         <div id="ros2Container" class="hidden">
                                             <h3>ROS 2</h3>
-                                            <div id="ros2Distributions"></div>
+                                            <div id="ros2Distributions" style="margin: 0.5rem 0;"></div>
                                             <div id="ros2RecommendedContainer" class="hidden">
                                                 <span>Recommended:</span>
                                                 <span id="ros2Recommended"></span>
@@ -91,13 +91,13 @@
                                     <h2>Tags</h2>
                                 </div>
                                 <div class="card-content">
-                                    <div id="tags"></div>
+                                    <div id="tags" style="margin: -0.25rem;"></div>
                                 </div>
                             </div>
                         </div>
 
                         <!-- Plugins Tab -->
-                        <div class="tab-content" role="tabpanel" data-tab="plugins">
+                        <div class="tab-content" role="tabpanel" data-tab="plugins" aria-hidden="true">
                             <div class="card">
                                 <div class="card-header">
                                     <div style="display: flex; justify-content: space-between; align-items: center;">
@@ -123,15 +123,19 @@
         document.querySelectorAll('.tab').forEach(tab => {
             tab.addEventListener('click', () => {
                 // Update tab states
-                document.querySelectorAll('.tab').forEach(t => t.setAttribute('data-state', ''));
+                document.querySelectorAll('.tab').forEach(t => {
+                    t.setAttribute('data-state', '');
+                    t.setAttribute('aria-selected', 'false');
+                });
                 tab.setAttribute('data-state', 'active');
+                tab.setAttribute('aria-selected', 'true');
 
                 // Update content states
                 const tabId = tab.getAttribute('data-tab');
                 document.querySelectorAll('.tab-content').forEach(content => {
-                    content.setAttribute('data-state', 
-                        content.getAttribute('data-tab') === tabId ? 'active' : ''
-                    );
+                    const isActive = content.getAttribute('data-tab') === tabId;
+                    content.setAttribute('data-state', isActive ? 'active' : '');
+                    content.setAttribute('aria-hidden', isActive ? 'false' : 'true');
                 });
             });
         });