/** * Accessibility Utilities — Capital of Business Theme * WCAG 2.1 AA — Level AA compliant helpers. * Applies globally; no component-specific selectors here. * * @package COB * @since 2.0.0 */ /* ------------------------------------------------------- SCREEN-READER ONLY Visually hidden but readable by assistive technology. Use .cob-sr-only or WordPress core .screen-reader-text ------------------------------------------------------- */ .cob-sr-only, .screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Focusable variant — reveals on focus (skip links, etc.) */ .cob-sr-only--focusable:focus, .cob-sr-only--focusable:focus-within, .screen-reader-text:focus { position: fixed; top: var(--cob-space-4, 1rem); inset-inline-start: var(--cob-space-4, 1rem); width: auto; height: auto; padding: var(--cob-space-3, 0.75rem) var(--cob-space-6, 1.5rem); margin: 0; overflow: visible; clip: auto; white-space: normal; background: var(--cob-surface-dark, #000); color: var(--cob-text-inverse, #fff); font-size: var(--cob-text-base, 1rem); font-weight: var(--cob-weight-semibold, 600); border-radius: var(--cob-radius-md, 8px); z-index: var(--cob-z-max, 9999); text-decoration: none; } /* ------------------------------------------------------- FOCUS VISIBLE Use :focus-visible for keyboard-only focus rings. All interactive elements get a consistent ring. ------------------------------------------------------- */ :focus-visible { outline: var(--cob-focus-ring, 2px solid #ec3c43); outline-offset: var(--cob-focus-ring-offset, 2px); } /* Remove default focus for mouse/touch users */ :focus:not(:focus-visible) { outline: none; } /* High-contrast / Windows forced-colors fallback */ @media (forced-colors: active) { :focus-visible { outline: 3px solid ButtonText; outline-offset: 2px; } } /* ------------------------------------------------------- REDUCED MOTION Honour OS preference — disable animations / transitions. ------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* ------------------------------------------------------- HIGH CONTRAST HELPERS ------------------------------------------------------- */ /** * .cob-high-contrast — wrapper to invert to a forced dark theme * when user enables High Contrast in OS settings. */ @media (prefers-contrast: more) { .cob-badge, .cob-tag { border: 1px solid currentColor; } } /* ------------------------------------------------------- ARIA-HIDDEN SHORTHAND Elements that should be invisible AND out of tab order. ------------------------------------------------------- */ [aria-hidden="true"] { pointer-events: none; } /* ------------------------------------------------------- LIVE REGION DEFAULTS ------------------------------------------------------- */ [aria-live="polite"], [aria-live="assertive"] { /* Ensure live regions are not visually hidden by mistake */ clip: auto; white-space: normal; } /* ------------------------------------------------------- SKIP LINK — placed as first child of Usage: ------------------------------------------------------- */ .cob-skip-link { position: absolute; top: -9999px; inset-inline-start: -9999px; padding: var(--cob-space-3, 0.75rem) var(--cob-space-6, 1.5rem); background: var(--cob-brand-primary, #ec3c43); color: var(--cob-text-inverse, #fff); font-weight: var(--cob-weight-semibold, 600); border-radius: var(--cob-radius-md, 8px); z-index: var(--cob-z-max, 9999); text-decoration: none; transition: top var(--cob-ease-fast, 150ms ease-in-out), inset-inline-start var(--cob-ease-fast, 150ms ease-in-out); } .cob-skip-link:focus { position: fixed; top: var(--cob-space-4, 1rem); inset-inline-start: var(--cob-space-4, 1rem); } /* ------------------------------------------------------- MINIMUM TAP TARGET SIZE (WCAG 2.5.5 — 44×44px) Applied automatically to interactive elements. ------------------------------------------------------- */ .cob-btn, .cob-icon-btn { min-height: 44px; min-width: 44px; } /* ------------------------------------------------------- LINK UNDERLINE (WCAG 1.4.1 — not by color alone) Inline links inside body text must be underlined. ------------------------------------------------------- */ .cob-prose a, .entry-content a, .widget-area a { text-decoration: underline; text-underline-offset: 3px; } .cob-prose a:hover, .entry-content a:hover { text-decoration-thickness: 2px; } /* ------------------------------------------------------- ICON-ONLY BUTTONS — must have accessible label Prefer aria-label; this rule enforces a minimum ratio. See: WCAG 1.1.1 Non-text Content ------------------------------------------------------- */ .cob-icon-btn { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; background: transparent; border: none; padding: var(--cob-space-2, 0.5rem); border-radius: var(--cob-radius-full, 9999px); color: inherit; transition: background var(--cob-ease-fast, 150ms ease-in-out); } .cob-icon-btn:hover { background: var(--cob-surface-raised, #f4f4f4); } /* ------------------------------------------------------- TEXT TRUNCATION (accessible via title/aria-label) ------------------------------------------------------- */ .cob-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cob-line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .cob-line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* ------------------------------------------------------- KEYBOARD NAV DETECTION .cob-keyboard-nav added by class-wcag-enhancements.php inline JS. Only show outline when user is actually using keyboard. ------------------------------------------------------- */ .cob-keyboard-nav *:focus { outline: var(--cob-focus-ring, 2px solid #ec3c43); outline-offset: var(--cob-focus-ring-offset, 2px); } /* ------------------------------------------------------- ERROR / STATUS MESSAGES (WCAG 1.3.1 Info and Relationships) ------------------------------------------------------- */ .cob-alert { padding: var(--cob-space-4, 1rem) var(--cob-space-6, 1.5rem); border-radius: var(--cob-radius-md, 8px); border-inline-start: 4px solid currentColor; font-size: var(--cob-text-sm, 0.875rem); } .cob-alert--error { color: #c62828; background: #ffebee; } .cob-alert--success { color: #2e7d32; background: #e8f5e9; } .cob-alert--warning { color: #e65100; background: #fff3e0; } .cob-alert--info { color: #01579b; background: #e1f5fe; } /* RTL — swap border side */ [dir="rtl"] .cob-alert { border-inline-start: none; border-inline-end: 4px solid currentColor; }