@intside/accessibility 1.0.0

package/react/AccessibilityFab.tsx

@@ -0,0 +1,99 @@
+'use client';
+
+import React, { useEffect, useState } from 'react';
+import { AccessibilityModal } from './AccessibilityModal';
+import { ensureA11yStyles, loadA11y, applyA11yClasses } from './engine';
+
+export type FabPosition = 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right';
+
+export interface AccessibilityFabProps {
+  /** Coin d'ancrage du bouton flottant (par défaut « bottom-left »). */
+  position?: FabPosition;
+  /** Texte du bouton / libellé accessible (par défaut « Accessibilité »). */
+  label?: string;
+  /** Masque le libellé : bouton rond, icône seule. Activé par défaut. Passez `hideLabel={false}` pour la pilule avec texte. */
+  hideLabel?: boolean;
+  /** Décalage par rapport aux bords, en px (par défaut 22). */
+  offset?: number;
+  /** Classe CSS optionnelle : si fournie, remplace entièrement le style par défaut. */
+  className?: string;
+  /** Style inline additionnel (fusionné avec le style par défaut). */
+  style?: React.CSSProperties;
+}
+
+const POS: Record<FabPosition, (o: number) => React.CSSProperties> = {
+  'bottom-left': (o) => ({ bottom: o, left: o }),
+  'bottom-right': (o) => ({ bottom: o, right: o }),
+  'top-left': (o) => ({ top: o, left: o }),
+  'top-right': (o) => ({ top: o, right: o }),
+};
+
+/**
+ * Bouton flottant (FAB) qui ouvre le module d'accessibilité.
+ * Alternative au déclencheur inline `AccessibilityButton` (lien dans une top-bar).
+ * Par défaut : pastille ronde (icône seule) ancrée en bas à gauche, couleur
+ * `--a11y-accent`, avec un léger agrandissement au survol.
+ */
+export function AccessibilityFab({
+  position = 'bottom-left',
+  label = 'Accessibilité',
+  hideLabel = true,
+  offset = 22,
+  className,
+  style,
+}: AccessibilityFabProps) {
+  const [open, setOpen] = useState(false);
+  const [hover, setHover] = useState(false);
+
+  useEffect(() => {
+    ensureA11yStyles();
+    applyA11yClasses(loadA11y());
+  }, []);
+
+  const defaultStyle: React.CSSProperties = {
+    position: 'fixed',
+    zIndex: 1099,
+    ...POS[position](offset),
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 8,
+    height: 48,
+    padding: hideLabel ? 0 : '0 18px',
+    width: hideLabel ? 48 : undefined,
+    border: 'none',
+    borderRadius: 99,
+    background: 'var(--a11y-accent, #006828)',
+    color: '#fff',
+    fontSize: 14,
+    fontWeight: 700,
+    cursor: 'pointer',
+    boxShadow: '0 8px 24px -6px rgba(10,25,48,.45)',
+    transition: 'transform .15s ease, box-shadow .15s ease',
+    transform: hover ? 'scale(1.05)' : 'scale(1)',
+  };
+
+  return (
+    <>
+      <button
+        type="button"
+        onClick={() => setOpen(true)}
+        onMouseEnter={() => setHover(true)}
+        onMouseLeave={() => setHover(false)}
+        className={className}
+        aria-haspopup="dialog"
+        aria-label={hideLabel ? label : undefined}
+        style={className ? style : { ...defaultStyle, ...style }}
+      >
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" style={{ width: 32, height: 32 }}>
+          <circle cx="12" cy="5" r="1" />
+          <path d="m9 20 3-6 3 6" />
+          <path d="m6 8 6 2 6-2" />
+          <path d="M12 10v4" />
+        </svg>
+        {!hideLabel && <span>{label}</span>}
+      </button>
+      {open && <AccessibilityModal onClose={() => setOpen(false)} />}
+    </>
+  );
+}

package/react/AccessibilityModal.tsx

@@ -0,0 +1,328 @@
+'use client';
+
+import React, { useEffect, useRef, useState } from 'react';
+import {
+  ACC_STANDARDS,
+  ACC_PROFILES,
+  ACC_SETTINGS,
+  A11Y_TOKENS,
+  loadA11y,
+  saveA11y,
+  applyA11yClasses,
+  ensureA11yStyles,
+  type A11yState,
+  type A11yProfile,
+  type A11yStandard,
+  type A11ySettingItem,
+} from './engine';
+import { A11YIcon } from './icons';
+
+/* ---- Détection viewport étroit (< 600px) ---- */
+function useNarrow(maxWidth = 600) {
+  const [narrow, setNarrow] = useState(false);
+  useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${maxWidth}px)`);
+    const update = () => setNarrow(mql.matches);
+    update();
+    mql.addEventListener('change', update);
+    return () => mql.removeEventListener('change', update);
+  }, [maxWidth]);
+  return narrow;
+}
+
+/* ---- Toggle ---- */
+function Toggle({ value, onChange, id }: { value: boolean; onChange: (v: boolean) => void; id?: string }) {
+  return (
+    <button
+      role="switch"
+      aria-checked={value}
+      id={id}
+      onClick={() => onChange(!value)}
+      style={{
+        width: 44, height: 24, borderRadius: 12, border: 'none', cursor: 'pointer',
+        background: value ? 'var(--accent)' : 'var(--line-strong)',
+        position: 'relative', flexShrink: 0, transition: '.2s',
+      }}
+    >
+      <span
+        style={{
+          position: 'absolute', top: 3, left: value ? 23 : 3,
+          width: 18, height: 18, borderRadius: '50%',
+          background: '#fff', transition: 'left .18s',
+          boxShadow: '0 1px 3px rgba(0,0,0,.25)',
+        }}
+      />
+    </button>
+  );
+}
+
+/* ---- Standard card ---- */
+function StandardCard({ prof, onExpand, expanded, narrow }: { prof: A11yStandard; onExpand: (id: string | null) => void; expanded: string | null; narrow: boolean }) {
+  return (
+    <div style={{ border: '1px solid var(--line)', borderRadius: 'var(--r-md)', overflow: 'hidden', background: 'var(--surface)' }}>
+      <div style={{ display: 'flex', alignItems: 'center', gap: 14, padding: '16px 18px' }}>
+        <div style={{ width: 42, height: 42, borderRadius: 11, background: 'color-mix(in srgb, var(--navy) 10%, transparent)', color: 'var(--navy)', display: 'grid', placeItems: 'center', flexShrink: 0 }}>
+          <A11YIcon name={prof.icon} size={20} />
+        </div>
+        <div style={{ flex: 1, minWidth: 0 }}>
+          <div style={{ fontWeight: 700, fontSize: 15, color: 'var(--text)' }}>{prof.label}</div>
+          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 6, marginTop: 4, fontSize: 12.5, fontWeight: 700, color: 'var(--accent)', background: 'var(--accent-soft)', borderRadius: 99, padding: '3px 10px' }}>
+            <A11YIcon name="shieldChk" size={13} /> {prof.headline}
+          </div>
+        </div>
+        <button
+          onClick={() => onExpand(prof.id === expanded ? null : prof.id)}
+          style={{ background: 'var(--surface-2)', border: '1px solid var(--line)', borderRadius: 8, padding: '7px 12px', cursor: 'pointer', fontSize: 13, fontWeight: 600, color: 'var(--muted)', whiteSpace: 'nowrap', flexShrink: 0 }}
+        >
+          {narrow ? 'Voir' : prof.cta}
+        </button>
+      </div>
+      {expanded === prof.id && (
+        <div style={{ borderTop: '1px solid var(--line)', padding: '14px 18px', background: 'var(--surface-2)' }}>
+          <ul style={{ margin: 0, padding: 0, listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 8 }}>
+            {prof.details.map((d, i) => (
+              <li key={i} style={{ display: 'flex', gap: 10, fontSize: 14, color: 'var(--muted)', alignItems: 'flex-start' }}>
+                <span style={{ color: 'var(--accent)', marginTop: 2 }}><A11YIcon name="check" size={14} /></span>
+                {d}
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+    </div>
+  );
+}
+
+/* ---- Activatable profile card ---- */
+function ProfileCard({ prof, active, onToggle }: { prof: A11yProfile; active: boolean; onToggle: (id: string) => void }) {
+  const [open, setOpen] = useState(false);
+  return (
+    <div style={{ border: '1px solid ' + (active ? 'var(--accent)' : 'var(--line)'), borderRadius: 'var(--r-md)', overflow: 'hidden', background: active ? 'var(--accent-soft)' : 'var(--surface)', transition: '.2s' }}>
+      <div style={{ display: 'flex', alignItems: 'center', gap: 14, padding: '14px 16px' }}>
+        <div style={{ width: 40, height: 40, borderRadius: 10, background: active ? 'var(--accent)' : 'var(--surface-2)', color: active ? '#fff' : 'var(--muted)', display: 'grid', placeItems: 'center', flexShrink: 0, transition: '.2s' }}>
+          <A11YIcon name={prof.icon} size={18} />
+        </div>
+        <div style={{ flex: 1, minWidth: 0 }}>
+          <div style={{ fontWeight: 700, fontSize: 14.5, color: 'var(--text)' }}>{prof.label}</div>
+          <div style={{ fontSize: 13, color: 'var(--muted)', marginTop: 2, lineHeight: 1.4 }}>{prof.desc}</div>
+        </div>
+        <Toggle value={active} onChange={() => onToggle(prof.id)} id={'prof_' + prof.id} />
+      </div>
+      {active && (
+        <div style={{ borderTop: '1px dashed var(--line)', padding: '10px 16px', background: 'rgba(0,104,40,.04)' }}>
+          <button onClick={() => setOpen(!open)} style={{ background: 'none', border: 'none', cursor: 'pointer', fontSize: 13, fontWeight: 600, color: 'var(--accent)', padding: 0, display: 'flex', alignItems: 'center', gap: 6 }}>
+            {open ? 'Masquer' : 'Ce profil améliore…'} {open ? '▲' : '▼'}
+          </button>
+          {open && (
+            <ul style={{ margin: '8px 0 0', padding: 0, listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 6 }}>
+              {prof.improves.map((d, i) => (
+                <li key={i} style={{ display: 'flex', gap: 9, fontSize: 13, color: 'var(--muted)', alignItems: 'flex-start' }}>
+                  <span style={{ color: 'var(--accent)' }}><A11YIcon name="check" size={13} /></span>{d}
+                </li>
+              ))}
+            </ul>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+/* ---- Settings row ---- */
+function SettingRow({ item, value, onChange }: { item: A11ySettingItem; value: string | boolean | undefined; onChange: (id: string, v: string | boolean) => void }) {
+  const id = 's_' + item.id;
+  return (
+    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16, padding: '12px 0' }}>
+      <label htmlFor={id} style={{ fontSize: 14.5, fontWeight: 600, color: 'var(--text)', cursor: 'pointer' }}>{item.label}</label>
+      {item.type === 'toggle' && <Toggle value={!!value} onChange={(v) => onChange(item.id, v)} id={id} />}
+      {item.type === 'select' && (
+        <select
+          id={id}
+          value={(value as string) || (item.default as string)}
+          onChange={(e) => onChange(item.id, e.target.value)}
+          style={{ border: '1px solid var(--line)', borderRadius: 8, padding: '7px 12px', fontSize: 13.5, fontWeight: 600, color: 'var(--text)', background: 'var(--surface)', cursor: 'pointer', outline: 'none' }}
+        >
+          {item.options!.map((o) => <option key={o}>{o}</option>)}
+        </select>
+      )}
+    </div>
+  );
+}
+
+export interface AccessibilityModalProps {
+  onClose: () => void;
+}
+
+/* ================================================================
+   MODAL PRINCIPAL
+   ================================================================ */
+export function AccessibilityModal({ onClose }: AccessibilityModalProps) {
+  const [tab, setTab] = useState(0);
+  const [state, setState] = useState<A11yState>(() => loadA11y());
+  const [expandedStd, setExpandedStd] = useState<string | null>(null);
+  const [announce, setAnnounce] = useState('');
+  const narrow = useNarrow();
+  const firstRef = useRef<HTMLButtonElement>(null);
+
+  useEffect(() => {
+    ensureA11yStyles();
+    applyA11yClasses(loadA11y());
+  }, []);
+
+  useEffect(() => {
+    const t = setTimeout(() => firstRef.current?.focus(), 50);
+    return () => clearTimeout(t);
+  }, []);
+
+  useEffect(() => {
+    const fn = (e: KeyboardEvent) => e.key === 'Escape' && onClose();
+    document.addEventListener('keydown', fn);
+    return () => document.removeEventListener('keydown', fn);
+  }, [onClose]);
+
+  function updateState(next: A11yState) {
+    setState(next);
+    saveA11y(next);
+    applyA11yClasses(next);
+  }
+
+  function toggleProfile(id: string) {
+    const prof = ACC_PROFILES.find((p) => p.id === id);
+    const wasActive = !!state.profiles[id];
+    updateState({ ...state, profiles: { ...state.profiles, [id]: !wasActive } });
+    setAnnounce((!wasActive ? 'Profil activé : ' : 'Profil désactivé : ') + (prof ? prof.label : id));
+  }
+
+  function updateSetting(key: string, val: string | boolean) {
+    updateState({ ...state, settings: { ...state.settings, [key]: val } });
+    setAnnounce('Réglage mis à jour : ' + key);
+  }
+
+  function reset() {
+    updateState({ profiles: {}, settings: {} });
+    setAnnounce('Préférences réinitialisées. Les standards de base restent actifs.');
+  }
+
+  const activeCount =
+    Object.values(state.profiles).filter(Boolean).length +
+    Object.values(state.settings).filter((v) => v && v !== 'Normale').length;
+
+  return (
+    <div
+      style={{
+        ...(A11Y_TOKENS as unknown as React.CSSProperties),
+        position: 'fixed', inset: 0, zIndex: 1100,
+        display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 20,
+        background: 'rgba(10,25,48,.6)', backdropFilter: 'blur(8px)',
+      }}
+      onClick={(e) => e.target === e.currentTarget && onClose()}
+      role="dialog"
+      aria-modal="true"
+      aria-label="Module d'accessibilité"
+    >
+      <div aria-live="polite" aria-atomic="true" style={{ position: 'absolute', left: -9999, top: 'auto', width: 1, height: 1, overflow: 'hidden' }}>
+        {announce}
+      </div>
+
+      <div style={{ background: 'var(--bg-2)', borderRadius: 'var(--r-xl)', boxShadow: '0 40px 100px -30px rgba(10,25,48,.55)', width: 'min(680px, 100%)', maxHeight: '90vh', display: 'flex', flexDirection: 'column', border: '1px solid var(--line)' }}>
+        {/* Header */}
+        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '20px 24px 16px', borderBottom: '1px solid var(--line)', flexShrink: 0 }}>
+          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
+            <div style={{ width: 36, height: 36, borderRadius: 10, background: 'var(--accent-soft)', color: 'var(--accent)', display: 'grid', placeItems: 'center' }}>
+              <A11YIcon name="shieldChk" size={18} />
+            </div>
+            <div>
+              <h2 style={{ fontSize: 18, fontWeight: 800, letterSpacing: '-.01em', margin: 0, color: 'var(--text)' }}>Accessibilité numérique</h2>
+              {activeCount > 0 && (
+                <span style={{ fontSize: 12, fontWeight: 700, color: 'var(--accent)', background: 'var(--accent-soft)', borderRadius: 99, padding: '2px 8px', marginTop: 3, display: 'inline-block' }}>
+                  {activeCount} préférence{activeCount > 1 ? 's' : ''} active{activeCount > 1 ? 's' : ''}
+                </span>
+              )}
+            </div>
+          </div>
+          <div style={{ display: 'flex', gap: 8 }}>
+            {activeCount > 0 && (
+              <button onClick={reset} title="Réinitialiser" aria-label="Réinitialiser" style={{ height: 36, width: narrow ? 36 : undefined, borderRadius: 9, border: '1px solid var(--line)', background: 'var(--surface)', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: narrow ? 0 : 7, padding: narrow ? 0 : '0 12px', fontSize: 13, fontWeight: 600, color: 'var(--muted)' }}>
+                <A11YIcon name="reset" size={14} />{!narrow && ' Réinitialiser'}
+              </button>
+            )}
+            <button ref={firstRef} onClick={onClose} aria-label="Fermer" style={{ width: 36, height: 36, borderRadius: 9, border: '1px solid var(--line)', background: 'var(--surface)', cursor: 'pointer', display: 'grid', placeItems: 'center', color: 'var(--muted)' }}>
+              <A11YIcon name="x" size={16} />
+            </button>
+          </div>
+        </div>
+
+        {/* Tabs */}
+        <div style={{ display: 'flex', borderBottom: '1px solid var(--line)', flexShrink: 0 }}>
+          {["Profils d'assistance", 'Réglages personnalisés'].map((t, i) => (
+            <button
+              key={i}
+              role="tab"
+              aria-selected={tab === i}
+              onClick={() => setTab(i)}
+              style={{ flex: 1, border: 'none', background: 'none', cursor: 'pointer', padding: '12px 20px', fontSize: 14.5, fontWeight: 700, color: tab === i ? 'var(--accent)' : 'var(--muted)', borderBottom: tab === i ? '2.5px solid var(--accent)' : '2.5px solid transparent', transition: '.15s', marginBottom: -1 }}
+            >
+              {t}
+            </button>
+          ))}
+        </div>
+
+        {/* Content */}
+        <div style={{ overflowY: 'auto', flex: 1, padding: '20px 24px' }} role="tabpanel">
+          {tab === 0 && (
+            <div>
+              <p style={{ fontSize: 13.5, color: 'var(--muted)', margin: '0 0 18px', lineHeight: 1.6 }}>
+                Certains profils sont actifs par défaut dans le code — ils ne sont pas des options, mais des standards d'accessibilité intégrés nativement.
+              </p>
+              <div style={{ fontSize: 12, fontWeight: 700, letterSpacing: '2px', textTransform: 'uppercase', color: 'var(--muted-2)', marginBottom: 10 }}>STANDARDS DE BASE · TOUJOURS ACTIFS</div>
+              <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginBottom: 24 }}>
+                {ACC_STANDARDS.map((p) => (
+                  <StandardCard key={p.id} prof={p} expanded={expandedStd} onExpand={setExpandedStd} narrow={narrow} />
+                ))}
+              </div>
+              <div style={{ fontSize: 12, fontWeight: 700, letterSpacing: '2px', textTransform: 'uppercase', color: 'var(--muted-2)', marginBottom: 10 }}>PRÉFÉRENCES VISUELLES & COGNITIVES</div>
+              <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
+                {ACC_PROFILES.map((p) => (
+                  <ProfileCard key={p.id} prof={p} active={!!state.profiles[p.id]} onToggle={toggleProfile} />
+                ))}
+              </div>
+            </div>
+          )}
+
+          {tab === 1 && (
+            <div>
+              <p style={{ fontSize: 13.5, color: 'var(--muted)', margin: '0 0 18px', lineHeight: 1.6 }}>
+                Ajustez chaque paramètre individuellement. Vos choix manuels ont priorité sur les profils.
+              </p>
+              {Object.entries(ACC_SETTINGS).map(([catKey, cat]) => (
+                <div key={catKey} style={{ marginBottom: 26 }}>
+                  <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 4 }}>
+                    <A11YIcon name={cat.icon} size={16} />
+                    <span style={{ fontSize: 13, fontWeight: 700, letterSpacing: '1.5px', textTransform: 'uppercase', color: 'var(--muted-2)' }}>{cat.label}</span>
+                  </div>
+                  <div style={{ background: 'var(--surface)', border: '1px solid var(--line)', borderRadius: 'var(--r-md)', padding: '0 16px' }}>
+                    {cat.items.map((item, i) => (
+                      <div key={item.id} style={{ borderBottom: i < cat.items.length - 1 ? '1px solid var(--line)' : 'none' }}>
+                        <SettingRow item={item} value={state.settings[item.id]} onChange={updateSetting} />
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+
+        {/* Footer */}
+        <div style={{ borderTop: '1px solid var(--line)', padding: '14px 24px', flexShrink: 0, background: 'var(--surface-2)', borderRadius: '0 0 var(--r-xl) var(--r-xl)', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, flexWrap: 'wrap' }}>
+          <span style={{ fontSize: 13, color: 'var(--muted-2)', display: 'flex', alignItems: 'center', gap: 8 }}>
+            <A11YIcon name="shieldChk" size={14} /> Conformité RGAA 4.1 · Partiellement conforme
+          </span>
+          <a href="mailto:accessibilite@example.org" style={{ fontSize: 13, fontWeight: 700, color: 'var(--accent)', display: 'inline-flex', alignItems: 'center', gap: 6 }}>
+            <A11YIcon name="announce" size={14} /> Signaler un problème
+          </a>
+        </div>
+      </div>
+    </div>
+  );
+}