PhilippeVay
commented
5 years ago Parmi les features et contraintes :
- Au moins styler :
- input type text, checkbox, radio
- select
- textarea
- button, input type button/submit (c'est une autre problématique ça)
- label et input peuvent être imbriqués ou accolés. Préférer imbriqué mais prévoir aussi l'autre cas quand un client a cette contrainte (si possible)
- pouvoir modifier KNACSS rapidement avec sa propre flèche de select, etc (placer ces configs en tête de fichier, pas en plein milieu d'une règle et s'il faut modifier plus d'un paramètre/visuel l'indiquer)
- styler les états
:hover,:focus(et les 2 à la fois) - styler
:disabled(qui doit visuellement avoir la priorité sur:hover).- éventuellement prévoir le cas où c'est fieldset qui porte l'attribut
disabled. C'est censé désactiver tous les champs et boutons de ce fieldset, sans avoir besoin d'ajouter l'attribut sur chaque élément…
- éventuellement prévoir le cas où c'est fieldset qui porte l'attribut
- prévoir l'état erreur (bordure rouge, message d'erreur correctement associé, éventuellement label en rouge)
- prévoir le message d'aide a priori sous le champ, (accessibilité) lié à l'étiquette Guide RGAA3 de l'intégrateur
- éventuellement prévoir "l'état info" (avec un bouton
(?)à droite) - IE11 et les SVG
- Safari est l'autre navigateur à bien tester (cf. #298 pas résolu)
- accessibilité : le contraste des éléments d'interface / UI doit être d'au moins 3:1 (rond des radio, coche, flèche des select, bordure des input ➡️ tout ce qui est graphique), sauf quand c'est désactivé (disabled)
- accessibilité : tester en Mode de Contraste Élevé (Windows et il y a maintenant un équivalent sous OS X)
- accessibilité : pour la démo, associer label et champ via les attributs
foretid(et éventuellement ARIA pour certains états)
raphaelgoetter
Il y a des bugs Safari notamment.
S'inspirer de ça ? https://codepen.io/oliviale/full/mgWjpq