Technical Tutorials

Créer un système de design robuste n'est plus un luxe mais une nécessité pour les applications web modernes. Il comble le fossé entre le design et l'ingénierie, garantissant cohérence, évolutivité et maintenabilité. Cependant, intégrer un système de design avec des frameworks modernes axés sur les utilitaires comme Tailwind CSS et des normes d'accessibilité rigoureuses peut être complexe. Ce guide vous accompagne dans la construction d'un système de design de base en utilisant Storybook, Tailwind CSS et des tests d'accessibilité automatisés.

Pourquoi cette stack ?

Storybook fournit un environnement isolé pour le développement de composants d'interface utilisateur, vous permettant de construire, tester et documenter les composants indépendamment de votre application principale. Tailwind CSS offre un moyen rapide de styliser ces composants sans changer de contexte entre les fichiers JavaScript et CSS. Enfin, les tests d'accessibilité automatisés garantissent que vos composants sont inclusifs dès le premier jour, détectant les problèmes tels que les étiquettes manquantes ou un contraste de couleurs insuffisant avant qu'ils n'atteignent la production.

Configuration et installation du projet

Commencez par initialiser un nouveau projet Storybook. Si vous utilisez une implémentation spécifique à un framework (comme React ou Vue), le processus d'installation varie légèrement, mais les principes de base restent les mêmes. Une fois installé, vous devez configurer Tailwind CSS dans l'en-tête de prévisualisation de Storybook.

Créez un fichier nommé preview-head.html dans le répertoire de configuration de votre Storybook. Ce fichier vous permet d'injecter des styles ou des scripts globaux dans chaque prévisualisation d'histoire. Ajoutez votre feuille de style Tailwind CSS compilée ici.

<link href="/path/to/your/dist/tailwind.css" rel="stylesheet">

Alternativement, si vous utilisez un outil de build comme Vite ou Webpack, vous pouvez importer Tailwind dans votre fichier preview.js ou preview.ts :

import './styles.css';

export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
};

Construction de composants accessibles

Créons un simple composant Bouton. La clé de l'accessibilité réside dans le HTML sémantique. Assurez-vous que vos éléments de bouton sont de véritables balises <button>, et non des <div> ou <span> avec des écouteurs d'événements. Utilisez les classes Tailwind pour gérer les états tels que le focus et le survol.

import React from 'react';

export const Button = ({ variant = 'primary', children, ...props }) => {
  const baseStyles = "px-4 py-2 rounded font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2";
  const variants = {
    primary: "bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500",
    secondary: "bg-gray-200 text-gray-800 hover:bg-gray-300 focus:ring-gray-500",
  };

  return (
    <button className={`${baseStyles} ${variants[variant]}`} {...props}>
      {children}
    </button>
  );
};

Remarquez la classe focus:ring-2. Elle est cruciale pour les utilisateurs du clavier qui naviguent à l'aide de la touche Tab. Sans indicateur de focus visible, l'expérience utilisateur est considérablement dégradée.

Tests d'accessibilité automatisés

Pour automatiser les vérifications d'accessibilité, nous utiliserons @storybook/addon-a11y combiné avec axe-core. Cet addon exécute des vérifications de conformité WCAG 2.1 AA sur chaque histoire.

Installez l'addon à l'aide de votre gestionnaire de paquets :

npm install -D @storybook/addon-a11y

Ajoutez-le à votre fichier de configuration main.js ou main.ts :

module.exports = {
  stories: ["../src/**/*.stories.@(js|jsx|ts|tsx)"],
  addons: [
    "@storybook/addon-a11y",
    // autres addons...
  ],
};

Une fois configuré, Storybook injectera automatiquement un panneau d'accessibilité dans la prévisualisation. Ce panneau mettra en évidence toute violation trouvée lors du rendu de votre composant. Par exemple, si vous oubliez de fournir un aria-label sur un bouton d'icône, axe-core le signalera immédiatement.

Intégration avec Tailwind Typography

Bien que Tailwind gère la mise en page et les styles utilitaires, le plugin @tailwindcss/typography est essentiel pour les composants riches en contenu tels que les articles ou la documentation au sein de votre système de design. Il fournit un ensemble de classes de prose qui stylisent automatiquement le contenu HTML sans nécessiter de classes utilitaires individuelles sur chaque balise.

Installez le plugin :

npm install -D @tailwindcss/typography

Ensuite, activez-le dans votre tailwind.config.js :

module.exports = {
  // ...
  plugins: [
    require('@tailwindcss/typography'),
  ],
}

Maintenant, vous pouvez envelopper n'importe quel bloc de contenu dans <div className="prose"> pour appliquer instantanément des styles de typographie cohérents et accessibles.

Conclusion

Construire un système de design à partir de zéro est une entreprise importante, mais tirer parti de Storybook, Tailwind CSS et des tests d'accessibilité automatisés fournit une base solide. Cette stack encourage la réutilisabilité des composants, impose un style cohérent et privilégie l'inclusivité. En intégrant ces outils tôt dans votre flux de travail de développement, vous gagnez du temps à long terme et créez un produit plus maintenable et accessible. Rappelez-vous, l'accessibilité n'est pas une pensée après coup ; c'est une partie fondamentale d'une bonne ingénierie.