Skip to content

🎨 Palette: Add visual feedback for interactive elements and accessibility #7

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
kastnerp merged 1 commit into from
Apr 9, 2026
Merged

🎨 Palette: Add visual feedback for interactive elements and accessibility #7

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 6 additions & 1 deletion .Jules/palette.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,4 +8,9 @@

## 2024-06-25 - Custom File Input Accessibility and Modal Escapes
**Learning:** Hidden file inputs (`class="hidden"`) inside stylized labels completely break keyboard navigation, as users cannot tab to the input to trigger the file browser. Additionally, modals without keyboard (Escape) or explicit visual close buttons trap keyboard and screen reader users.
**Action:** Use `class="sr-only"` instead of `class="hidden"` for custom file inputs, and add `focus-within:ring-2` on the parent label to visibly indicate focus. Always provide `<svelte:window onkeydown={(e) => e.key === 'Escape' && close()} />` and a clearly labeled `aria-label="Close modal"` button in dialog headers.
**Action:** Use `class="sr-only"` instead of `class="hidden"` for custom file inputs, and add `focus-within:ring-2` on the parent label to visibly indicate focus. Always provide `<svelte:window onkeydown={(e) => e.key === 'Escape' && close()} />` and a clearly labeled `aria-label="Close modal"` button in dialog headers.## 2025-04-09 - Icon-Only Button Accessibility
**Learning:** Svelte icon-only buttons often lack ARIA attributes, making them invisible to screen readers.
**Action:** Always ensure , (if toggleable), and ring styling are present for custom buttons using unicode characters or SVGs.
## 2025-04-09 - Icon-Only Button Accessibility
**Learning:** Svelte icon-only buttons often lack ARIA attributes, making them invisible to screen readers.
**Action:** Always ensure `aria-label`, `aria-expanded` (if toggleable), and `focus-visible` ring styling are present for custom buttons using unicode characters or SVGs.
39 changes: 22 additions & 17 deletions src/App.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,9 @@
try {
const hostname = new URL(url).hostname;
urlLoadSource = hostname;
} catch { urlLoadSource = 'remote server'; }
} catch {
urlLoadSource = 'remote server';
}
try {
const { csvText, baseUrl } = await loadFromUrl(url);
dataset.load(csvText, { type: 'url', name: url, baseUrl });
Expand Down Expand Up @@ -62,14 +64,18 @@
<div class="flex-1 flex min-h-0">
<!-- Sidebar -->
{#if sidebarOpen && dataset.isLoaded}
<aside class="w-64 flex-shrink-0 bg-white border-r border-gray-200 overflow-y-auto flex flex-col">
<aside
class="w-64 flex-shrink-0 bg-white border-r border-gray-200 overflow-y-auto flex flex-col"
>
<div class="flex items-center justify-between px-3 py-2 border-b border-gray-200">
<span class="text-xs font-semibold text-gray-500 uppercase tracking-wider">Controls</span>
<button
class="text-gray-400 hover:text-gray-600 text-xs"
class="text-gray-400 hover:text-gray-600 text-xs focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 rounded"
onclick={() => (sidebarOpen = false)}
title="Close sidebar"
>&#10005;</button>
aria-label="Close sidebar"
aria-expanded="true">&#10005;</button
>
</div>

<InputSliders />
Expand All @@ -85,11 +91,7 @@
<!-- Data table toggle -->
<div class="border-t border-gray-200 mt-auto p-3">
<label class="flex items-center gap-2 text-xs text-gray-600 cursor-pointer">
<input
type="checkbox"
bind:checked={showDataTable}
class="rounded border-gray-300"
/>
<input type="checkbox" bind:checked={showDataTable} class="rounded border-gray-300" />
Show data table
</label>
</div>
Expand All @@ -100,10 +102,12 @@
{#if !sidebarOpen && dataset.isLoaded}
<button
class="flex-shrink-0 w-6 flex items-center justify-center bg-white border-r border-gray-200
text-gray-400 hover:text-gray-600 hover:bg-gray-50 transition-colors"
text-gray-400 hover:text-gray-600 hover:bg-gray-50 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
onclick={() => (sidebarOpen = true)}
title="Open sidebar"
>&#9654;</button>
aria-label="Open sidebar"
aria-expanded="false">&#9654;</button
>
{/if}

<!-- Main grid area -->
Expand Down Expand Up @@ -158,7 +162,10 @@
Retry
</button>
<button
onclick={() => { urlLoadError = ''; showLoadModal = true; }}
onclick={() => {
urlLoadError = '';
showLoadModal = true;
}}
class="px-5 py-2 bg-gray-100 text-gray-700 text-sm rounded-lg font-medium
hover:bg-gray-200 transition-colors"
>
Expand All @@ -173,12 +180,10 @@
<div class="flex-1 flex items-center justify-center">
<div class="text-center max-w-md">
<div class="text-6xl mb-4">&#128200;</div>
<h2 class="text-xl font-semibold text-gray-900 mb-2">
Design Explorer
</h2>
<h2 class="text-xl font-semibold text-gray-900 mb-2">Design Explorer</h2>
<p class="text-gray-500 mb-6">
Explore multi-dimensional parametric design spaces. Load a CSV
dataset to visualize and compare design alternatives.
Explore multi-dimensional parametric design spaces. Load a CSV dataset to visualize
and compare design alternatives.
</p>
<button
onclick={() => (showLoadModal = true)}
Expand Down
4 changes: 2 additions & 2 deletions src/lib/components/layout/Navbar.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -121,7 +121,7 @@

<button
onclick={handleZoomToSelection}
class="px-2.5 py-1.5 text-xs text-gray-600 rounded-lg hover:bg-gray-100 transition-colors"
class="px-2.5 py-1.5 text-xs text-gray-600 rounded-lg hover:bg-gray-100 transition-colors disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-transparent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
title="Zoom to currently filtered designs"
disabled={selection.brushes.length === 0}
>
Expand All @@ -130,7 +130,7 @@

<button
onclick={handleExcludeSelection}
class="px-2.5 py-1.5 text-xs text-gray-600 rounded-lg hover:bg-gray-100 transition-colors"
class="px-2.5 py-1.5 text-xs text-gray-600 rounded-lg hover:bg-gray-100 transition-colors disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-transparent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
title="Exclude currently filtered designs"
disabled={selection.brushes.length === 0}
>
Expand Down