/* ============================================================ CESIVI Modern UI — Accessibility CSS (PLAN-1365 Phase β) Loaded as a versioned via _ModernCssLinks.cshtml (component tier). Contains: skip-link, :focus-visible, prefers-reduced-motion. ============================================================ */ /* ── Visually-hidden utility (screen-reader only) ──────────── Use for text that provides context to SR users but is not shown visually. Clip-path technique is preferred over width/height:0 which can break some SR flows. */ .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; } /* ── Skip-to-content link (A11Y-CONTRACT §3.1) ──────────────── First child of . Visually off-screen until focused; snaps to top-left on focus so keyboard users can bypass chrome. */ .skip-link { position: absolute; top: -100%; left: 0; z-index: 10000; padding: 8px 16px; background: var(--accent); color: #fff; font-size: var(--font-size); font-weight: 600; text-decoration: none; border-radius: 0 0 var(--radius, 4px) 0; outline: none; transition: top 0.1s ease; } .skip-link:focus, .skip-link:focus-visible { top: 0; } /* ── :focus-visible (A11Y-CONTRACT §3.3) ────────────────────── Accent-colored 2 px outline + 2 px offset for every interactive element when navigated by keyboard. Suppressed for pointer input (pointer focus shows native browser default). */ *:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; } /* Remove default :focus outline only after :focus-visible is defined so browsers that don't support :focus-visible still show focus. */ *:focus:not(:focus-visible) { outline: none; } /* ── prefers-reduced-motion (PLAN-1365 Phase 6) ─────────────── Disables non-essential animations for users who have requested reduced motion in their OS accessibility settings. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ── WCAG 1.4.1 link-in-text-block (PLAN-1368 Phase γ) ──────── tokens.css sets body[data-modern-ui] a { text-decoration: none } (0-1-2). Override breadcrumb + inline content links with higher specificity (0-2-2). */ body[data-modern-ui="true"] .spm-breadcrumb a { text-decoration: underline; } /* Inline content links inside description/prose blocks */ body[data-modern-ui="true"] .dg-description a, body[data-modern-ui="true"] .spm-prose-block a { text-decoration: underline; } /* ── Bootstrap code element color override (PLAN-1641) ──────── Bootstrap sets --bs-code-color:#d63384 (pink, 4.28:1 on white) which fails WCAG 2.1 AA 4.5:1 threshold. Reset to inherit so code elements use the surrounding text color (typically black, 21:1). Specific contexts (galleries, modals) that need colored code override this locally. */ body[data-modern-ui="true"] code { color: inherit; } /* ── Bootstrap btn-secondary contrast fix (PLAN-1641) ───────── Bootstrap 5 btn-secondary (#6c757d on #fff) is 4.25:1, just below WCAG AA. Override with the Cesivi-standard secondary button style used across modern pages. */ body[data-modern-ui="true"] .btn.btn-secondary, body[data-modern-ui="true"] a.btn-secondary { background: #fff; color: #323130; border: 1px solid #8a8886; } /* ── Calendar "New Event" button contrast fix (PLAN-1642) ────── .ms-button-primary uses --spm-primary (#0072c6) which is 4.46:1 on white — just below WCAG AA 4.5:1. Override with #0065b3 (5.05:1). */ body[data-modern-ui="true"] .sp-cal-new-event-btn { background-color: #0065b3; color: #ffffff; } /* ── TermStoreManager tree-node button reset (PLAN-1646) ────── .ts-node div→button: strip default button chrome so it renders identically to the former div (appearance:none + transparent bg). */ body[data-modern-ui="true"] button.ts-node { appearance: none; background: none; border: none; padding-left: 8px; padding-right: 8px; padding-top: 4px; padding-bottom: 4px; cursor: pointer; font-size: inherit; font-family: inherit; color: inherit; } body[data-modern-ui="true"] button.ts-node:focus-visible { outline: 2px solid var(--focus-ring-color, #0078d4); outline-offset: 1px; border-radius: 2px; } /* ── cesivi-btn-action: accessible primary button (PLAN-1646 Phase D) ── Use in place of btn-primary on Permissions pages to bypass Bootstrap's CSS-custom-property cascade (#0d6efd + white = 3.0:1 fails AA). #0050a0 + white = ~7.2:1. SPECIFICITY NOTE: tokens.css has body[data-modern-ui="true"] a { color: var(--accent-fg) } — (0,1,2) body[data-modern-ui="true"] button { background: none } — (0,1,2) Both beat .cesivi-btn-action (0,1,0). Override with body[..] .cesivi-btn-action which is (0,2,1) — beats all tokens rules for both element types. */ .cesivi-btn-action { --bs-btn-color: #fff; --bs-btn-bg: #0050a0; --bs-btn-border-color: #0050a0; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #003f80; --bs-btn-hover-border-color: #003f80; --bs-btn-active-color: #fff; --bs-btn-active-bg: #003f80; --bs-btn-active-border-color: #003f80; --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: #0050a0; --bs-btn-disabled-border-color: #0050a0; } body[data-modern-ui="true"] .cesivi-btn-action { background-color: #0050a0; border-color: #0050a0; color: #fff; } body[data-modern-ui="true"] .cesivi-btn-action:hover { background-color: #003f80; border-color: #003f80; color: #fff; } /* ── cesivi-badge-role: accessible role-name badge (PLAN-1646 Phase D) ── Replaces badge.bg-secondary (#6c757d + white = 2.8:1 fails AA). #495057 + white = ~4.6:1 passes. */ .cesivi-badge-role { background-color: #495057; color: #fff; font-size: 0.75em; font-weight: 700; padding: 0.35em 0.65em; border-radius: 0.375rem; display: inline-block; line-height: 1; text-align: center; white-space: nowrap; vertical-align: baseline; } /* ── Bootstrap badge bg-info: dark text (PLAN-1646 Phase D) ──── Default .badge sets --bs-badge-color:#fff; cyan (#0dcaf0) + white = 1.7:1 (fails). Force dark text (#212529) on info badges: ~10:1 on #0dcaf0. */ body[data-modern-ui="true"] .badge.bg-info { color: #212529 !important; } /* ── Bootstrap badge bg-secondary contrast fix (PLAN-1646 Phase D) Default: white text on #6c757d = 2.8:1 (fails). Darken bg to #495057: ~4.6:1. Use !important to override Bootstrap's .bg-secondary !important rule. Selector (0,3,1) wins over Bootstrap (0,1,0) even in !important cascade. */ body[data-modern-ui="true"] .badge.bg-secondary { background-color: #495057 !important; } /* ── Links inside alert blocks need non-color distinction (PLAN-1646 Phase D) axe rule link-in-text-block: inline links must be distinguishable w/o color. */ body[data-modern-ui="true"] .alert a { text-decoration: underline; } /* ── Taxonomy term chip (PLAN-1646) ──────────────────────────── Replaces badge.bg-info whose cyan (#0dcaf0) + white text has contrast ≈1.7:1 (fails WCAG AA 4.5:1). Light blue bg (#e8f4fd) + dark blue text (#0065b3) gives ≈5.0:1. */ .cesivi-term-chip { background: #e8f4fd; color: #0065b3; font-size: 0.875em; font-weight: 500; padding: 0.25em 0.5em; border-radius: 0.375rem; display: inline-flex; align-items: center; gap: 0.25em; vertical-align: middle; line-height: 1.2; } .cesivi-term-chip .btn-close { filter: none; opacity: 0.7; } .cesivi-term-chip .btn-close:hover { opacity: 1; }