joshwcomeau/guppy

Improve keyboard navigation in our forms

Offen

#316 geöffnet am 01.11.2018

Auf GitHub ansehenContributor Guide
 (6 Kommentare) (2 Reaktionen) (0 zugewiesene Personen)JavaScript (151 Forks)github user discovery
good first issue

Repository-Metriken

Stars
 (3.240 Sterne)
PR-Merge-Metriken
 (Keine gemergten PRs in 30 T)

Beschreibung

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.

Contributor Guide

Research-Richtung
Studiere Sie die aufgelisteten vorhandenen modalen Komponenten und implementieren Sie die Navigation mit Tab/Umschalt+Tab, Pfeiltasten für die Symbolauswahl und Escape zum Schließen. Verwenden Sie React Ereignisbehandler und Fokusverwaltung.
Tech Stack
reactjavascript
Domain
frontend
Issue Type
Funktion
SchwierigkeitGeschätzte Implementierungsschwierigkeit für neue Contributors, von 1 für sehr kleine Änderungen bis 5 für Expertenarbeit.
2
Geschätzte ZeitEin grober Zeitrahmen, um zu recherchieren, zu implementieren, zu testen und einen Pull Request vorzubereiten.
Halber Tag
AktivitätsstatusWie verfügbar das Issue gerade wirkt: frisch, aktiv, stale, blockiert oder wartet auf Maintainer-Input.
Aktiv
KlarheitWie klar das Issue die erwartete Änderung, Akzeptanzkriterien und den nächsten Schritt erklärt.
Klar
Voraussetzungen
React
EinsteigerfreundlichkeitEin Score von 1 bis 100, der schätzt, wie zugänglich dieses Issue für First-Time Contributors ist.
70