joshwcomeau/guppy

Improve keyboard navigation in our forms

Aperta

#316 aperta il 1 nov 2018

Vedi su GitHubGuida contributor
 (6 commenti) (2 reazioni) (0 assegnatari)JavaScript (151 fork)github user discovery
good first issue

Metriche repository

Star
 (3240 stelle)
Metriche merge PR
 (Nessuna PR mergiata in 30 g)

Descrizione

During my work on AppSettingsModal I've noticed that keyboard navigation through the form is not supported yet. I think it's needed to have a more native ux.

Describe the solution you'd like

  • Tab key should move the focus to the next form field forward and shift+tab backwards. Starting at the first element.
  • Project icon selection should support left, right, up & down navigation & enter key to move the focus out of the selection area.
  • Escape key should dismiss modals

Optional: Add navigation with left,right,up & down to move the focus.

Forms to check

  • CreateNewProjectWizard
  • ProjectConfigurationModal
  • AppSettingsModal

Note: There is more to improve e.g. keyboard navigation in sidebar & project page. But I think we should tackle this in a separate issue.

Guida contributor

Direzione di ricerca
Studia i componenti modali esistenti elencati e implementa la navigazione tramite Tab/Shift+Tab, i tasti freccia per la selezione delle icone e il tasto Escape per chiudere. Usa gli event handler di React e la gestione del focus.
Tech stack
reactjavascript
Dominio
frontend
Tipo issue
Funzionalità
DifficoltàQuanto dovrebbe essere impegnativa per un nuovo contributor.
2
Tempo stimatoTempo stimato per completare e verificare uno scope piccolo.
Mezza giornata
Stato attivitàQuanto è probabile che la issue sia ancora attiva e reviewable.
Attiva
ChiarezzaQuanto chiaramente la issue descrive problema, scope e risultato atteso.
Chiara
Prerequisiti
React
Adatta ai principiantiQuanto la issue è adatta a contributor alla prima esperienza.
70