Ergonomie mobile et bureau : React Native et WinForms

import { useState } from 'react';
import { Pressable, StyleSheet, Text, TextInput, View } from 'react-native';

export function RetourMateriel({ onEnregistrer }: { onEnregistrer: (numero: string) => void }) {
  const [numero, setNumero] = useState('');

  return (
    <View style={styles.ecran}>
      <Text style={styles.titre} accessibilityRole="header">
        Enregistrer un retour
      </Text>
      <Text style={styles.libelle}>Numéro d'inventaire</Text>
      <TextInput
        style={styles.champ}
        value={numero}
        onChangeText={setNumero}
        accessibilityLabel="Numéro d'inventaire"
        accessibilityHint="Le numéro est sur l'étiquette du matériel, par exemple PC-07"
        autoCapitalize="characters"
        autoCorrect={false}
        returnKeyType="done"
        onSubmitEditing={() => onEnregistrer(numero)}
      />
      <Pressable
        style={({ pressed }) => [styles.bouton, pressed && styles.boutonEnfonce]}
        accessibilityRole="button"
        onPress={() => onEnregistrer(numero)}
      >
        <Text style={styles.texteBouton}>Enregistrer le retour</Text>
      </Pressable>
    </View>
  );
}

const styles = StyleSheet.create({
  ecran: { flex: 1, padding: 16, gap: 8 },
  titre: { fontSize: 24, fontWeight: '700' },
  libelle: { fontSize: 16 },
  champ: { minHeight: 48, borderWidth: 1, borderColor: '#6b7280', borderRadius: 6, paddingHorizontal: 12, fontSize: 18 },
  bouton: { minHeight: 48, borderRadius: 6, backgroundColor: '#1d6b43', alignItems: 'center', justifyContent: 'center' },
  boutonEnfonce: { opacity: 0.8 },
  texteBouton: { color: '#ffffff', fontSize: 18, fontWeight: '700' },
});

using System.ComponentModel;
using System.Text.RegularExpressions;

public partial class FormRetour : Form
{
    public FormRetour()
    {
        InitializeComponent();

        // L'ordre de tabulation suit l'ordre de lecture, de haut en bas.
        txtNumero.TabIndex = 0;
        cboEtat.TabIndex = 1;
        btnEnregistrer.TabIndex = 2;
        btnAnnuler.TabIndex = 3;

        AcceptButton = btnEnregistrer;              // Entrée enregistre
        CancelButton = btnAnnuler;                  // Échap ferme la fenêtre
        btnAnnuler.CausesValidation = false;        // Annuler ne déclenche pas la validation
        btnEnregistrer.Text = "&Enregistrer le retour";   // raccourci Alt+E

        // Le bouton n'affiche qu'une icône : il lui faut un nom pour les lecteurs d'écran.
        btnScanner.AccessibleName = "Scanner l'étiquette";

        // Une liste fermée plutôt qu'une saisie libre, avec la valeur la plus probable.
        cboEtat.DropDownStyle = ComboBoxStyle.DropDownList;
        cboEtat.Items.AddRange(new object[] { "Bon état", "Abîmé", "À réparer" });
        cboEtat.SelectedIndex = 0;

        txtNumero.Validating += TxtNumero_Validating;
    }

    private void TxtNumero_Validating(object? sender, CancelEventArgs e)
    {
        string numero = txtNumero.Text.Trim().ToUpperInvariant();
        string message = "";
        if (numero.Length == 0)
        {
            message = "Indiquez le numéro d'inventaire, par exemple PC-07.";
        }
        else if (!Regex.IsMatch(numero, @"^[A-Z]{2}-\d{2,3}$"))
        {
            message = "Écrivez le numéro comme sur l'étiquette : deux lettres, un tiret, des chiffres (PC-07).";
        }
        // L'icône de l'ErrorProvider ne montre son message qu'au survol :
        // on l'écrit aussi sous le champ, dans un Label visible par tous.
        errorProvider.SetError(txtNumero, message);
        lblErreurNumero.Text = message;
        txtNumero.AccessibleDescription = message;  // lu par le lecteur d'écran au retour sur le champ
        // e.Cancel reste à false : on signale l'erreur sans bloquer le focus dans le champ.
    }
}