Skip to content
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.

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

✨ feat(search): hide "clear search" icon if input is empty #388

Merged
merged 1 commit into from
Sep 19, 2024

Conversation

welpo
Copy link
Owner

@welpo welpo commented Sep 19, 2024

Summary

Implements a dynamic visibility toggle for the clear search button in the search modal. The button now appears only when there's text in the search input (even if there's only spaces). This is consistent with the behaviour of search boxes on Kagi, Duckduckgo, or Google.

Related issue

Resolves #382.

Changes

  • Clear button is hidden by default
  • Added logic to show/hide the clear button based on search input content

Accessibility

  • The clear button's visibility is now tied to its functionality, improving the logical flow for screen readers
  • The button remains keyboard accessible when visible
  • ARIA attributes on the search input remain unchanged, maintaining existing accessibility

Screenshots

search

Type of change

  • Bug fix (fixes an issue without altering functionality)
  • New feature (adds non-breaking functionality)
  • Breaking change (alters existing functionality)
  • UI/UX improvement (enhances user interface without altering functionality)
  • Refactor (improves code quality without altering functionality)
  • Documentation update
  • Other (please describe below)

Checklist

  • I have verified the accessibility of my changes
  • I have tested all possible scenarios for this change
  • I have updated theme.toml with a sane default for the feature
  • I have made corresponding changes to the documentation:
    • Updated config.toml comments
    • Updated theme.toml comments
    • Updated "Mastering tabi" post in English
    • (Optional) Updated "Mastering tabi" post in Spanish
    • (Optional) Updated "Mastering tabi" post in Catalan

Sorry, something went wrong.

Verified

This commit was signed with the committer’s verified signature.
welpo Óscar
@welpo welpo added the enhancement New feature or request label Sep 19, 2024
Copy link

netlify bot commented Sep 19, 2024

Deploy Preview for tabi-demo ready!

Name Link
🔨 Latest commit 9525304
🔍 Latest deploy log https://app.netlify.com/sites/tabi-demo/deploys/66ec2d4cd810780008d3475a
😎 Deploy Preview https://deploy-preview-388--tabi-demo.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@welpo welpo changed the title ✨ feat: hide "clear search" icon when search is empty ✨ feat(search): hide "clear search" icon when input is empty Sep 19, 2024
@welpo welpo changed the title ✨ feat(search): hide "clear search" icon when input is empty ✨ feat(search): hide "clear search" icon if input is empty Sep 19, 2024
@welpo welpo merged commit 1ffe43f into main Sep 19, 2024
7 of 9 checks passed
@welpo welpo deleted the feat/dynamic-clear-search-button-visibility branch September 19, 2024 14:00
welpo added a commit that referenced this pull request Sep 24, 2024

Verified

This commit was signed with the committer’s verified signature.
welpo Óscar
Broke in #388.

- Rename local searchInput variable to inputValue
- Preserve global searchInput DOM element reference
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Change search box's "X" button behavior
1 participant