jargonsdev/jargons.dev

Add Visual Cues for Keyboard Navigation in Search Dialog

Ouverte

#35 ouverte le 8 avr. 2024

Voir sur GitHubGuide contributeur
 (19 commentaires) (0 réaction) (1 personne assignée)MDX (45 forks)auto 404
:arrow_lower_right: low priority:sparkles: enhancementhacktoberfest

Métriques du dépôt

Stars
 (54 étoiles)
Métriques de merge PR
 (Métriques PR en attente)

Description

The Search Dialog component currently supports keyboard navigation using the up, down, and enter keys. However, there are no visual cues to indicate these key bindings to users. This issue requests the implementation of visual buttons for these key bindings at the footer of the Search Dialog to improve user experience and accessibility.

What we've got

image

What we want 😉

image

Tasks

  1. Add Buttons for Key Bindings: Implement buttons for the up, down, and enter keys in the footer of the Search Dialog.
  2. Style Buttons: Style the buttons to make them visually distinct and easily recognizable.

Related Files

  • search.jsx component in the src/components/islands directory

Acceptance Criteria

  • Visual buttons for up, down, and enter keys are displayed in the footer of the Search Dialog.

Additional Notes

  • Consider using icons or text labels to indicate the purpose of each button.

Guide contributeur

Direction de recherche
Localisez le composant `search.jsx` dans `src/components/islands`, ajoutez des boutons pour les touches haut, bas et Entrée dans le pied de page et stylisez les avec CSS. Utilisez les gestionnaires d'événements de navigation au clavier existants pour lier les boutons à la même fonctionnalité.
Stack technique
javascriptreact
Domaine
frontend
Type d'issue
Fonctionnalité
DifficultéDifficulté estimée pour un nouveau contributeur, de 1 pour un très petit changement à 5 pour un travail expert.
2
Temps estiméFourchette de temps approximative pour investiguer, implémenter, tester et préparer une pull request.
1-3 heures
Statut d'activitéDisponibilité apparente de l'issue : fraîche, active, ancienne, bloquée ou en attente d'un mainteneur.
Active
ClartéClarté avec laquelle l'issue explique le changement attendu, les critères d'acceptation et la prochaine étape.
Claire
Prérequis
ReactCSS
Accessibilité débutantScore de 1 à 100 estimant l'accessibilité de cette issue pour un premier contributeur.
80