jargonsdev/jargons.dev

Add Visual Cues for Keyboard Navigation in Search Dialog

Aberta

#35 aberto em 8 de abr. de 2024

Ver no GitHubGuia do colaborador
 (19 comentários) (0 reação) (1 responsável)MDX (45 forks)auto 404
:arrow_lower_right: low priority:sparkles: enhancementhacktoberfest

Métricas do repositório

Stars
 (54 estrelas)
Métricas de merge de PR
 (Métricas PR pendentes)

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.

Guia do colaborador

Direção de pesquisa
Localize o componente `search.jsx` em `src/components/islands`, adicione botões para as teclas para cima, para baixo e Enter no rodapé e estilize os com CSS. Use os manipuladores de eventos de navegação por teclado existentes para vincular os botões à mesma funcionalidade.
Pilha de tecnologia
javascriptreact
Domain
frontend
Tipo Issue
Funcionalidade
DifficultyDificuldade de implementação estimada para um novo contribuidor, de 1 para alterações muito pequenas a 5 para trabalho de nível especializado.
2
Tempo estimadoUm intervalo de tempo aproximado para um colaborador experiente investigar, implementar, testar e preparar um pull request.
1-3 horas
Status da atividadeQuão disponível o issue aparece agora: novo, ativo, obsoleto, bloqueado ou aguardando entrada do mantenedor.
Ativo
ClarityCom que clareza o issue explica a mudança esperada, os critérios de aceitação e a próxima etapa.
Claro
Prerequisites
ReactCSS
Simpatia para novatosUma pontuação de 1 a 100 que estima o quão acessível este issue é para colaboradores iniciantes.
80