/* * Plugin Accessibilité GLPI — Contraste renforcé * RGAA 3.2 : Ratio de contraste WCAG AA * * Activé par data-a11y-contrast="1" sur . * DISTINCT de data-high-contrast="1" de GLPI (insuffisant WCAG AA). * Les deux attributs peuvent coexister sans conflit. * * Ratios vérifiés (outil : https://webaim.org/resources/contrastchecker/) : * - #000000 sur #ffffff = 21:1 (WCAG AAA) * - #0000cc sur #ffffff = 4.58:1 (WCAG AA texte normal ✓) * - #ffffff sur #0000cc = 4.58:1 (WCAG AA ✓) */ /* ── Alias pratique : html[data-a11y-contrast="1"] = :root[data-a11y-contrast="1"] ── */ /* Les deux formes sont équivalentes ; on préfère html[] pour les sélecteurs enfants. */ html[data-a11y-contrast="1"] { /* Surcharge les variables Tabler (framework UI de GLPI 11) */ --tblr-body-color: #000000; --tblr-body-bg: #ffffff; --tblr-bg-surface: #ffffff; --tblr-bg-surface-secondary: #f0f0f0; --tblr-border-color: #000000; /* Liens — information non portée uniquement par la couleur (RGAA 3.1) */ --tblr-link-color: #0000cc; --tblr-link-hover-color: #000099; --tblr-link-color-rgb: 0, 0, 204; /* Couleur primaire */ --tblr-primary: #0000cc; --tblr-primary-fg: #ffffff; --tblr-primary-rgb: 0, 0, 204; } /* ── Fond et texte : body + conteneurs de layout Tabler/GLPI ────────────── Tabler applique background-color directement sur ces éléments ; mettre à jour les variables CSS ne suffit pas — on cible aussi explicitement. ───────────────────────────────────────────────────────────────────────── */ html[data-a11y-contrast="1"] body, html[data-a11y-contrast="1"] .page, html[data-a11y-contrast="1"] .page-wrapper, html[data-a11y-contrast="1"] .page-body, html[data-a11y-contrast="1"] .page-header, html[data-a11y-contrast="1"] .container-xl, html[data-a11y-contrast="1"] .container-fluid { background-color: #ffffff !important; color: #000000 !important; } /* Sidebar / navbar verticale helpdesk */ html[data-a11y-contrast="1"] .navbar-vertical, html[data-a11y-contrast="1"] .navbar-vertical .navbar-brand, html[data-a11y-contrast="1"] .navbar { background-color: #ffffff !important; border-color: #000000 !important; } /* Bordure basse sur toute la navbar */ html[data-a11y-contrast="1"] .navbar { border-bottom: 2px solid #000000 !important; } html[data-a11y-contrast="1"] .nav-link, html[data-a11y-contrast="1"] .navbar-brand-text { color: #000000 !important; } html[data-a11y-contrast="1"] .nav-link:hover, html[data-a11y-contrast="1"] .nav-link:focus { color: #0000cc !important; } /* ── Boutons ──────────────────────────────────────────────────────────────── */ /* Bordure visible sur tous les boutons (distinction form/fond sans couleur seule) */ html[data-a11y-contrast="1"] .btn { border: 2px solid currentColor !important; } /* ── Liens ────────────────────────────────────────────────────────────────── */ /* Soulignement — RGAA 3.1 : information non portée par la couleur seule */ html[data-a11y-contrast="1"] a:not(.btn):not(.nav-link):not(.dropdown-item) { color: #0000cc !important; text-decoration: underline !important; } /* ── Formulaires ──────────────────────────────────────────────────────────── */ html[data-a11y-contrast="1"] input, html[data-a11y-contrast="1"] select, html[data-a11y-contrast="1"] textarea { border: 2px solid #000000 !important; color: #000000 !important; background-color: #ffffff !important; } /* .input-group-flat : bordure sur le wrapper, pas sur l'input interne */ html[data-a11y-contrast="1"] .input-group-flat { border: 2px solid #000000 !important; border-radius: 6px !important; } html[data-a11y-contrast="1"] .input-group-flat input, html[data-a11y-contrast="1"] .input-group-flat select, html[data-a11y-contrast="1"] .input-group-flat textarea { border-color: transparent !important; } /* Select2 — surcharge du composant tiers */ html[data-a11y-contrast="1"] .select2-container--default .select2-selection { border: 2px solid #000000 !important; background-color: #ffffff !important; color: #000000 !important; } html[data-a11y-contrast="1"] .select2-container--default .select2-selection__rendered { color: #000000 !important; } html[data-a11y-contrast="1"] .select2-dropdown { background-color: #ffffff !important; border: 2px solid #000000 !important; } html[data-a11y-contrast="1"] .select2-results__option { color: #000000 !important; } html[data-a11y-contrast="1"] .select2-results__option--highlighted { background-color: #0000cc !important; color: #ffffff !important; } /* ── Menus déroulants ─────────────────────────────────────────────────────── */ html[data-a11y-contrast="1"] .dropdown-menu { border: 2px solid #000000 !important; background-color: #ffffff !important; } html[data-a11y-contrast="1"] .dropdown-item { color: #000000 !important; } html[data-a11y-contrast="1"] .dropdown-item:hover, html[data-a11y-contrast="1"] .dropdown-item:focus { background-color: #0000cc !important; color: #ffffff !important; } /* ── Tables ───────────────────────────────────────────────────────────────── */ html[data-a11y-contrast="1"] .table { color: #000000 !important; --tblr-table-color: #000000; --tblr-table-bg: #ffffff; --tblr-table-border-color: #000000; } html[data-a11y-contrast="1"] .table th, html[data-a11y-contrast="1"] .table td { border-color: #000000 !important; color: #000000 !important; background-color: #ffffff !important; } html[data-a11y-contrast="1"] .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: #f0f0f0 !important; color: #000000 !important; } /* ── Cartes / panneaux ────────────────────────────────────────────────────── */ html[data-a11y-contrast="1"] .card, html[data-a11y-contrast="1"] .card-body { border: 2px solid #000000 !important; background-color: #ffffff !important; color: #000000 !important; } html[data-a11y-contrast="1"] .card-header { background-color: #f0f0f0 !important; border-bottom: 2px solid #000000 !important; color: #000000 !important; } html[data-a11y-contrast="1"] .card-footer { background-color: #f0f0f0 !important; border-top: 2px solid #000000 !important; color: #000000 !important; } /* ── Alertes ──────────────────────────────────────────────────────────────── */ /* Les icônes et le texte portent l'information, la couleur est un complément */ html[data-a11y-contrast="1"] .alert { border: 2px solid currentColor !important; color: #000000 !important; background-color: #ffffff !important; } /* ── Badges de statut ─────────────────────────────────────────────────────── */ html[data-a11y-contrast="1"] .badge { border: 1px solid currentColor; } /* ── Fond de modal ────────────────────────────────────────────────────────── */ html[data-a11y-contrast="1"] .modal-content { background-color: #ffffff !important; color: #000000 !important; border: 2px solid #000000 !important; } html[data-a11y-contrast="1"] .modal-header, html[data-a11y-contrast="1"] .modal-footer { background-color: #f0f0f0 !important; border-color: #000000 !important; } /* ── Composants non-texte : contraste ≥ 3:1 (EN 301 549 §9.1.4.11) ────────── En mode contraste renforcé, les contours et icônes fonctionnelles doivent être distinguables à 3:1 contre leur arrière-plan. Ratio vérifié : #000000 / #ffffff = 21:1. ─────────────────────────────────────────────────────────────────────────── */ /* Contour de focus renforcé pour tous les éléments interactifs */ html[data-a11y-contrast="1"] :focus-visible { outline: 3px solid #000000 !important; outline-offset: 3px !important; } /* Icônes SVG fonctionnelles (boutons icône-seule dans les toolbars GLPI) */ html[data-a11y-contrast="1"] button svg, html[data-a11y-contrast="1"] a svg, html[data-a11y-contrast="1"] [role="button"] svg { color: #000000 !important; stroke: #000000 !important; } /* Icônes Tabler Icons (classe ti-*) dans les boutons */ html[data-a11y-contrast="1"] button [class*="ti-"], html[data-a11y-contrast="1"] a [class*="ti-"], html[data-a11y-contrast="1"] [role="button"] [class*="ti-"] { color: #000000 !important; } /* Checkboxes et radios natifs : contour visible */ html[data-a11y-contrast="1"] input[type="checkbox"], html[data-a11y-contrast="1"] input[type="radio"] { outline: 2px solid #000000 !important; outline-offset: 1px !important; } /* Indicateur de focus sur les éléments Select2 */ html[data-a11y-contrast="1"] .select2-container.a11y-focus-within .select2-selection { outline: 3px solid #000000 !important; outline-offset: 2px !important; } /* Badges de statut colorés : ajouter une bordure (info non portée par couleur seule) */ html[data-a11y-contrast="1"] .badge:not([class*="bg-"]) { border: 1px solid #000000 !important; } /* ── Le widget a11y garde son design propre, même en contraste renforcé ────── Le widget est notre propre interface (thème « Noir Ambré ») : les règles génériques ci-dessus (input, button svg, outline…) ne doivent pas le repeindre. La spécificité ID (#a11y-widget-root) + !important l'emporte sur les sélecteurs génériques contrastés. Le panneau lui-même n'est pas touché par les règles de fond (qui ciblent .page/.card/body, pas #a11y-panel). ─────────────────────────────────────────────────────────────────────────── */ /* Interrupteurs (role="switch") : restaurer le rendu pastille ambre/sombre */ html[data-a11y-contrast="1"] #a11y-widget-root .a11y-toggle { background-color: var(--aw-track-off) !important; border: 1.5px solid rgba(255 255 255 / .1) !important; color: var(--aw-text) !important; outline: none !important; } html[data-a11y-contrast="1"] #a11y-widget-root .a11y-toggle:checked { background-color: var(--aw-accent) !important; border-color: transparent !important; } /* Champs masqués (radios sr-only) : pas de bordure/contour parasite */ html[data-a11y-contrast="1"] #a11y-widget-root input { outline: none !important; } /* Icônes des boutons du widget (déclencheur, fermeture) : garder currentColor */ html[data-a11y-contrast="1"] #a11y-widget-root button svg, html[data-a11y-contrast="1"] #a11y-widget-root [role="button"] svg { color: currentColor !important; stroke: currentColor !important; }