Système de Saisie Numérique et de Stepper

Que fait Système de Saisie Numérique et de Stepper ?

Objectif

Le Système de Saisie Numérique et de Stepper fournit un cadre normalisé pour concevoir, structurer et implémenter les contrôles utilisés pour sélectionner, ajuster ou saisir des valeurs numériques discrètes. La saisie numérique précise—comme les quantités d'articles dans un panier, les attributions de sièges SaaS, les unités de niveau tarifaire, les plages budgétaires ou les spécifications dimensionnelles—nécessite un équilibre entre les micro-ajustements rapides et l'édition textuelle directe, des états de limites min/max clairs, des cibles tactiles adaptées au toucher, et une accessibilité complète au clavier et aux lecteurs d'écran.

Les contrôles HTML standards <input type="number"> s'affichent de manière incohérente selon les navigateurs, présentant souvent des flèches de défilement natives minuscules et non personnalisables qui violent les directives relatives aux cibles tactiles (WCAG 2.2 SC 2.5.8) et déclenchent des ajustements de défilement accidentels. Ce skill définit des modèles d'interface utilisateur explicites, des règles de disposition spatiale, des états d'interaction et des normes d'accessibilité pour les steppers numériques personnalisés et les champs délimités par des unités.

Cas d'Utilisation

• Sélecteurs de Quantité dans le Panier E-Commerce : Permettre aux acheteurs d'incrémenter, décrémenter ou saisir facilement les quantités d'articles sur les pages produit, les tiroirs de panier et les tableaux récapitulatifs de paiement.
• Contrôles de Sièges et Licences de Plans SaaS : Provisionner des sièges utilisateur, des instances de serveur ou des gigaoctets de stockage sur les pages de tarification ou les paramètres de gestion des abonnements.
• Saisies d'Unités Contraintes dans les Formulaires : Capturer des métriques contraintes comme les pourcentages (0–100 %), les limites d'âge, les dimensions d'articles (longueur/largeur/hauteur) ou les montants monétaires.
• Contrôles Financiers et de Calculatrices : Sélectionner les durées de prêt, les montants de dépôt ou les incréments d'investissement dans des calculatrices interactives.
• Contrôles de Tableaux de Bord et de Filtres : Ajuster les seuils numériques, les limites de lignes de pagination ou les filtres de plage de métriques dans des environnements de bureau denses en données.

Quand NE PAS Utiliser

• Sélection de Plage Continue : Pour une exploration large et non spécifique de plages numériques où les valeurs exactes sont secondaires par rapport aux positions relatives, utilisez accessible-range-slider-implementation ou des curseurs à double pouce.
• Grands Nombres Arbitraires : Pour saisir des numéros de carte de crédit, des numéros de téléphone, des codes postaux ou des numéros de sécurité sociale où les opérations d'incrémentation/décrémentation n'ont pas de sens, utilisez <input type="text" inputmode="numeric"> standard avec form-design-system.
• Sélection de Date et Heure : Pour sélectionner des jours, des mois ou des heures, utilisez calendar-and-date-system.
• Grands Ensembles d'Options Discrètes : Lors de la sélection parmi des quantités en vrac préconfigurées (par exemple, 25, 50, 100, 500), utilisez segmented-control-system ou custom-select-and-combobox-system.

Entrées

1. Limites de Valeur : Contraintes de minimum (min), maximum (max) et pas d'incrémentation (step).
2. Contexte et Densité : Espace de disposition disponible (ligne de tableau compacte intégrée vs. bloc d'achat PDP proéminent).
3. Format et Unité de Saisie : Unité physique ou monétaire associée (par exemple, $, %, articles, kg, sièges).
4. Mode d'Interaction : Si la saisie manuelle directe est autorisée ou si l'ajustement est limité aux boutons de stepper uniquement.
5. Jetons de Marque et de Surface : Jetons de palette pour la couleur de fond de la surface, les bordures actives, les états désactivés, les anneaux de focus et les glyphes d'icônes.

Sorties

1. Spécification du Composant Stepper : Anatomie visuelle définissant le bouton de décrémentation, l'affichage/saisie numérique, le bouton d'incrémentation et l'étiquette d'unité.
2. Matrice des Limites et des États : Traitements visuels pour les états Par défaut, Au survol, Au focus, Désactivé (aux limites Min/Max), Chargement et Erreur.
3. Spécification de Disposition Spatiale Réactive : Dimensions des cibles tactiles (minimum 44x44 px pour le tactile, 24x24 px pour le bureau compact), espacement et métriques de police pour différents points de rupture.
4. Accessibilité et Mappage Clavier : Attributs ARIA (role="spinbutton", aria-valuenow, aria-valuemin, aria-valuemax), configurations de régions live et spécifications des gestionnaires de raccourcis clavier.

---

Flux de Travail

1. Sélectionner la Variante de Stepper

Choisissez la variante structurelle appropriée en fonction du contexte et de l'intention d'interaction :

• Stepper Horizontal Standard (Segmenté en 3 Parties) : Bouton de décrémentation (-) à gauche, champ de saisie textuelle central, bouton d'incrémentation (+) à droite. Idéal pour les PDP e-commerce, les articles du panier et les compteurs de sièges SaaS.
• Stepper Compact Intégré (Flèches Empilées) : Champ de saisie textuelle avec des micro-boutons empilés verticalement sur le côté droit. Idéal pour les tableaux de données denses sur bureau, les barres d'outils et les panneaux latéraux de paramètres SaaS.
• Saisie avec Unité Fixe : Champ de texte avec une étiquette d'unité de préfixe/suffixe fixe (par exemple, $, EUR, px, %) et des boutons de stepper optionnels. Idéal pour les saisies financières et les formulaires de configuration système.
• Compteur à Bouton Autonome : Pilule entièrement cliquable où le tapotement ouvre un modal/popover intégré ou se transforme en stepper actif lors de la mise au focus.

2. Établir l'Anatomie Visuelle et les Règles de Cible Tactile

Structurez le composant à l'aide de paramètres géométriques clairs :

• Dimensions des Cibles Tactiles : Assurez-vous que tous les boutons interactifs d'incrémentation/décrémentation présentent une cible de hit minimale de 44x44 px sur les interfaces mobiles/tactiles (WCAG 2.5.5 / 2.5.8). Sur les interfaces compactes de bureau uniquement, maintenez au moins 24x24 px avec un espacement de hit adéquat.
• Dimensionnement du Champ de Saisie : Définissez la largeur dynamiquement à l'aide d'unités CSS ch basées sur la longueur maximale de chiffres attendue (par exemple, width: calc(3ch + 2rem) pour des quantités à 2 chiffres).
• Typographie et Alignement : Centrez la valeur numérique dans le champ de saisie. Utilisez des chiffres tabulaires monospacés (font-variant-numeric: tabular-nums;) pour éviter les décalages de mise en page lors des transitions rapides de valeurs.
• Regroupement Visuel : Encapsulez les boutons et la saisie dans un conteneur à bordure partagée ou un pilier segmenté contigu pour signaler une fonctionnalité unifiée.

3. Définir les Comportements aux Limites et les États Désactivés

Communiquez clairement les limites minimales et maximales pour éviter la frustration de l'utilisateur :

• À la Limite Minimale (value <= min) :
  • Désactivez le bouton de décrémentation (attribut disabled et aria-disabled="true").
  • Appliquez un style désactivé à faible contraste (par exemple, opacity: 0.4; cursor: not-allowed;).
  • Si min === 1 dans un contexte de panier e-commerce, transformez éventuellement le bouton de décrémentation en icône "Corbeille / Supprimer" lorsque la valeur est 1 pour permettre la suppression de l'article.
• À la Limite Maximale (value >= max) :
  • Désactivez le bouton d'incrémentation (attribut disabled et aria-disabled="true").
  • Fournissez un texte d'aide intégré (par exemple, "Maximum 10 articles par commande") ou une info-bulle subtile si l'utilisateur tente d'incrémenter davantage.
• Validation de la Saisie Directe :
  • Lors du blur de la saisie, verrouillez automatiquement les entrées tapées hors limites à la limite valide la plus proche (par exemple, taper 99 dans un champ max-10 se verrouille à 10).
  • Si le pas d'incrémentation n'est pas un entier (par exemple, step="0.5"), arrondissez les valeurs tapées au pas d'incrémentation valide le plus proche lors du blur.

4. Implémenter la Navigation Clavier et le Retour Tactile

Assurez un contrôle fluide sur tous les périphériques d'entrée :

• Raccourcis Clavier :
  • FlècheHaute / FlècheDroite : Incrémente la valeur de step.
  • FlècheBasse / FlècheGauche : Décrémente la valeur de step.
  • PageSuivante : Incrémente la valeur de step * 10 (ou un delta de pas plus grand).
  • PagePrécédente : Décrémente la valeur de step * 10.
  • Début : Définit la valeur à min (si défini).
  • Fin : Définit la valeur à max (si défini).
• Répétition Automatique par Maintien Enfoncé : Lorsque l'utilisateur maintient enfoncé un bouton d'incrémentation/décrémentation (via le pointeur ou le clavier), lancez la répétition automatique de la valeur après un délai initial de 500 ms, en cycle tous les 100 ms.
• Clavier Tactile / Mobile : Définissez inputmode="numeric" ou inputmode="decimal" et pattern="[0-9]*" sur l'élément <input> pour déclencher le clavier numérique sur les appareils mobiles sans forcer l'affichage des flèches natives du navigateur standard.

5. Configurer l'Accessibilité et la Sémantique pour les Lecteurs d'Écran

Offrez une expérience conforme aux normes WCAG 2.1 / 2.2 AA :

• Options HTML Sémantiques :
  • Option A (Saisie Native avec Boutons de Stepper) : Utilisez <input type="text" inputmode="numeric"> associé à un <label> explicite. Accentuez les boutons de décrémentation/incrémentation avec <button type="button" aria-label="Diminuer la quantité"> et aria-controls="input-id".
  • Option B (Rôle ARIA Spinbutton) : Appliquez role="spinbutton", aria-valuenow="3", aria-valuemin="1", aria-valuemax="10", aria-valuetext="3 sièges" et aria-label="Sélectionner le nombre de sièges" au conteneur ou à la saisie.
• Gestion des Anneaux de Focus : Maintenez des anneaux de focus visibles et à contraste élevé (outline: 2px solid var(--focus-ring); outline-offset: 2px;) autour des boutons actifs et des champs de texte. Les anneaux de focus ne doivent jamais être masqués ou rognés par les limites du conteneur parent.
• Annonces des Régions Live : Utilisez aria-live="polite" ou mettez à jour aria-valuenow dynamiquement afin que les technologies d'assistance annoncent immédiatement les changements de valeur lors de l'appui sur un bouton.

---

Règles de Décision

Matrice des Modèles de Composants

Cas d'Utilisation	Variante Recommandée	Placement des Boutons	Stratégie Min/Max
PDP E-Commerce	Horizontal Standard	De chaque côté (- à gauche, + à droite)	Min = 1 (ou Corbeille à 1), Max = Limite de stock
Article de Panier	Horizontal Compact / Hybride Corbeille	De chaque côté (-/Corbeille à gauche, + à droite)	Min = 0 (supprime l'article), Max = Stock disponible
Sièges Facturation SaaS	Horizontal avec Suffixe d'Unité	De chaque côté (- à gauche, + à droite)	Min = Niveau de plan minimum, Max = Plafond du compte
Tableau de Données Bureau	Stepper Intégré Empilé	Empilé sur le côté droit (▲ en haut, ▼ en bas)	Min/Max verrouillés lors du blur
Montant Financier	Saisie avec Unité Fixe ($)	De chaque côté optionnel ou manuel uniquement	Min = 0, Max = Limite avec message de validation

Règle de Saisie Directe vs. Boutons Uniquement

• Autoriser la Saisie Directe (Par défaut) : Pour les quantités > 5 ou lorsque les utilisateurs peuvent saisir de grands nombres directement (par exemple, commander 50 articles ou définir un budget de 500 €).
• Restreindre aux Boutons Uniquement (readonly sur la saisie) : Uniquement lorsque la plage de valeurs est extrêmement petite (par exemple, 1 à 5) et que la saisie de texte libre introduit une surcharge de validation inutile sur les petits appareils tactiles.

---

Contraintes

• Accessibilité (WCAG 2.1 / 2.2 AA) :
  • Les boutons doivent fournir un attribut aria-label explicite décrivant l'action (par exemple, "Diminuer la quantité d'articles").
  • Les boutons d'incrémentation et de décrémentation doivent maintenir une cible tactile minimale de 44x44 px sur les viewports tactiles (SC 2.5.8).
  • Les indicateurs de focus actifs doivent satisfaire WCAG 2.4.11 (Focus non masqué) et SC 2.4.13 (Apparence du focus).
• Formatage des Nombres :
  • Ne laissez jamais de valeurs vides ou NaN dans la saisie lors du blur. Revenez à min ou à la valeur valide précédente.
  • Les nombres doivent être rendus à l'aide de font-variant-numeric: tabular-nums; pour éviter les remaniements de mise en page lors des incrémentations.
• Claviers Logiciels Mobiles :
  • Définissez toujours inputmode="numeric" (ou decimal) pour ouvrir le pavé numérique standard sur iOS/Android. Évitez le style par défaut des flèches <input type="number"> natif en désactivant les flèches natives en CSS (::-webkit-inner-spin-button).

---

Modèles d'Échec Courants

• Cibles Tactiles Non Standard Trop Petites : Utiliser des boutons chevron de 18x18 px sur mobile, entraînant des erreurs de tapotement et de la frustration.
• Se Fier au <input type="number"> Natif du Navigateur : Permettre aux flèches par défaut du navigateur de s'afficher de manière incohérente, de chevaucher le remplissage de texte personnalisé ou de déclencher des ajustements de défilement involontaires.
• Absence d'Indications de Désactivation aux Limites : Laisser le bouton de décrémentation visuellement actif lorsque value === min, incitant les utilisateurs à cliquer sans retour.
• Saisie Libre Non Verrouillée : Permettre aux utilisateurs de saisir des valeurs invalides (par exemple, -5 ou 999999) sans verrouillage ni retour d'erreur lors du blur.
• Absence de Prise en Charge du Clavier : Concevoir des boutons <div> personnalisés qui ne peuvent pas recevoir le focus via Tab et ne gèrent pas les événements FlècheHaute/FlècheBasse.

---

Critères de Validation

• Les boutons de décrémentation et d'incrémentation respectent la cible tactile minimale de 44x44 px sur les viewports tactiles.
• La typographie tabulaire monospacée (tabular-nums) est utilisée pour éviter les à-coups de mise en page lors des mises à jour.
• Aux limites minimale et maximale, les boutons respectifs passent à l'état désactivé (aria-disabled="true").
• La saisie mobile utilise inputmode="numeric" ou inputmode="decimal".
• Le composant gère correctement les touches FlècheHaute, FlècheBasse, PageSuivante, PagePrécédente, Début et Fin.
• Les étiquettes programmatiques (aria-label ou <label>) et les rôles ARIA (role="spinbutton" ou boutons aria-controls explicites) sont configurés.
• Les valeurs tapées hors limites se verrouillent automatiquement ou déclenchent des messages d'erreur de validation lors du blur.
• Les indicateurs de focus à contraste élevé sont visibles et non obstrués.