/* * Plugin Accessibilité GLPI — Espacement du texte * RGAA 10.12 / WCAG 1.4.12 : Espacement du texte (Level AA) * * Critère : lorsqu'un utilisateur applique les propriétés suivantes, * aucun contenu ni fonctionnalité ne doit être perdu : * - Hauteur de ligne ≥ 1.5 × taille de la police * - Espacement des lettres ≥ 0.12 em * - Espacement des mots ≥ 0.16 em * - Espace après les paragraphes ≥ 2 em * * Activé par data-a11y-spacing="1" sur (positionné par JS). * Distinct de la propriété CSS prefers-reduced-motion. */ /* ── Variables ────────────────────────────────────────────────────────────── */ html[data-a11y-spacing="1"] { --a11y-line-height: 1.5; --a11y-letter-spacing: 0.12em; --a11y-word-spacing: 0.16em; --a11y-para-spacing: 2em; } /* ── Texte courant : paragraphes, listes, définitions ─────────────────────── */ html[data-a11y-spacing="1"] p, html[data-a11y-spacing="1"] li, html[data-a11y-spacing="1"] dt, html[data-a11y-spacing="1"] dd, html[data-a11y-spacing="1"] blockquote { line-height: var(--a11y-line-height) !important; letter-spacing: var(--a11y-letter-spacing) !important; word-spacing: var(--a11y-word-spacing) !important; } /* Espacement après paragraphe */ html[data-a11y-spacing="1"] p + p, html[data-a11y-spacing="1"] p:not(:last-child) { margin-bottom: var(--a11y-para-spacing) !important; } /* ── Titres ────────────────────────────────────────────────────────────────── */ html[data-a11y-spacing="1"] h1, html[data-a11y-spacing="1"] h2, html[data-a11y-spacing="1"] h3, html[data-a11y-spacing="1"] h4, html[data-a11y-spacing="1"] h5, html[data-a11y-spacing="1"] h6 { line-height: var(--a11y-line-height) !important; letter-spacing: var(--a11y-letter-spacing) !important; word-spacing: var(--a11y-word-spacing) !important; } /* ── Éléments de formulaire ────────────────────────────────────────────────── */ html[data-a11y-spacing="1"] input, html[data-a11y-spacing="1"] select, html[data-a11y-spacing="1"] textarea, html[data-a11y-spacing="1"] button, html[data-a11y-spacing="1"] label { line-height: var(--a11y-line-height) !important; letter-spacing: var(--a11y-letter-spacing) !important; word-spacing: var(--a11y-word-spacing) !important; } /* ── Cellules de tableau ────────────────────────────────────────────────────── */ html[data-a11y-spacing="1"] th, html[data-a11y-spacing="1"] td { line-height: var(--a11y-line-height) !important; letter-spacing: var(--a11y-letter-spacing) !important; } /* ── Navigation : ne pas casser les menus avec l'espacement ───────────────── Les items de nav ont souvent des contraintes de largeur fixes. On limite le letter-spacing pour éviter les débordements de menu. ─────────────────────────────────────────────────────────────────────────── */ html[data-a11y-spacing="1"] .nav-link, html[data-a11y-spacing="1"] .dropdown-item, html[data-a11y-spacing="1"] .breadcrumb-item { letter-spacing: 0.05em !important; /* Réduit pour la navigation */ word-spacing: 0.08em !important; } /* ── Composants Tabler / Bootstrap ─────────────────────────────────────────── */ html[data-a11y-spacing="1"] .form-label, html[data-a11y-spacing="1"] .form-text, html[data-a11y-spacing="1"] .alert, html[data-a11y-spacing="1"] .badge, html[data-a11y-spacing="1"] .card-text { line-height: var(--a11y-line-height) !important; letter-spacing: var(--a11y-letter-spacing) !important; word-spacing: var(--a11y-word-spacing) !important; } /* ── Widget a11y lui-même : ne pas appliquer l'espacement aux contrôles ─────── Évite de casser l'ergonomie du widget d'accessibilité avec ses propres styles. ─────────────────────────────────────────────────────────────────────────── */ html[data-a11y-spacing="1"] #a11y-panel *, html[data-a11y-spacing="1"] #a11y-trigger { letter-spacing: normal !important; word-spacing: normal !important; } /* ── Interligne / hauteur de ligne (préférence utilisateur dédiée) ────────────── Distincte de l'espacement du texte (data-a11y-spacing). Pilotée par data-a11y-line-height="1" + la variable --a11y-user-line-height (1.5 ou 2), positionnées par le JS. Gatée sous l'interrupteur maître (data-a11y-baseline). ─────────────────────────────────────────────────────────────────────────────── */ html[data-a11y-baseline][data-a11y-line-height="1"] p, html[data-a11y-baseline][data-a11y-line-height="1"] li, html[data-a11y-baseline][data-a11y-line-height="1"] dt, html[data-a11y-baseline][data-a11y-line-height="1"] dd, html[data-a11y-baseline][data-a11y-line-height="1"] blockquote, html[data-a11y-baseline][data-a11y-line-height="1"] h1, html[data-a11y-baseline][data-a11y-line-height="1"] h2, html[data-a11y-baseline][data-a11y-line-height="1"] h3, html[data-a11y-baseline][data-a11y-line-height="1"] h4, html[data-a11y-baseline][data-a11y-line-height="1"] h5, html[data-a11y-baseline][data-a11y-line-height="1"] h6, html[data-a11y-baseline][data-a11y-line-height="1"] label, html[data-a11y-baseline][data-a11y-line-height="1"] th, html[data-a11y-baseline][data-a11y-line-height="1"] td, html[data-a11y-baseline][data-a11y-line-height="1"] .form-label, html[data-a11y-baseline][data-a11y-line-height="1"] .form-text, html[data-a11y-baseline][data-a11y-line-height="1"] .card-text { line-height: var(--a11y-user-line-height, 1.5) !important; } /* Ne pas appliquer l'interligne aux contrôles du widget a11y lui-même */ html[data-a11y-baseline][data-a11y-line-height="1"] #a11y-panel *, html[data-a11y-baseline][data-a11y-line-height="1"] #a11y-trigger { line-height: normal !important; }