Add keyboard shortcuts for whiteboard tools

Ouverte
  • Quelque chose ne va pas ?
#618 0 commentaires 0 réactions 0 personnes assignées Voir sur GitHub

Les mainteneurs répondent en général sous 1 jour

Personne n'a encore pris cette issue.

Évaluation

Difficulté
3/5
Temps estimé
1-2 jours
Accessibilité débutants
78/100
Type d'issue
Fonctionnalité
Clarté
Clairement spécifiée
Activité
Active
Stack technique
css, html, javascript
Domaine
accessibility, frontend

Piste de recherche

Start with the existing whiteboard keyboard event listener and tool-selection functions in web/interview.js, then inspect the toolbar markup in web/interview.html and styles in web/styles.css. Add browser coverage in tests/browser/whiteboard-shortcuts.test.js for switching tools, cycling colors and sizes, returning from text mode, and ignoring typing, repeats, and shortcuts outside the whiteboard. Done when the visible labels and all listed shortcut behaviors work.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Description

Description

The whiteboard toolbar currently requires users to click the pen, eraser, or text controls to switch tools. Add keyboard shortcuts so users can switch tools and adjust pen colors or eraser sizes from the keyboard.

The toolbar should also display small, always visible key labels beside the relevant controls so users can discover the shortcuts.

Expected Behavior

  • Press P to switch to the pen. If the pen is already selected, pressing P cycles through black, red, blue, and green.
  • Press E to switch to the eraser. If the eraser is already selected, pressing E cycles through its available sizes.
  • Press T to switch to the text tool. Pressing T again returns to the previously used pen or eraser.
  • Display P, E, and T key labels beside the pen, eraser, and text controls.
  • Do not trigger shortcuts while the user is typing in a text input or text label.
  • Ignore held-key repeats so one press only changes the color or size once.
  • Only handle these shortcuts while the user is interacting with the whiteboard.

Proposed Solution

  • In web/interview.js, handle P, E, and T key presses in the whiteboard’s existing keyboard event listener. Reuse the current tool-selection functions to switch tools, cycle pen colors or eraser sizes, and return from the text tool to the previously selected pen or eraser. Ignore repeated key events and events from text inputs or editable elements, and only respond when the user is interacting with the whiteboard.
  • In web/interview.html, add always visible P, E, and T labels beside the pen, eraser, and text controls so users can discover the shortcuts.
  • In web/styles.css, style the labels as small keycaps that fit the existing toolbar.
  • In tests/browser/whiteboard-shortcuts.test.js, add browser tests for tool switching, color and size cycling, returning from text mode, and ignoring shortcuts while typing, holding a key, or outside the whiteboard.

Example

Image
Langage dominant
Rust
Étoiles
223
Forks
148
Merge moyen
1 j 7 h
PR mergées (30 j)
225

Préparer son environnement

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Autres issues de sysprog21/codetrial

Toutes les issues de sysprog21/codetrial

Issues similaires

Plus d'issues Rust

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.