Skip to content

Conversation

Aaqilyousuf
Copy link
Contributor

@Aaqilyousuf Aaqilyousuf commented Sep 3, 2025

Add Search Input Enhancements and Keyboard Shortcuts (#219)

Changes

  • Add keyboard shortcut (Ctrl+K/⌘K) to quickly focus search input
  • Implement grey outline and focus states for better visual feedback
  • Add keyboard shortcut hint that disappears when typing
  • Improve search input accessibility with ARIA attributes
  • Wrap search inputs in container for better styling control

Technical Details

  • Modified osl-search.js to include new styles and keyboard functionality
  • Added CSS transitions for smooth state changes
  • Implemented platform-specific shortcut hints (⌘K for Mac, Ctrl+K for Windows/Linux)
  • Enhanced focus management for better keyboard navigation

Testing

  1. Press Ctrl+K (or ⌘K on Mac) to focus the search input
  2. Verify the grey outline appears on the search input
  3. Check that the shortcut hint disappears when typing
  4. Confirm focus states work with keyboard navigation
  5. Test on both desktop and mobile views

Screenshots

Screenshot 2025-09-03 090502 image

@Aaqilyousuf
Copy link
Contributor Author

image it passes all the test in local but i dont know why it fail in github action @xmnlab can you help me with this

@Aaqilyousuf
Copy link
Contributor Author

image

Copy link
Member

@xmnlab xmnlab left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM! thanks for working on that @Aaqilyousuf

@xmnlab xmnlab merged commit 91e05a8 into OpenScienceLabs:main Sep 3, 2025
1 of 2 checks passed
@Aaqilyousuf
Copy link
Contributor Author

@xmnlab Thanks for merging! Excited to contribute more to this project.

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.

2 participants