soconnor/robot-plugins
1
0
Fork 0
mirror of https://github.com/soconnor0919/robot-plugins.git synced 2025-12-15 08:24:45 -05:00
Code Issues Packages Projects Releases Wiki Activity

Enhance tab accessibility and styling with ARIA attributes and refined CSS

Browse Source
This commit is contained in:
Sean O'Connor
2025-02-14 11:02:26 -05:00
parent 0f7a05435d
commit 0955765680
2 changed files with 47 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
assets/style.css
View File

@@ -80,6 +80,9 @@ body {
border-radius: var(--radius); border-radius: var(--radius);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
transition: background-color 0.3s ease, border-color 0.3s ease; transition: background-color 0.3s ease, border-color 0.3s ease;
height: 100%;
display: flex;
flex-direction: column;
} }
.card-header { .card-header {
@@ -89,6 +92,7 @@ body {
.card-content { .card-content {
padding: 1.5rem; padding: 1.5rem;
flex: 1;
} }
.header-banner { .header-banner {
@@ -151,20 +155,25 @@ body {
.tabs-list { .tabs-list {
display: flex; display: flex;
gap: 0.5rem;
border-bottom: 1px solid hsl(var(--border)); border-bottom: 1px solid hsl(var(--border));
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
padding: 0 0.5rem;
} }
.tab { .tab {
position: relative;
padding: 0.75rem 1rem; padding: 0.75rem 1rem;
border-bottom: 2px solid transparent;
color: hsl(var(--muted-foreground)); color: hsl(var(--muted-foreground));
font-weight: 500; font-weight: 500;
font-size: 0.875rem;
cursor: pointer; cursor: pointer;
transition: all 0.3s ease; transition: all 0.2s ease;
background: none; background: none;
border: none; border: none;
outline: none; outline: none;
user-select: none;
margin-bottom: -1px;
} }
.tab:hover { .tab:hover {
@@ -173,7 +182,17 @@ body {
.tab[data-state="active"] { .tab[data-state="active"] {
color: hsl(var(--foreground)); 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 { .tab-content {
@@ -195,7 +214,7 @@ body {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 1rem; gap: 1rem;
padding: 1rem; padding: 1.5rem;
background: hsl(var(--card)); background: hsl(var(--card));
border: 1px solid hsl(var(--border)); border: 1px solid hsl(var(--border));
border-radius: var(--radius); border-radius: var(--radius);
@@ -209,13 +228,14 @@ body {
.plugin-header { .plugin-header {
display: flex; display: flex;
align-items: center; align-items: flex-start;
gap: 1rem; gap: 1rem;
} }
.plugin-icon { .plugin-icon {
width: 3rem; width: 3rem;
height: 3rem; height: 3rem;
min-width: 3rem;
border-radius: calc(var(--radius) - 0.25rem); border-radius: calc(var(--radius) - 0.25rem);
object-fit: contain; object-fit: contain;
background: hsl(var(--secondary)); background: hsl(var(--secondary));
@@ -247,6 +267,13 @@ body {
overflow: hidden; overflow: hidden;
} }
/* Images */
img {
max-width: 100%;
height: auto;
}
/* Badges */
.badge { .badge {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
@@ -257,6 +284,7 @@ body {
background: hsl(var(--primary) / 0.1); background: hsl(var(--primary) / 0.1);
color: hsl(var(--primary)); color: hsl(var(--primary));
transition: all 0.3s ease; transition: all 0.3s ease;
margin: 0.25rem;
} }
.badge-secondary { .badge-secondary {

24
index.html
View File

@@ -29,12 +29,12 @@
<!-- Tabs --> <!-- Tabs -->
<div class="tabs"> <div class="tabs">
<div class="tabs-list" role="tablist"> <div class="tabs-list" role="tablist">
<button class="tab" role="tab" data-state="active" data-tab="overview">Overview</button> <button class="tab" role="tab" aria-selected="true" 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="false" data-tab="plugins">Available Plugins</button>
</div> </div>
<!-- Overview Tab --> <!-- 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"> <div class="grid grid-cols-2">
<!-- Author Info --> <!-- Author Info -->
<div class="card"> <div class="card">
@@ -75,7 +75,7 @@
</div> </div>
<div id="ros2Container" class="hidden"> <div id="ros2Container" class="hidden">
<h3>ROS 2</h3> <h3>ROS 2</h3>
<div id="ros2Distributions"></div> <div id="ros2Distributions" style="margin: 0.5rem 0;"></div>
<div id="ros2RecommendedContainer" class="hidden"> <div id="ros2RecommendedContainer" class="hidden">
<span>Recommended:</span> <span>Recommended:</span>
<span id="ros2Recommended"></span> <span id="ros2Recommended"></span>
@@ -91,13 +91,13 @@
<h2>Tags</h2> <h2>Tags</h2>
</div> </div>
<div class="card-content"> <div class="card-content">
<div id="tags"></div> <div id="tags" style="margin: -0.25rem;"></div>
</div> </div>
</div> </div>
</div> </div>
<!-- Plugins Tab --> <!-- 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">
<div class="card-header"> <div class="card-header">
<div style="display: flex; justify-content: space-between; align-items: center;"> <div style="display: flex; justify-content: space-between; align-items: center;">
@@ -123,15 +123,19 @@
document.querySelectorAll('.tab').forEach(tab => { document.querySelectorAll('.tab').forEach(tab => {
tab.addEventListener('click', () => { tab.addEventListener('click', () => {
// Update tab states // 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('data-state', 'active');
tab.setAttribute('aria-selected', 'true');
// Update content states // Update content states
const tabId = tab.getAttribute('data-tab'); const tabId = tab.getAttribute('data-tab');
document.querySelectorAll('.tab-content').forEach(content => { document.querySelectorAll('.tab-content').forEach(content => {
content.setAttribute('data-state', const isActive = content.getAttribute('data-tab') === tabId;
content.getAttribute('data-tab') === tabId ? 'active' : '' content.setAttribute('data-state', isActive ? 'active' : '');
); content.setAttribute('aria-hidden', isActive ? 'false' : 'true');
}); });
}); });
}); });