Skip to content

🎨 Palette: Enhance Search UX and Fix Accessibility#47

Open
Woschj wants to merge 1 commit intomainfrom
palette/enhanced-search-ux-11731302769807672902
Open

🎨 Palette: Enhance Search UX and Fix Accessibility#47
Woschj wants to merge 1 commit intomainfrom
palette/enhanced-search-ux-11731302769807672902

Conversation

@Woschj
Copy link
Owner

@Woschj Woschj commented Feb 28, 2026

💡 What

This PR introduces micro-UX improvements to the Scandy search interface and fixes an accessibility regression in the base layout.

🎯 Why

  • The previous search functionality lacked a quick way to reset the filter, requiring users to manually delete text.
  • Users had no visual feedback when a search yielded zero results, which could be confusing.
  • The QuickScan trigger used a mismatched div/button tag combination, which corrupted the accessibility tree.

♿ Accessibility

  • Refactored quickScanTrigger to a semantic <button> element, which natively handles keyboard navigation and ARIA roles.
  • Added descriptive aria-label and title attributes to the new "Clear Search" button.
  • Used aria-live="polite" indirectly via the "No results" row to ensure screen readers are aware of empty states.

📸 UI Changes

  • The search bar now uses the modern DaisyUI join component with integrated borders and focus rings.
  • A "times-circle" icon appears inside the search input when text is entered, allowing for one-click clearing.
  • A dedicated table row appears when no matching items are found, including a helpful "Suche zurücksetzen" (Reset search) link.

PR created automatically by Jules for task 11731302769807672902 started by @Woschj

- Refactor QuickScan trigger to semantic button for better accessibility.
- Modernize search bar using DaisyUI 'join' component.
- Add dynamic 'Clear Search' button to the search input.
- Add 'No results found' feedback row to data tables.
- Update JavaScript for smoother filtering and state management.

Co-authored-by: Woschj <81321922+Woschj@users.noreply.github.com>
@google-labs-jules
Copy link
Contributor

👋 Jules, reporting for duty! I'm here to lend a hand with this pull request.

When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down.

I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job!

For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with @jules. You can find this option in the Pull Request section of your global Jules UI settings. You can always switch back!

New to Jules? Learn more at jules.google/docs.


For security, I will only act on instructions from the user who triggered this task.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant