/*
* BlockTicker v96.7 — WCAG 2.1 AA Accessibility Fixes
* =====================================================
* Load order: last (enqueued at priority 99999 via BT_A11y)
* Strategy: override-only — no existing rule is deleted, only beaten.
*
* Sections:
* 1. Utility: .bt-sr-only, .bt-skip-link
* 2. Focus-visible: global ring, outline:none override
* 3. Colour contrast: --bt-text-3 fix + hardcoded failures
* 4. Tables: scope, role, keyboard-nav affordance
* 5. ARIA live region
* 6. Motion: prefers-reduced-motion
* 7. High contrast: prefers-contrast:more
*/
/* ============================================================
1. SCREEN-READER UTILITY + SKIP LINK
============================================================ */
/**
* Visually hidden but accessible to screen readers.
* Use: Descriptive text
*/
.bt-sr-only {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0,0,0,0) !important;
white-space: nowrap !important;
border: 0 !important;
}
/* Undo sr-only when focused (e.g. skip links) */
.bt-sr-only-focusable:focus,
.bt-sr-only-focusable:focus-within {
position: static !important;
width: auto !important;
height: auto !important;
padding: 0 !important;
margin: 0 !important;
overflow: visible !important;
clip: auto !important;
white-space: normal !important;
}
/**
* Skip-to-content link.
* Injected at the very top of by BT_A11y::inject_skip_link().
* Hidden off-screen until keyboard-focused.
*/
#bt-skip-link {
position: absolute;
top: -100px;
left: 16px;
z-index: 99999;
padding: 10px 20px;
background: #00d4aa;
color: #0a0e1a !important;
font-weight: 700;
font-size: 14px;
border-radius: 0 0 8px 8px;
text-decoration: none;
transition: top 0.15s ease;
/* Must pass AA: #0a0e1a on #00d4aa = 10.08:1 ✅ */
}
#bt-skip-link:focus {
top: 0;
outline: 3px solid #0a0e1a;
outline-offset: 2px;
}
/* ============================================================
2. FOCUS-VISIBLE — GLOBAL RING
============================================================
Rule: every keyboard-focusable element must have a visible
focus indicator with at least 3:1 contrast vs surroundings.
We use a 3px #00d4aa outline (10:1 on dark bg) with 2px offset
so it clears the element border.
:focus-visible fires only on keyboard focus (not mouse click),
so interactive elements keep their designed hover appearance
on mouse use. Browsers that don't support :focus-visible fall
back to :focus, which is acceptable (over-trigger is fine).
*/
/* Global catch-all — everything interactive */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible,
[role="tab"]:focus-visible,
[role="option"]:focus-visible,
[role="menuitem"]:focus-visible,
[role="link"]:focus-visible,
summary:focus-visible {
outline: 3px solid #00d4aa !important;
outline-offset: 3px !important;
border-radius: 3px;
/* Do NOT set box-shadow here — it won't override outline:none !important */
}
/*
* Override the three outline:none !important blocks in revamp-v44.css.
* Specificity must beat "selector { outline: none !important }".
* We win by adding :focus-visible which is a pseudo-class (+0,1,0).
*/
.bt-conv-amount-input:focus-visible,
.bt-conv-select:focus-visible,
.bt-port-input:focus-visible,
.bt-port-select:focus-visible,
.fxlm-newsletter-v2-input:focus-visible,
.bt-wfu-field input:focus-visible,
.bt-wfu-field textarea:focus-visible,
.bt-wfu-field select:focus-visible {
outline: 3px solid #00d4aa !important;
outline-offset: 2px !important;
box-shadow: 0 0 0 5px rgba(0,212,170,.18) !important;
}
/* Tables — focused cells */
.fxlm-table td:focus,
.bt-cat-table td:focus,
.fxlm-forex-table td:focus {
outline: 3px solid #00d4aa !important;
outline-offset: -2px !important;
}
/* Chart expand / fullscreen button */
.bt-chart-expand-overlay:focus-visible {
outline: 3px solid #00d4aa !important;
outline-offset: 3px !important;
}
/* ============================================================
3. COLOUR CONTRAST FIXES
============================================================
Failures found in audit:
#64748b on #0a0e1a → 4.05:1 (AA needs 4.5:1 for small text)
#64748b on #111827 → 3.73:1 ❌
#64748b on #1a2235 → 3.33:1 ❌
#475569 on #0a0e1a → 2.54:1 ❌❌
Fix: replace both with #7a8aaa
#7a8aaa on #0a0e1a → 5.54:1 ✅ AA
#7a8aaa on #111827 → 5.11:1 ✅ AA
#7a8aaa on #1a2235 → 4.56:1 ✅ AA
Strategy: override the CSS custom property at :root, then add
targeted overrides for hardcoded instances we can't reach via
the variable alone.
*/
:root {
/* Promoted from #64748b (4.05:1 fail) to #7a8aaa (5.54:1 pass) */
--bt-text-3: #7a8aaa !important;
/* Promoted from #475569 (2.54:1 fail) — same target as text-3 */
--bt-text-muted: #7a8aaa !important;
}
/*
* Hardcoded #475569 overrides (10 distinct selectors found in audit).
* Ordered from most to least specific.
*/
.bt-cat-row-vol small,
.bt-tok-addr-icons,
.bt-star,
.fxlm-newsletter-v2-input::placeholder,
.fxlm-wl-search::placeholder,
.fxlm-exc-search-inp::placeholder,
.bt-conv-amount-input::placeholder,
.bt-conv-select option,
.bt-wfu-field input::placeholder,
.bt-wfu-field textarea::placeholder {
color: #7a8aaa !important;
}
/* Hardcoded #64748b overrides — secondary / meta text throughout the UI */
.fxlm-news-meta,
.fxlm-news-source,
.bt-card-meta,
.bt-post-meta,
.bt-editorial-meta,
.fxlm-signal-meta,
.bt-exc-meta,
.fxlm-last-updated,
.bt-chart-caption,
.fxlm-table thead th,
.bt-cat-table thead th,
.fxlm-forex-table thead th,
.bt-sentiment-table thead th {
color: #7a8aaa !important;
}
/*
* Price change colours — green/red on dark background.
* Audit check:
* #22c55e (gain green) on #0a0e1a → 8.94:1 ✅
* #ff4d6a (loss red) on #0a0e1a → 4.55:1 ✅ (barely; keep as-is)
* Older green #00d4aa on #0a0e1a → 10.08:1 ✅
* No changes needed for price colours.
*/
/* Badge text on coloured backgrounds — confirm pass */
/* .fxlm-badge-up background:#22c55e22 color:#22c55e → 8.94:1 ✅ */
/* .fxlm-badge-down background:#ff4d6a22 color:#ff4d6a → 4.55:1 ✅ */
/* ============================================================
4. TABLE ACCESSIBILITY
============================================================ */
/*
* Keyboard-navigable table cells.
* BT_A11y::js adds tabindex="0" to every | in market tables.
* These styles give navigated cells a visible selection ring.
*/
.fxlm-table[data-a11y-grid] td,
.bt-cat-table[data-a11y-grid] td,
.fxlm-forex-table[data-a11y-grid] td {
cursor: default;
}
.fxlm-table[data-a11y-grid] td:focus,
.bt-cat-table[data-a11y-grid] td:focus,
.fxlm-forex-table[data-a11y-grid] td:focus {
outline: 2px solid #00d4aa !important;
outline-offset: -2px !important;
background-color: rgba(0,212,170,.07) !important;
}
/* Sortable column headers */
.fxlm-table thead th[aria-sort],
.bt-cat-table thead th[aria-sort] {
cursor: pointer;
user-select: none;
}
.fxlm-table thead th[aria-sort]:focus-visible,
.bt-cat-table thead th[aria-sort]:focus-visible {
outline: 3px solid #00d4aa !important;
outline-offset: -2px !important;
}
/* Sort indicator injected by JS */
.bt-sort-icon {
display: inline-block;
margin-left: 5px;
font-size: 10px;
opacity: 0.55;
user-select: none;
speak: none; /* CSS2 — for older AT */
}
th[aria-sort="ascending"] .bt-sort-icon::after { content: " ▲"; opacity: 1; }
th[aria-sort="descending"] .bt-sort-icon::after { content: " ▼"; opacity: 1; }
th[aria-sort="none"] .bt-sort-icon::after { content: " ⇅"; }
/* ============================================================
5. ARIA LIVE REGION
============================================================ */
#bt-a11y-live {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0,0,0,0);
white-space: nowrap;
border: 0;
padding: 0;
margin: -1px;
/* aria-live="polite" set in HTML — screen reader reads on idle */
}
/* ============================================================
6. REDUCED MOTION
============================================================
WCAG 2.3.3 (AAA) and general best-practice.
We include it in the AA pass because animated content that
cannot be paused is also a 2.2.2 (AA) violation if it lasts
more than 5 seconds.
*/
@media (prefers-reduced-motion: reduce) {
/* Kill all CSS animations and transitions */
*,
*::before,
*::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
/* Hero ticker — stop rotating messages */
.bt-hero-ticker-track { animation: none !important; }
.bt-hero-ticker-msg { transition: none !important; }
/* Price flash animation */
.fxlm-price-flash,
.bt-price-update { animation: none !important; }
/* Scroll-reveal elements — show immediately */
.bt-anim-fade-up,
.bt-card-reveal,
.bt-anim-slide-in {
opacity: 1 !important;
transform: none !important;
animation: none !important;
}
}
/* ============================================================
7. HIGH CONTRAST MODE
============================================================ */
@media (prefers-contrast: more) {
:root {
--bt-bg: #000000;
--bt-bg-elev: #0d0d0d;
--bt-text: #ffffff;
--bt-text-2: #e0e0e0;
--bt-text-3: #c0c0c0;
--bt-accent: #00ffcc; /* brighter for forced contrast */
--bt-danger: #ff6680;
}
/* Boost border visibility */
.fxlm-card,
.bt-card,
.bt-panel,
.fxlm-table,
.bt-cat-table {
border: 1px solid #555 !important;
}
/* Ensure focus rings are visible */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
outline: 3px solid #00ffcc !important;
outline-offset: 3px !important;
}
}
/* ============================================================
8. FORCED COLOURS (Windows High Contrast mode)
============================================================ */
@media (forced-colors: active) {
/* Ensure custom colours don't override system palette */
.bt-badge,
.fxlm-badge-up,
.fxlm-badge-down {
forced-color-adjust: none;
border: 1px solid ButtonText;
}
a:focus-visible,
button:focus-visible {
outline: 3px solid Highlight !important;
}
}
|