@dolu13/react-accessibility-config
Version:
Composant React réutilisable pour les personnaliser l'accessibilité avec style Material-UI
102 lines (101 loc) • 6.83 kB
JavaScript
import React, { useState } from 'react';
import { useAccessibilitySettings } from '../../hooks/useAccessibilitySettings';
import { materialStyles } from './styles';
import { useAccessibilityStyles } from '../../hooks/useAccessibilityStyles';
const AccessibilityConfig = ({ isOpen = false, onToggle, position = 'top-right', customStyles = {}, defaultSettings = {}, onSettingsChange = () => { } }) => {
const { settings, updateSettings, resetSettings } = useAccessibilitySettings(defaultSettings);
const [hoveredClose, setHoveredClose] = useState(false);
useAccessibilityStyles(settings);
const handleSettingChange = (category, value) => {
updateSettings(category, value);
onSettingsChange(Object.assign(Object.assign({}, settings), { [category]: value }));
};
const handleReset = () => {
resetSettings();
onSettingsChange(defaultSettings);
};
// Fonction utilitaire pour la position du lien texte
const getTextPosition = (position) => {
const positions = {
'top-right': { top: '16px', right: '16px' },
'top-left': { top: '16px', left: '16px' },
'bottom-right': { bottom: '16px', right: '16px' },
'bottom-left': { bottom: '16px', left: '16px' }
};
return positions[position] || positions['top-right'];
};
// Configuration des options
const optionsConfig = {
contrast: {
title: 'Contrastes',
options: [
{ value: 'default', label: 'Défaut' },
{ value: 'high', label: 'Renforcer' },
{ value: 'inverted', label: 'Inverser' }
]
},
font: {
title: 'Police (dyslexie)',
options: [
{ value: 'default', label: 'Défaut' },
{ value: 'dyslexic', label: 'Adapter' }
]
},
lineHeight: {
title: 'Interlignage',
options: [
{ value: 'default', label: 'Défaut' },
{ value: 'increased', label: 'Augmenter' }
]
},
alignment: {
title: 'Alignement',
options: [
{ value: 'left', label: 'Gauche' },
{ value: 'right', label: 'Droit' }
]
}
};
const styles = Object.assign(Object.assign(Object.assign({}, materialStyles), customStyles), { textLink: Object.assign(Object.assign({}, getTextPosition(position)), customStyles.link) });
return (React.createElement(React.Fragment, null,
React.createElement("a", { href: "#", style: styles.textLink, onClick: (e) => {
e.preventDefault();
onToggle();
}, "aria-label": "Param\u00E8tres d'accessibilit\u00E9", "aria-expanded": isOpen, "aria-controls": "accessibility-dialog" }, "Param\u00E8tres d'accessibilit\u00E9"),
isOpen && (React.createElement("div", { style: styles.overlay, onClick: (e) => e.target === e.currentTarget && onToggle() },
React.createElement("div", { style: styles.dialog, role: "dialog", "aria-labelledby": "accessibility-dialog-title" },
React.createElement("div", { style: styles.dialogTitle },
React.createElement("h2", { id: "accessibility-dialog-title", style: styles.titleContent },
React.createElement("span", { style: { fontSize: '24px' } }, "\u267F"),
"Param\u00E8tres d'accessibilit\u00E9"),
React.createElement("button", { style: Object.assign(Object.assign({}, styles.closeButton), { backgroundColor: hoveredClose ? 'rgba(255,255,255,0.1)' : 'transparent' }), onMouseEnter: () => setHoveredClose(true), onMouseLeave: () => setHoveredClose(false), onClick: onToggle, "aria-label": "Fermer les param\u00E8tres" }, "\u2715")),
React.createElement("div", { style: styles.dialogContent },
React.createElement("div", { style: styles.grid }, Object.entries(optionsConfig).map(([key, config]) => (React.createElement("div", { key: key, style: styles.paper },
React.createElement("label", { style: styles.formLabel }, config.title),
React.createElement("div", { style: styles.radioGroup, role: "radiogroup", "aria-labelledby": `${key}-label` }, config.options.map((option) => (React.createElement("label", { key: option.value, style: Object.assign(Object.assign({}, styles.radioOption), { backgroundColor: settings[key] === option.value
? 'rgba(25, 118, 210, 0.04)'
: 'transparent' }), onMouseEnter: (e) => {
e.currentTarget.style.backgroundColor = 'rgba(0, 0, 0, 0.04)';
}, onMouseLeave: (e) => {
e.currentTarget.style.backgroundColor =
settings[key] === option.value
? 'rgba(25, 118, 210, 0.04)'
: 'transparent';
} },
React.createElement("input", { type: "radio", name: key, value: option.value, checked: settings[key] === option.value, onChange: (e) => handleSettingChange(key, e.target.value), style: styles.radioInput }),
React.createElement("span", { style: Object.assign(Object.assign({}, styles.radioLabel), { fontWeight: settings[key] === option.value ? 'bold' : 'normal' }) }, option.label))))))))),
React.createElement("hr", { style: styles.divider }),
React.createElement("p", { style: styles.infoText }, "Les param\u00E8tres sont automatiquement sauvegard\u00E9s et appliqu\u00E9s \u00E0 l'ensemble de l'application.")),
React.createElement("div", { style: styles.dialogActions },
React.createElement("button", { style: Object.assign(Object.assign({}, styles.button), styles.outlinedButton), onClick: handleReset, onMouseEnter: (e) => {
e.target.style.backgroundColor = 'rgba(25, 118, 210, 0.04)';
}, onMouseLeave: (e) => {
e.target.style.backgroundColor = 'transparent';
} }, "R\u00E9initialiser"),
React.createElement("button", { style: Object.assign(Object.assign({}, styles.button), styles.containedButton), onClick: onToggle, onMouseEnter: (e) => {
e.target.style.backgroundColor = '#1565c0';
}, onMouseLeave: (e) => {
e.target.style.backgroundColor = '#1976d2';
} }, "Fermer")))))));
};
export default AccessibilityConfig;