@dolu13/react-accessibility-config/dist/hooks/useAccessibilityStyles.js

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

import { useEffect } from 'react';
export const useAccessibilityStyles = (settings) => {
    useEffect(() => {
        // Nettoyer les anciennes classes d'accessibilité avant d'en ajouter de nouvelles
        document.body.classList.forEach(className => {
            if (className.startsWith('accessibility-')) {
                document.body.classList.remove(className);
            }
        });
        // Ajouter les classes en fonction des paramètres actuels
        if (settings.contrast && settings.contrast !== 'default') {
            document.body.classList.add(`accessibility-contrast-${settings.contrast}`);
        }
        if (settings.font && settings.font !== 'default') {
            document.body.classList.add(`accessibility-font-${settings.font}`);
        }
        if (settings.lineHeight && settings.lineHeight !== 'default') {
            document.body.classList.add(`accessibility-lineHeight-${settings.lineHeight}`);
        }
        if (settings.alignment && settings.alignment !== 'left') {
            // Gère l'alignement : assurez-vous que votre CSS a les classes correspondantes si 'right' est une option
            document.body.classList.add(`accessibility-alignment-${settings.alignment}`);
        }
        // Fonction de nettoyage pour retirer les classes lorsque les paramètres changent ou que le composant est démonté
        return () => {
            document.body.classList.forEach(className => {
                if (className.startsWith('accessibility-')) {
                    document.body.classList.remove(className);
                }
            });
        };
    }, [settings]); // Re-run effect when settings change
};