/* * Plugin Accessibilité GLPI — Feuille de style principale * RGAA 10.7 : Focus visible sur tous les éléments interactifs * RGAA 12.11 : Lien d'évitement * * Thème widget : Encre & Craie * Panneau clair haute lisibilité — craie (#FAFAF7), encre (#14161A), * accent outremer (#1D4ED8). Variante sombre via override de tokens * dans a11y-dark.css (html[data-a11y-dark="1"]). * Cibles tactiles ≥ 44 × 44 px (WCAG 2.5.5) */ /* ───────────────────────────────────────────────────────────────────────── Variables globales ───────────────────────────────────────────────────────────────────────── */ :root { /* Échelle typographique — modifiée par JS */ --a11y-font-scale: 1; /* Focus visible (RGAA 10.7 / WCAG 1.4.11 — ratio #005FCC sur blanc = 4.6:1 ✓) */ --a11y-focus-color: #005FCC; --a11y-focus-width: 3px; --a11y-focus-offset: 3px; /* Palette widget — Encre & Craie */ --aw-bg: #FAFAF7; /* craie */ --aw-bg-surface: #EFEDE6; --aw-bg-hover: rgba(20 22 26 / .04); --aw-border: #D9D6CC; --aw-border-hover: #B9B5A8; --aw-text: #14161A; /* encre — ≈ 17:1 sur craie (AAA) */ --aw-text-muted: #454B54; /* ≥ 7:1 sur craie (AAA) */ --aw-accent: #1D4ED8; /* outremer — 6.5:1 sur craie (AA) */ --aw-accent-strong: #16389F; /* hover / état appuyé */ --aw-accent-glow: rgba(29 78 216 / .18); --aw-accent-dim: rgba(29 78 216 / .09); --aw-knob-on: #ffffff; /* pastille du toggle coché */ --aw-track-off: #EFEDE6; --aw-radius-panel: 18px; --aw-radius-ctrl: 10px; /* Ancrage du widget (trigger + panneau restent alignés). Le bottom élevé évite les éléments flottants GLPI du coin bas-droit (bouton d'aide helpdesk, actions de formulaire). safe-area pour iOS. */ --aw-offset-right: 20px; --aw-offset-bottom: max(20px, env(safe-area-inset-bottom, 0px)); --aw-shadow-panel: 0 24px 48px rgba(20 22 26 / .18), 0 0 0 1px rgba(20 22 26 / .04); } /* ───────────────────────────────────────────────────────────────────────── Échelle typographique globale (RGAA 10.4) ───────────────────────────────────────────────────────────────────────── */ html { font-size: calc(1rem * var(--a11y-font-scale, 1)); } /* ───────────────────────────────────────────────────────────────────────── Focus visible universel (RGAA 10.7) Bootstrap 5 efface outline via :focus { outline: 0 } — on surcharge. :focus-visible cible uniquement la navigation clavier, pas le clic souris. ───────────────────────────────────────────────────────────────────────── */ html[data-a11y-baseline="1"] :focus-visible { outline: var(--a11y-focus-width) solid var(--a11y-focus-color) !important; outline-offset: var(--a11y-focus-offset) !important; border-radius: 2px; } html[data-a11y-baseline="1"].js-focus-visible :focus:not(.focus-visible) { outline: none; } /* Le focus visible du widget lui-même reste toujours actif (RGAA 10.7), indépendamment de l'interrupteur maître — le widget est notre propre UI. */ #a11y-widget-root :focus-visible { outline: var(--a11y-focus-width) solid var(--a11y-focus-color) !important; outline-offset: var(--a11y-focus-offset) !important; border-radius: 2px; } /* Focus sur Select2 (géré par JS a11y-focus.js) */ .select2-container.a11y-focus-within .select2-selection { outline: var(--a11y-focus-width) solid var(--a11y-focus-color) !important; outline-offset: var(--a11y-focus-offset) !important; } /* ───────────────────────────────────────────────────────────────────────── Lien d'évitement (RGAA 12.11) Injecté par a11y-skip-link.js comme premier enfant de . Invisible par défaut, visible au focus clavier. Ratio #fff / #1D4ED8 = 6.5:1 — WCAG AA ✓ ───────────────────────────────────────────────────────────────────────── */ .a11y-skip-link { position: absolute; top: -200%; left: 0; z-index: 99999; padding: .625rem 1.5rem; background: var(--aw-accent); color: #ffffff; font-size: .9375rem; font-weight: 700; text-decoration: none; border-radius: 0 0 8px 0; white-space: nowrap; transition: top .15s ease; } .a11y-skip-link:focus { top: 0; } /* ───────────────────────────────────────────────────────────────────────── Zone ARIA live — invisible visuellement, accessible aux AT (RGAA 7.1) ───────────────────────────────────────────────────────────────────────── */ .a11y-announcer { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ───────────────────────────────────────────────────────────────────────── Utilitaire : visuellement caché mais accessible aux AT ───────────────────────────────────────────────────────────────────────── */ .a11y-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ═══════════════════════════════════════════════════════════════════════════ WIDGET — Bouton déclencheur flottant Position fixe, coin inférieur droit. Cible tactile : 44px de hauteur minimum (WCAG 2.5.5). ═══════════════════════════════════════════════════════════════════════════ */ #a11y-trigger { position: fixed; bottom: var(--aw-offset-bottom); right: var(--aw-offset-right); z-index: 9990; display: flex; align-items: center; gap: 8px; padding: 10px 18px 10px 14px; min-height: 44px; background: var(--aw-bg); color: var(--aw-text); border: 1.5px solid var(--aw-border); border-radius: 100px; cursor: pointer; font-size: .8125rem; font-weight: 600; letter-spacing: .025em; line-height: 1; white-space: nowrap; box-shadow: 0 2px 12px rgba(20 22 26 / .22); transition: border-color .2s ease, box-shadow .2s ease, transform .15s ease; } /* Animation d'entrée légère — seulement si l'OS n'exige pas motion réduit */ @media (prefers-reduced-motion: no-preference) { #a11y-trigger { animation: a11y-trigger-in .4s cubic-bezier(.22, 1, .36, 1) .6s both; } } html[data-a11y-motion="reduce"] #a11y-trigger, html[data-a11y-motion="reduce"] #a11y-panel { animation: none !important; transition: none !important; } @keyframes a11y-trigger-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } #a11y-trigger .a11y-trigger-icon { color: var(--aw-accent); flex-shrink: 0; display: flex; transition: transform .2s ease; } #a11y-trigger:hover { border-color: var(--aw-accent); box-shadow: 0 4px 20px rgba(20 22 26 / .28), 0 0 0 3px var(--aw-accent-dim); transform: translateY(-1px); } #a11y-trigger:hover .a11y-trigger-icon { transform: scale(1.1); } #a11y-trigger:focus-visible { outline: var(--a11y-focus-width) solid var(--aw-accent) !important; outline-offset: var(--a11y-focus-offset) !important; } #a11y-trigger[aria-expanded="true"] { border-color: var(--aw-accent); box-shadow: 0 4px 20px rgba(20 22 26 / .28), 0 0 0 3px var(--aw-accent-dim); } /* ═══════════════════════════════════════════════════════════════════════════ WIDGET — Panneau de préférences ═══════════════════════════════════════════════════════════════════════════ */ #a11y-panel { position: fixed; bottom: calc(var(--aw-offset-bottom) + 56px); right: var(--aw-offset-right); z-index: 9991; width: min(304px, calc(100vw - 40px)); /* Toujours scrollable : le contenu ne doit jamais dépasser la hauteur visible (corrige l'inaccessibilité du bas + le fort zoom navigateur). */ max-height: calc(100vh - 96px); overflow-y: auto; overscroll-behavior: contain; background: var(--aw-bg); border-radius: var(--aw-radius-panel); box-shadow: var(--aw-shadow-panel); color: var(--aw-text); /* Liseré accent en haut — repère visuel */ border-top: 3px solid var(--aw-accent); border-left: 1px solid var(--aw-border); border-right: 1px solid var(--aw-border); border-bottom: 1px solid var(--aw-border); transform-origin: bottom right; } @media (prefers-reduced-motion: no-preference) { #a11y-panel { animation: a11y-panel-in .24s cubic-bezier(.34, 1.4, .64, 1) both; } } #a11y-panel[hidden] { display: none; } /* ───────────────────────────────────────────────────────────────────────── Variante « bas-gauche » — posée par a11y-widget.js quand le coin bas-droit est déjà occupé par un autre élément flottant (autre plugin / GLPI). On inverse seulement l'ancrage horizontal ; le bottom reste piloté par la variable commune, trigger et panneau restent donc alignés. ───────────────────────────────────────────────────────────────────────── */ html[data-a11y-widget-pos="left"] #a11y-trigger, html[data-a11y-widget-pos="left"] #a11y-panel { right: auto; left: var(--aw-offset-right); } html[data-a11y-widget-pos="left"] #a11y-panel { transform-origin: bottom left; } @keyframes a11y-panel-in { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } } /* ── En-tête ──────────────────────────────────────────────────────────── */ .a11y-panel-header { display: flex; align-items: center; justify-content: space-between; padding: 15px 15px 13px; border-bottom: 1px solid var(--aw-border); } .a11y-panel-title { margin: 0; font-size: 1.0625rem; font-weight: 800; letter-spacing: -.02em; color: var(--aw-text); line-height: 1; } /* Point final carré — clin d'œil typographique « encre » */ .a11y-panel-title-dot { display: inline-block; width: 6px; height: 6px; background: var(--aw-accent); border-radius: 1px; margin-left: 4px; vertical-align: baseline; } #a11y-panel-close { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; background: var(--aw-bg-surface); border: 1px solid var(--aw-border); border-radius: 8px; color: var(--aw-text-muted); cursor: pointer; transition: background .15s, color .15s, border-color .15s; flex-shrink: 0; } #a11y-panel-close:hover { background: var(--aw-bg-hover); color: var(--aw-text); border-color: var(--aw-border-hover); } #a11y-panel-close:focus-visible { outline: var(--a11y-focus-width) solid var(--aw-accent) !important; outline-offset: var(--a11y-focus-offset) !important; } /* ── Corps ────────────────────────────────────────────────────────────── */ .a11y-panel-body { padding: 6px 6px; } /* ── Eyebrow de section (Vision / Lecture / Navigation) ──────────────── */ .a11y-section-title { display: flex; align-items: center; gap: 8px; margin: 10px 9px 4px; font-size: .6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--aw-text-muted); line-height: 1; } /* Court trait accent avant le titre de section */ .a11y-section-title::before { content: ''; display: inline-block; width: 16px; height: 2px; background: var(--aw-accent); border-radius: 1px; flex-shrink: 0; } /* ── Rangée de contrôle (label + toggle) ─────────────────────────────── */ .a11y-ctrl-row { display: flex; align-items: center; gap: 12px; padding: 9px 9px 9px 9px; border-radius: var(--aw-radius-ctrl); transition: background .15s; } .a11y-ctrl-row:hover { background: var(--aw-bg-hover); } .a11y-ctrl-label { display: flex; align-items: center; gap: 9px; flex: 1; min-width: 0; font-size: .875rem; font-weight: 500; /* !important : neutralise la règle GLPI/Tabler « .page label { color } » (spécificité 0,1,1) qui sinon teinte les