JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 199
  • Score
    100M100P100Q99486F
  • License MIT

Composant React réutilisable pour les personnaliser l'accessibilité avec style Material-UI

Package Exports

  • @dolu13/react-accessibility-config
  • @dolu13/react-accessibility-config/styles

Readme

React Accessibility Config

Une bibliothèque React pour gérer facilement les paramètres d'accessibilité dans vos applications web.

🚀 Fonctionnalités

  • Configuration des contrastes (défaut, renforcé, inversé)
  • Adaptation de la police pour la dyslexie (OpenDyslexic)
  • Ajustement de l'interlignage
  • Personnalisation de l'alignement
  • Interface utilisateur intuitive et accessible
  • Thème personnalisable
  • Support complet des tests
  • Application automatique des styles d'accessibilité

📦 Installation

npm install @dolu13/react-accessibility-config

🎯 Utilisation

import React, { useState } from 'react';
import { AccessibilityConfig } from '@dolu13/react-accessibility-config';
import '@dolu13/react-accessibility-config/styles';

function App() {
  const [isOpen, setIsOpen] = useState(false);
  const [settings, setSettings] = useState({
    contrast: 'default',
    font: 'default',
    lineHeight: 'default',
    alignment: 'left'
  });

  const handleSettingsChange = (newSettings) => {
    console.log('Nouveaux paramètres:', newSettings);
    setSettings(newSettings);
  };

  return (
    <div>
      <h1>Mon Application</h1>
      <p>Ceci est un exemple de texte pour tester les paramètres d'accessibilité.</p>
      <a href="#">Ceci est un lien</a>
      
      <AccessibilityConfig
        isOpen={isOpen}
        onToggle={() => setIsOpen(!isOpen)}
        position="top-right"
        theme="default"
        defaultSettings={settings}
        onSettingsChange={handleSettingsChange}
      />
    </div>
  );
}

⚙️ Props

Prop Type Par défaut Description
isOpen boolean false État d'ouverture du panneau de configuration
onToggle () => void Requis Fonction appelée lors du clic sur le bouton
className string '' Classe CSS personnalisée
position 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' 'top-right' Position du bouton de configuration
theme 'default' | 'dark' | 'light' 'default' Thème de l'interface
customStyles Record<string, React.CSSProperties> {} Styles personnalisés
defaultSettings AccessibilitySettings {} Paramètres par défaut
onSettingsChange (settings: AccessibilitySettings) => void () => {} Callback lors du changement des paramètres

📋 Types

interface AccessibilitySettings {
  contrast: 'default' | 'high' | 'inverted';
  font: 'default' | 'dyslexic';
  lineHeight: 'default' | 'increased';
  alignment: 'left' | 'right';
}

🎨 Personnalisation avancée

import React, { useState } from 'react';
import { AccessibilityConfig } from '@dolu13/react-accessibility-config';
import '@dolu13/react-accessibility-config/styles';

function App() {
  const [isOpen, setIsOpen] = useState(false);
  const [settings, setSettings] = useState({
    contrast: 'default',
    font: 'default',
    lineHeight: 'default',
    alignment: 'left'
  });

  const handleSettingsChange = (newSettings) => {
    setSettings(newSettings);
    // Sauvegarder les paramètres dans le localStorage
    localStorage.setItem('accessibilitySettings', JSON.stringify(newSettings));
  };

  return (
    <div>
      <AccessibilityConfig
        isOpen={isOpen}
        onToggle={() => setIsOpen(!isOpen)}
        position="bottom-right"
        theme="dark"
        defaultSettings={settings}
        onSettingsChange={handleSettingsChange}
        customStyles={{
          fab: {
            backgroundColor: '#1976d2'
          }
        }}
      />
    </div>
  );
}

🧪 Tests

# Exécuter les tests
npm test

# Exécuter les tests avec couverture
npm run test:coverage

🛠️ Développement

# Installation des dépendances
npm install

# Démarrage du serveur de développement
npm run dev

# Construction du projet
npm run build

📝 Licence

MIT

👥 Auteur

Demol Ludovic ldemol@norsys.fr

🔗 Liens