/* ========================================================================== BALOCH SM — ACCESSIBILITY SYSTEM ========================================================================== FILE: /public_html/assets/css/accessibility.css WEBSITE: https://investt.online PROJECT: Baloch SM Trading Intelligence Platform VERSION: 1.0.0 ========================================================================== INTEGRATED APPLICATION AREAS PUBLIC ------ /index.php /login.php /signup.php /logout.php /offline.html TRADING ------- /dashboard.php /api/index.php /api/events.php ADMINISTRATION -------------- /admin/index.php /admin/login.php /admin/logout.php ========================================================================== EXISTING ELEMENT IDENTIFIERS #market-tabs #pair-select #tf-select #price-chart #recent-signals #economic-events #bell-button #bell-count #notice-panel #notice-backdrop #signal-popup-stack #receipt-modal #admin-authenticator-code ========================================================================== STYLESHEET LOAD ORDER reset.css tokens.css themes/{active-theme}.css themes/market-colors.css layout.css components.css page-specific CSS notifications.css signal-receipt.css responsive.css accessibility.css motion/reduced-motion.css ========================================================================== ACCESSIBILITY GOALS - Keyboard-operable controls - Visible keyboard focus - Screen-reader utility classes - Skip-navigation links - Clear form validation feedback - Accessible market tabs - Accessible notification presentation - Readable signal receipts - Responsive text scaling - High-contrast presentation - Forced-colors compatibility - Reduced-motion support - Touch-friendly controls - Usable horizontal scrolling - Correct hidden-element behavior - No color-only status dependency ========================================================================== IMPORTANT LIMITATIONS CSS cannot: - Create accessible names for unlabeled controls. - Announce messages through screen readers by itself. - Trap focus inside a custom modal. - Handle Escape key presses. - Implement arrow-key tab navigation. - Validate password or MFA security. - Establish market authorization. - Verify the existence of a signal. - Determine notification acknowledgement. - Calculate a CPI countdown. - Create accessible market data descriptions. These behaviors must be implemented by their corresponding HTML, JavaScript and private services. ========================================================================== */ /* ========================================================================== 01. ACCESSIBILITY DESIGN TOKENS ========================================================================== Reuse existing Baloch SM design tokens. Theme-specific colors remain controlled by the active visual theme rather than a second independent palette. ========================================================================== */ :root { --bsm-a11y-focus-color: var(--bsm-focus-color); --bsm-a11y-focus-width: var(--bsm-focus-width); --bsm-a11y-focus-offset: var(--bsm-focus-offset); --bsm-a11y-focus-shadow: var(--bsm-focus-shadow); --bsm-a11y-target-size: var(--bsm-touch-target-min); --bsm-a11y-link-color: var(--bsm-text-link); --bsm-a11y-error-color: var(--bsm-color-danger); --bsm-a11y-success-color: var(--bsm-color-success); --bsm-a11y-warning-color: var(--bsm-color-warning); --bsm-a11y-disabled-opacity: var(--bsm-opacity-disabled); --bsm-a11y-skip-background: var(--bsm-bg-surface-raised); --bsm-a11y-skip-text: var(--bsm-text-primary); --bsm-a11y-visible-border: var(--bsm-border-strong); } /* ========================================================================== 02. ROOT ACCESSIBILITY FOUNDATIONS ========================================================================== Preserve native text resizing. Never restrict browser zoom. The HTML viewport must not disable user scaling. ========================================================================== */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { overflow-wrap: normal; } /* ========================================================================== 03. SCREEN-READER-ONLY UTILITY ========================================================================== Supported class names: .sr-only .visually-hidden .screen-reader-only .a11y-only These hide content visually while preserving it for assistive technologies. Appropriate uses: - Extra notification descriptions - Chart summaries - Market clue counts - Form guidance - Icon-button accessible text Do not use these classes to hide unauthorized content. ========================================================================== */ .sr-only, .visually-hidden, .screen-reader-only, .a11y-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; border: 0 !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; } /* ========================================================================== 04. FOCUSABLE VISUALLY HIDDEN CONTENT ========================================================================== Some accessibility utilities should become visible when a keyboard user focuses them. Example: The corresponding HTML anchor must actually exist. ========================================================================== */ .sr-only-focusable:focus, .sr-only-focusable:focus-visible, .visually-hidden-focusable:focus, .visually-hidden-focusable:focus-visible { position: static !important; width: auto !important; height: auto !important; padding: var(--bsm-space-3) !important; margin: 0 !important; overflow: visible !important; clip: auto !important; clip-path: none !important; white-space: normal !important; } /* ========================================================================== 05. SKIP NAVIGATION LINKS ========================================================================== Recommended existing/future HTML: The target should be:
CSS cannot insert either element into the document. ========================================================================== */ .skip-link, .skip-to-content, .skip-navigation { position: fixed; inset-block-start: calc( var(--bsm-space-3) + var(--bsm-safe-top) ); inset-inline-start: calc( var(--bsm-space-3) + var(--bsm-safe-left) ); z-index: var(--bsm-z-critical); display: inline-flex; align-items: center; justify-content: center; min-height: var(--bsm-a11y-target-size); max-width: calc(100vw - 24px); padding: var(--bsm-space-3) var(--bsm-space-4); border: 2px solid var(--bsm-a11y-focus-color); border-radius: var(--bsm-radius-md); background-color: var(--bsm-a11y-skip-background); color: var(--bsm-a11y-skip-text); font-size: var(--bsm-text-base); font-weight: var(--bsm-weight-bold); text-decoration: underline; box-shadow: var(--bsm-shadow-lg); transform: translateY(-200vh); pointer-events: none; } /* ========================================================================== 06. FOCUSED SKIP LINK ========================================================================== */ .skip-link:focus, .skip-link:focus-visible, .skip-to-content:focus, .skip-to-content:focus-visible, .skip-navigation:focus, .skip-navigation:focus-visible { transform: translateY(0); pointer-events: auto; outline: var(--bsm-a11y-focus-width) solid var(--bsm-a11y-focus-color); outline-offset: 2px; } /* ========================================================================== 07. MAIN CONTENT FOCUS TARGET ========================================================================== Support skip navigation and programmatic section focus. This adds a visible focus cue but does not automatically change the user's focus. ========================================================================== */ #main-content, #main, main[tabindex="-1"] { scroll-margin-block-start: calc( var(--bsm-header-height) + var(--bsm-space-4) ); } #main-content:focus-visible, #main:focus-visible, main[tabindex="-1"]:focus-visible { outline: var(--bsm-a11y-focus-width) solid var(--bsm-a11y-focus-color); outline-offset: 3px; } /* ========================================================================== 08. GLOBAL KEYBOARD FOCUS ========================================================================== Applies to native and custom interactive elements. Keyboard users must be able to locate their active control at all times. Existing tokens.css defines the focus color, width, and offset. Never globally remove outlines. ========================================================================== */ :where( a[href], button, input, textarea, select, summary, [role="button"], [role="tab"], [role="menuitem"], [role="option"], [role="checkbox"], [role="radio"], [role="switch"], [tabindex]:not([tabindex="-1"]) ):focus-visible { outline: var(--bsm-a11y-focus-width) solid var(--bsm-a11y-focus-color); outline-offset: var(--bsm-a11y-focus-offset); } /* ========================================================================== 09. KEYBOARD FOCUS FOR ICON CONTROLS ========================================================================== Existing controls include: #bell-button .password-toggle .notification-close .signal-popup-close .receipt-close .admin-nav-link ========================================================================== */ :where( #bell-button, .password-toggle, .show-password-toggle, .notification-close, .notice-close, .signal-popup-close, .receipt-close, .modal-close, .dialog-close, .admin-nav-link ):focus-visible { outline: var(--bsm-a11y-focus-width) solid var(--bsm-a11y-focus-color); outline-offset: 3px; box-shadow: var(--bsm-a11y-focus-shadow); } /* ========================================================================== 10. FOCUS WITHIN FORM GROUPS ========================================================================== A subtle border cue helps identify the active input. Do not modify field content or override error state. ========================================================================== */ :where( .field, .form-field, .input-group, .password-field, .password-input-wrap ):focus-within { position: relative; } :where( .field, .form-field, .input-group ):focus-within > label { color: var(--bsm-text-primary); } /* ========================================================================== 11. AUTHENTICATION FORM ACCESSIBILITY ========================================================================== */ .auth-form label, .admin-form label, .payment-form label, .subscription-form label { line-height: var(--bsm-leading-normal); } .auth-form input, .auth-form select, .auth-form textarea { max-width: 100%; } .auth-form :where( input, select, textarea ):focus-visible { border-color: var(--bsm-a11y-focus-color); outline: 2px solid var(--bsm-a11y-focus-color); outline-offset: 2px; } /* ========================================================================== 12. INPUT ERROR STATES ========================================================================== [aria-invalid="true"] must reflect genuine validation. Do not mark untouched fields as errors simply because the user has not submitted the form. Actual error messages must be written in the DOM and associated through aria-describedby/aria-errormessage. ========================================================================== */ :where( input, select, textarea )[aria-invalid="true"] { border-color: var(--bsm-a11y-error-color); background-color: var(--bsm-color-danger-soft); } :where( input, select, textarea )[aria-invalid="true"]:focus-visible { outline-color: var(--bsm-a11y-error-color); box-shadow: 0 0 0 3px var(--bsm-color-danger-soft); } /* ========================================================================== 13. FORM VALIDATION MESSAGES ========================================================================== */ .field-error, .form-error, .input-error, .validation-error { display: block; max-width: 100%; color: var(--bsm-a11y-error-color); font-size: var(--bsm-text-sm); font-weight: var(--bsm-weight-semibold); line-height: var(--bsm-leading-relaxed); overflow-wrap: break-word; } /* ========================================================================== 14. SUCCESS AND WARNING MESSAGES ========================================================================== Success styling only applies after actual server or validated frontend confirmation. The browser cannot infer authentication success from CSS. ========================================================================== */ .field-success, .validation-success { color: var(--bsm-a11y-success-color); font-size: var(--bsm-text-sm); font-weight: var(--bsm-weight-semibold); } .field-warning, .validation-warning { color: var(--bsm-a11y-warning-color); font-size: var(--bsm-text-sm); } /* ========================================================================== 15. FORM GUIDANCE AND DESCRIPTIONS ========================================================================== */ :where( .field-help, .form-help, .help-text, .auth-disclaimer, .payment-security-note, .receipt-disclaimer ) { line-height: var(--bsm-leading-relaxed); overflow-wrap: break-word; } /* ========================================================================== 16. PASSWORD VISIBILITY CONTROL ========================================================================== Existing classes: .password-toggle .show-password-toggle Actual password visibility must be handled by the corresponding JavaScript module. Accessible button text and aria-pressed are required from the frontend. CSS must not expose passwords. ========================================================================== */ .password-toggle, .show-password-toggle { min-width: var(--bsm-a11y-target-size); min-height: var(--bsm-a11y-target-size); } .password-toggle[aria-pressed="true"], .show-password-toggle[aria-pressed="true"] { border-color: var(--bsm-color-primary-border); background-color: var(--bsm-color-primary-soft); } /* ========================================================================== 17. ADMINISTRATOR MFA FIELD ========================================================================== Existing: #admin-authenticator-code Supports six-digit visual entry. The private administrator MFA service remains responsible for validation and attempt restrictions. ========================================================================== */ #admin-authenticator-code { direction: ltr; text-align: center; font-variant-numeric: tabular-nums; font-variant-ligatures: none; max-width: 100%; } #admin-authenticator-code:focus-visible { outline: 3px solid var(--bsm-a11y-focus-color); outline-offset: 3px; } /* ========================================================================== 18. DISABLED CONTROLS ========================================================================== Native disabled controls must be visibly distinct. aria-disabled alone is not a functional disabling mechanism; JavaScript must reject prohibited actions. ========================================================================== */ :where( button, input, select, textarea ):disabled { opacity: var(--bsm-a11y-disabled-opacity); cursor: not-allowed; } :where( button, a, [role="button"], [role="tab"] )[aria-disabled="true"] { opacity: var(--bsm-a11y-disabled-opacity); cursor: not-allowed; } /* ========================================================================== 19. LOADING / BUSY STATE ========================================================================== aria-busy tells assistive technology that a region is being updated. CSS provides a presentation cue only. JavaScript must update the attribute when a real loading process starts and completes. ========================================================================== */ :where( .auth-form, .payment-form, .admin-form, .dashboard-card, .notification-list, .receipt-content )[aria-busy="true"] { cursor: progress; } /* ========================================================================== 20. BUTTON AND INTERACTIVE TARGET SIZE ========================================================================== Provide generous action targets in key workflows. Small badge text and ordinary inline links retain their natural dimensions. Touchscreen-specific adjustments appear below. ========================================================================== */ :where( .btn, .icon-button, .btn-icon, .password-toggle, #bell-button, .notification-close, .notice-close, .signal-popup-close, .receipt-close, .modal-close, .dialog-close, .admin-nav-link, .market-tab, .timeframe-button ) { min-height: var(--bsm-a11y-target-size); } /* ========================================================================== 21. ACCESSIBLE LINKS ========================================================================== Links within text should remain visually identifiable. Navigation buttons may use component-specific styling. Avoid relying on color alone for ordinary text links. ========================================================================== */ :where( .auth-links, .receipt-description, .receipt-disclaimer, .notification-message, .auth-disclaimer ) a[href] { color: var(--bsm-a11y-link-color); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } /* ========================================================================== 22. READABLE SELECTED TEXT ========================================================================== */ ::selection { background-color: var(--bsm-color-primary); color: var(--bsm-text-on-brand); } /* ========================================================================== 23. MARKET TAB KEYBOARD ACCESSIBILITY ========================================================================== Existing: #market-tabs Recommended frontend ARIA pattern: role="tablist" role="tab" aria-selected="true|false" tabindex="0|-1" Arrow-key navigation must be implemented in JavaScript. Changing the selected market must update authorized API and SSE subscriptions. ========================================================================== */ #market-tabs [role="tab"], .market-tabs [role="tab"], .market-tab { min-height: var(--bsm-a11y-target-size); } #market-tabs [role="tab"]:focus-visible, .market-tabs [role="tab"]:focus-visible, .market-tab:focus-visible { outline: 3px solid var(--bsm-a11y-focus-color); outline-offset: 2px; box-shadow: var(--bsm-a11y-focus-shadow); } /* ========================================================================== 24. SELECTED MARKET VISUAL STATE ========================================================================== The selected state comes from the authenticated frontend and reflects the backend-authorized market. CSS cannot decide which market is authorized. ========================================================================== */ #market-tabs [aria-selected="true"], .market-tabs [aria-selected="true"], .market-tab[aria-selected="true"] { border-width: 2px; border-color: var(--bsm-color-primary-border); background-color: var(--bsm-market-tab-active); color: var(--bsm-text-primary); } /* ========================================================================== 25. MARKET CLUE ACCESSIBILITY ========================================================================== Other-market clues must have descriptive accessible text produced by the frontend. Example of an accessible meaning: "Two BUY notifications in this market" The visible dots are supplementary only. CSS does not generate signal counts or pair details. ========================================================================== */ #market-tabs .market-clue, #market-tabs .market-clue-dot, .market-tabs .market-clue { flex-shrink: 0; } #market-tabs .market-clue-count, .market-tabs .market-clue-count { font-variant-numeric: tabular-nums; font-weight: var(--bsm-weight-bold); } /* ========================================================================== 26. PAIR AND TIMEFRAME CONTROLS ========================================================================== Existing: #pair-select #tf-select Native keyboard selection must remain functional. Unsupported timeframes remain absent from the options. ========================================================================== */ #pair-select, #tf-select { max-width: 100%; } #pair-select:focus-visible, #tf-select:focus-visible { outline: 3px solid var(--bsm-a11y-focus-color); outline-offset: 2px; } /* ========================================================================== 27. HORIZONTAL SCROLL NAVIGATION ========================================================================== Market tabs, timeframe rows and administrator navigation may scroll horizontally on mobile. Avoid hiding their scrollbar entirely. The frontend can move focus into view when a user navigates with arrow keys. ========================================================================== */ #market-tabs, .market-tabs, .timeframe-tabs, .timeframe-list, .admin-nav, .notification-filters { scrollbar-width: thin; overscroll-behavior-inline: contain; } /* ========================================================================== 28. FINANCIAL CHART ACCESSIBILITY ========================================================================== Existing: #price-chart SVG/canvas data alone does not provide adequate screen-reader descriptions. The frontend should provide a textual chart summary and, where appropriate, an accessible data table. The text must originate from verified OHLCV data. ========================================================================== */ #price-chart { min-width: 0; } #price-chart:focus-visible, #price-chart [tabindex="0"]:focus-visible { outline: 3px solid var(--bsm-a11y-focus-color); outline-offset: 3px; } /* ========================================================================== 29. CHART SUMMARY ========================================================================== Intended for a real DOM element populated by chart JS. Do not create fictional chart descriptions through CSS. ========================================================================== */ .chart-accessible-summary, .chart-summary-text, .chart-data-description { color: var(--bsm-text-secondary); font-size: var(--bsm-text-sm); line-height: var(--bsm-leading-relaxed); overflow-wrap: break-word; } /* ========================================================================== 30. ACCESSIBLE CHART DATA TABLE ========================================================================== This can hold verified candle values and timestamps. Keep the table accessible and independently scrollable when present. It should not be populated with placeholder market data. ========================================================================== */ .chart-accessible-table-wrap { width: 100%; min-width: 0; overflow-x: auto; scrollbar-width: thin; } .chart-accessible-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; } .chart-accessible-table th, .chart-accessible-table td { padding: var(--bsm-space-2) var(--bsm-space-3); border-bottom: 1px solid var(--bsm-border-subtle); text-align: start; } /* ========================================================================== 31. CHART UNAVAILABLE STATE ========================================================================== A disconnected or unverified market-data feed must remain visibly and textually distinguishable from a healthy feed. Live-status wording must originate from real feed state. ========================================================================== */ .chart-unavailable, .chart-error, .chart-no-data-overlay, .chart-state-overlay { line-height: var(--bsm-leading-relaxed); } .chart-error, .chart-unavailable { border-style: solid; border-width: 2px; } /* ========================================================================== 32. NOTIFICATION BELL ACCESSIBILITY ========================================================================== Existing: #bell-button #bell-count The frontend should supply: - aria-label - aria-expanded - aria-controls="notice-panel" Unread counts are server-provided. CSS does not announce count changes. ========================================================================== */ #bell-button { min-width: var(--bsm-a11y-target-size); min-height: var(--bsm-a11y-target-size); } #bell-button:focus-visible { outline: 3px solid var(--bsm-a11y-focus-color); outline-offset: 3px; } /* ========================================================================== 33. NOTIFICATION COUNTER ========================================================================== A visual counter does not replace a descriptive accessible notification label. The frontend must update that label when unread counts actually change. ========================================================================== */ #bell-count, .notification-count, .unread-count { font-variant-numeric: tabular-nums; line-height: 1; } /* ========================================================================== 34. NOTIFICATION DRAWER ACCESSIBILITY ========================================================================== Existing: #notice-panel #notice-backdrop The frontend must: - Open intentionally. - Set correct ARIA visibility. - Manage focus. - Close on Escape where appropriate. - Restore focus to #bell-button. - Prevent focus entering the hidden drawer. CSS cannot implement focus trapping. ========================================================================== */ #notice-panel, .notice-panel, .notification-panel { overscroll-behavior: contain; } #notice-panel:focus-visible, .notice-panel:focus-visible, .notification-panel:focus-visible { outline: 3px solid var(--bsm-a11y-focus-color); outline-offset: -3px; } /* ========================================================================== 35. NOTIFICATION PANEL CONTROLS ========================================================================== */ :where( #notice-panel, .notice-panel, .notification-panel ) :where( button, a[href], [role="button"] ):focus-visible { outline: var(--bsm-a11y-focus-width) solid var(--bsm-a11y-focus-color); outline-offset: 3px; } /* ========================================================================== 36. NOTIFICATION HISTORY ACCESSIBILITY ========================================================================== Receipt, read, unread, dismissed and delivery states must be represented in actual HTML or accessible labels. CSS color alone must not communicate those states. ========================================================================== */ .notification-item, .notice-item, .notification-history-item { line-height: var(--bsm-leading-normal); } .notification-item:focus-within, .notice-item:focus-within, .notification-history-item:focus-within { border-color: var(--bsm-a11y-focus-color); } /* ========================================================================== 37. UNREAD NOTIFICATION DISTINCTION ========================================================================== */ .notification-item.is-unread, .notice-item.is-unread, .notification-item[data-read="false"] { border-width: 2px; } /* ========================================================================== 38. BUY / SELL NOTIFICATION ACCESSIBILITY ========================================================================== BUY and SELL must always have readable direction labels. The frontend must not render a color-only trading signal. ========================================================================== */ .signal-popup-direction, .signal-alert-direction, .receipt-direction, .direction-badge { font-weight: var(--bsm-weight-extrabold); letter-spacing: var(--bsm-tracking-wide); } /* ========================================================================== 39. FULL SIGNAL POPUP ACCESSIBILITY ========================================================================== Existing: #signal-popup-stack Signals may arrive for ANY pair in the selected market. Other-market messages remain market-tab clues only. A popup must not force chart switching. The frontend must provide a suitable live announcement, avoiding repetitive announcements on reconnection. ========================================================================== */ #signal-popup-stack, .signal-popup-stack, .signal-popup-container { overscroll-behavior: contain; } #signal-popup-stack .signal-popup, .signal-popup-stack .signal-popup { min-width: 0; } /* ========================================================================== 40. POPUP FOCUS CONTROL ========================================================================== */ :where( .signal-popup, .trade-signal-popup, .signal-alert-popup ) :where( button, a[href] ):focus-visible { outline: 3px solid var(--bsm-a11y-focus-color); outline-offset: 2px; } /* ========================================================================== 41. THIRTY-SECOND POPUP PROGRESS ========================================================================== The visual indicator is supplementary. The frontend must use its actual 30-second timer. The indicator must not be the only source of information about remaining popup display time. Avoid announcing every progress tick to screen readers. ========================================================================== */ .signal-popup-progress, .popup-progress, .signal-alert-progress { min-height: var(--bsm-signal-popup-progress-height); } /* ========================================================================== 42. SIGNAL RECEIPT MODAL ACCESSIBILITY ========================================================================== Existing: #receipt-modal The frontend must: - Validate receipt authorization. - Fetch only the member-owned receipt. - Assign accessible title/description references. - Move focus into the receipt dialog. - Trap focus when using a custom modal. - Support Escape where appropriate. - Restore focus after close. - Preserve signal timestamps and direction labels. A native may provide useful built-in behavior, but still requires correct opening and closing code. ========================================================================== */ #receipt-modal { overscroll-behavior: contain; } #receipt-modal:focus-visible { outline: 3px solid var(--bsm-a11y-focus-color); outline-offset: -3px; } /* ========================================================================== 43. RECEIPT INTERACTIVE ELEMENT FOCUS ========================================================================== */ #receipt-modal :where( button, a[href], input, textarea, select, summary ):focus-visible { outline: 3px solid var(--bsm-a11y-focus-color); outline-offset: 3px; } /* ========================================================================== 44. RECEIPT READABILITY ========================================================================== */ .receipt-description, .receipt-evidence-description, .receipt-disclaimer, .receipt-outcome-note, .receipt-risk-warning { line-height: var(--bsm-leading-relaxed); } .receipt-price, .receipt-entry, .receipt-stop-loss, .receipt-take-profit, .receipt-confidence-value { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } /* ========================================================================== 45. RECEIPT OUTCOME STATES ========================================================================== WIN, LOSS, pending and invalidated outcomes require real outcome records. The frontend should render actual text labels. CSS does not fabricate outcome data. ========================================================================== */ .receipt-outcome, .receipt-result { line-height: var(--bsm-leading-relaxed); } .receipt-outcome[data-status="win"], .receipt-outcome[data-status="loss"], .receipt-outcome[data-status="pending"], .receipt-outcome[data-status="invalidated"] { border-width: 2px; } /* ========================================================================== 46. ECONOMIC EVENT ACCESSIBILITY ========================================================================== Existing: #economic-events Event dates, affected currencies, importance and release status must be provided as readable text. A colored impact border is supplemental. ========================================================================== */ #economic-events, .economic-events, .economic-calendar { min-width: 0; } .economic-event, .economic-event-card, .news-event { line-height: var(--bsm-leading-relaxed); } /* ========================================================================== 47. CPI COUNTDOWN ACCESSIBILITY ========================================================================== A rapidly changing countdown can overwhelm screen readers. The frontend should avoid announcing every second. Important status changes, such as release confirmation or rescheduling, may be announced separately. Actual event times must come from verified sources. ========================================================================== */ .cpi-countdown, .economic-countdown, .countdown-grid { font-variant-numeric: tabular-nums; } .countdown-value { font-variant-numeric: tabular-nums lining-nums; } .countdown-label { font-weight: var(--bsm-weight-semibold); } /* ========================================================================== 48. COUNTDOWN SCREEN-READER STATUS ========================================================================== The frontend may render a separate human-readable accessible countdown summary. A hidden summary should not be updated every second in an assertive live region. ========================================================================== */ .countdown-accessible-summary, .economic-time-description { color: var(--bsm-text-secondary); font-size: var(--bsm-text-sm); line-height: var(--bsm-leading-relaxed); } /* ========================================================================== 49. ADMINISTRATOR NAVIGATION ACCESSIBILITY ========================================================================== Existing: .admin-nav .admin-nav-link PHP is responsible for permission-filtered links. The current section should have aria-current="page". CSS cannot grant navigation permissions. ========================================================================== */ .admin-nav-link { min-height: var(--bsm-a11y-target-size); } .admin-nav-link:focus-visible { outline: 3px solid var(--bsm-a11y-focus-color); outline-offset: 2px; } /* ========================================================================== 50. ADMINISTRATOR CURRENT PAGE ========================================================================== */ .admin-nav-link[aria-current="page"], .admin-nav-link.is-active { border-width: 2px; font-weight: var(--bsm-weight-bold); } /* ========================================================================== 51. MOBILE ADMINISTRATOR NAVIGATION ========================================================================== Existing layout.css/admin.css provide an accessible, scrollable primary nav when the screen is narrow. Do not hide that navigation behind an unavailable JavaScript-only control. ========================================================================== */ @media (max-width: 900px) { .admin-app .admin-nav { scrollbar-width: thin; } .admin-app .admin-nav-link { min-height: var(--bsm-a11y-target-size); } } /* ========================================================================== 52. ADMINISTRATOR TABLE ACCESSIBILITY ========================================================================== Tables should use: - when appropriate. - for column headers. - for row headers. - Readable status text. Horizontal scrolling must remain available on mobile. ========================================================================== */ .admin-table-scroll { overflow-x: auto; scrollbar-width: thin; } .admin-table-scroll:focus-visible { outline: 3px solid var(--bsm-a11y-focus-color); outline-offset: 2px; } .admin-table caption, .chart-accessible-table caption { padding: var(--bsm-space-3); color: var(--bsm-text-secondary); font-size: var(--bsm-text-sm); text-align: start; } /* ========================================================================== 53. ADMINISTRATOR TABLE HEADERS ========================================================================== */ .admin-table th, .chart-accessible-table th { font-weight: var(--bsm-weight-bold); } .admin-table tbody tr:focus-within { background-color: var(--bsm-bg-hover); } /* ========================================================================== 54. ADMINISTRATOR FORM ACCESSIBILITY ========================================================================== */ .admin-form :where( input, select, textarea ):focus-visible { border-color: var(--bsm-a11y-focus-color); outline: 2px solid var(--bsm-a11y-focus-color); outline-offset: 2px; } /* ========================================================================== 55. DESTRUCTIVE ADMINISTRATOR ACTIONS ========================================================================== Danger styling does not replace confirmation, authorization or durable audit logging. ========================================================================== */ .admin-app .btn-danger:focus-visible { outline: 3px solid var(--bsm-a11y-focus-color); outline-offset: 3px; } /* ========================================================================== 56. PAYMENT REVIEW ACCESSIBILITY ========================================================================== Manual payment confirmation requires independent checks. Color should not be the only indication of: - Awaiting review - Verified - Rejected These statuses must be rendered as readable text. ========================================================================== */ .payment-review-status, .admin-payment-status, .payment-status { line-height: var(--bsm-leading-relaxed); } .payment-reference, .transaction-id, .admin-payment-tid { user-select: text; overflow-wrap: anywhere; } /* ========================================================================== 57. LIVE REGIONS ========================================================================== The following utility classes identify application-owned status and alert regions. HTML or JavaScript must set the correct role/aria-live. CSS itself does not activate announcements. ========================================================================== */ .a11y-status-region, .a11y-alert-region, .notification-live-region, .market-status-region { max-width: 100%; overflow-wrap: break-word; } /* ========================================================================== 58. VISUAL LIVE-REGION FEEDBACK ========================================================================== */ .a11y-status-region:not(.sr-only):not(.visually-hidden), .a11y-alert-region:not(.sr-only):not(.visually-hidden) { line-height: var(--bsm-leading-relaxed); } /* ========================================================================== 59. TOOLTIP ACCESSIBILITY CORRECTION ========================================================================== IMPORTANT EXISTING INTEGRATION FIX: components.css defines tooltip appearance but does not hide ordinary tooltip content by default. This file ensures tooltips are not permanently visible. Show a tooltip when: - A keyboard user focuses its component. - JavaScript explicitly opens it. - A device with true hover support hovers over it. The tooltip must have an accessible text relationship such as aria-describedby. Essential information must never exist only in a tooltip. ========================================================================== */ .tooltip .tooltip-content { visibility: hidden; opacity: 0; pointer-events: none; transition: opacity var(--bsm-motion-fast) var(--bsm-ease-out); } /* ========================================================================== 60. KEYBOARD-ACCESSIBLE TOOLTIP ========================================================================== */ .tooltip:focus-within .tooltip-content, .tooltip.is-open .tooltip-content, .tooltip[data-state="open"] .tooltip-content { visibility: visible; opacity: 1; } /* ========================================================================== 61. HOVER-CAPABLE TOOLTIP ========================================================================== */ @media (hover: hover) and (pointer: fine) { .tooltip:hover .tooltip-content { visibility: visible; opacity: 1; } } /* ========================================================================== 62. TOOLTIP RESPONSIVENESS ========================================================================== */ .tooltip-content { max-width: min(280px, 80vw); overflow-wrap: break-word; line-height: var(--bsm-leading-normal); } /* ========================================================================== 63. DROPDOWN MENU ACCESSIBILITY ========================================================================== Application code must control dropdown visibility with the HTML hidden attribute or an explicit state. Avoid overriding native hidden behavior. Keyboard navigation must not depend on hover alone. ========================================================================== */ .dropdown-menu[hidden] { display: none !important; } .dropdown-menu :where( a, button, [role="menuitem"] ):focus-visible { outline: 2px solid var(--bsm-a11y-focus-color); outline-offset: 2px; } /* ========================================================================== 64. EXPANDABLE CONTENT ========================================================================== Native
and retain browser keyboard behavior without JavaScript. ========================================================================== */ details > summary { min-height: var(--bsm-a11y-target-size); cursor: pointer; } details > summary:focus-visible { outline: 3px solid var(--bsm-a11y-focus-color); outline-offset: 3px; } /* ========================================================================== 65. ACCESSIBLE DIALOG STATES ========================================================================== Native dialog elements must remain hidden until open. Do not force dialogs into display:grid when closed. ========================================================================== */ dialog:not([open]) { display: none !important; } dialog[open]:focus-visible { outline: 3px solid var(--bsm-a11y-focus-color); outline-offset: -3px; } /* ========================================================================== 66. ACCESSIBLE TARGET HIGHLIGHTING ========================================================================== Anchor navigation should not place the target behind sticky navigation headers. ========================================================================== */ :where( section, article, main, .admin-card, .dashboard-section )[id] { scroll-margin-block-start: calc( var(--bsm-header-height) + var(--bsm-space-4) ); } /* ========================================================================== 67. REASONABLE TEXT LINE LENGTH ========================================================================== Long paragraphs are more readable when constrained. Do not constrain tables, charts, or financial value rows. ========================================================================== */ :where( .auth-disclaimer, .receipt-disclaimer, .performance-disclaimer, .payment-security-note, .receipt-evidence-description ) { max-width: 78ch; } /* ========================================================================== 68. TABLET ACCESSIBILITY ========================================================================== */ @media (max-width: 1024px) { .skip-link, .skip-to-content { max-width: calc(100vw - 24px); } .chart-accessible-table-wrap { overflow-x: auto; } .admin-table-scroll { overflow-x: auto; } } /* ========================================================================== 69. MOBILE ACCESSIBILITY ========================================================================== */ @media (max-width: 767px) { .skip-link, .skip-to-content, .skip-navigation { inset-block-start: calc( var(--bsm-space-2) + var(--bsm-safe-top) ); inset-inline-start: calc( var(--bsm-space-2) + var(--bsm-safe-left) ); } #market-tabs [role="tab"], .market-tab, .admin-nav-link, .timeframe-button { min-height: var(--bsm-a11y-target-size); } .auth-form :where( input, select, textarea ), .admin-form :where( input, select, textarea ), .payment-form :where( input, select, textarea ) { font-size: 16px; } .notification-item, .notice-item { line-height: var(--bsm-leading-relaxed); } .receipt-row, .receipt-field { gap: var(--bsm-space-2); } .tooltip-content { max-width: min(240px, 75vw); } } /* ========================================================================== 70. TOUCHSCREEN ACCESSIBILITY ========================================================================== */ @media (pointer: coarse) { :where( .btn, button, select, summary, .market-tab, .timeframe-button, .admin-nav-link ) { min-height: var(--bsm-a11y-target-size); } :where( #bell-button, .password-toggle, .notification-close, .signal-popup-close, .receipt-close ) { min-width: var(--bsm-a11y-target-size); min-height: var(--bsm-a11y-target-size); } } /* ========================================================================== 71. VERY NARROW SCREENS ========================================================================== Important for browser zoom and split-screen layouts. Focus rings and essential labels must remain visible. ========================================================================== */ @media (max-width: 360px) { .skip-link, .skip-to-content { font-size: var(--bsm-text-sm); padding: var(--bsm-space-2); } .auth-form label, .admin-form label, .payment-form label { overflow-wrap: break-word; } .receipt-actions, .notification-actions, .admin-action-row { flex-wrap: wrap; } } /* ========================================================================== 72. REDUCED MOTION PREFERENCE ========================================================================== Do not remove essential information. The actual notification timer must still run for 30 seconds under frontend application control. Disabling animation must not disable: - SSE delivery - Signal acknowledgements - Economic countdown calculations - Receipt loading - Focus management - Market authorization ========================================================================== */ @media (prefers-reduced-motion: reduce) { html, body { scroll-behavior: auto; } .skip-link, .skip-to-content, .skip-navigation { transition: none; } .tooltip-content { transition: none; } .market-tab, .admin-nav-link, .notification-item, .receipt-card { transition-duration: 0ms; } .signal-popup-progress::after, .popup-progress::after { animation: none !important; } } /* ========================================================================== 73. REDUCED TRANSPARENCY ========================================================================== Some operating systems and browsers expose a reduced-transparency preference. Use a solid readable surface instead of glass effects. The active theme supplies the actual surface color. ========================================================================== */ @media (prefers-reduced-transparency: reduce) { .glass-panel { -webkit-backdrop-filter: none; backdrop-filter: none; background-color: var(--bsm-bg-surface); } #notice-backdrop, .notice-backdrop, .notification-backdrop { -webkit-backdrop-filter: none; backdrop-filter: none; } } /* ========================================================================== 74. HIGH CONTRAST — GLOBAL ========================================================================== */ @media (prefers-contrast: more) { :root { --bsm-a11y-focus-width: 4px; --bsm-a11y-focus-offset: 3px; } :where( .card, .panel, .auth-card, .admin-card, .dashboard-card, .notification-item, .signal-popup, .receipt-card ) { border-width: 2px; } :where( .field-help, .auth-disclaimer, .receipt-disclaimer, .metric-label, .countdown-label ) { color: var(--bsm-text-secondary); } } /* ========================================================================== 75. HIGH CONTRAST — TRADING DIRECTIONS ========================================================================== */ @media (prefers-contrast: more) { .signal-popup.is-buy, .signal-popup.is-sell, .receipt.is-buy, .receipt.is-sell { border-width: 3px; } .receipt-direction, .signal-popup-direction { border-width: 2px; } .market-clue, .market-clue-dot, .status-dot { outline: 1px solid currentColor; outline-offset: 2px; } } /* ========================================================================== 76. HIGH CONTRAST — FORM CONTROLS ========================================================================== */ @media (prefers-contrast: more) { :where( input, textarea, select, button ) { border-width: 2px; } :where( input, textarea, select )[aria-invalid="true"] { border-width: 3px; } } /* ========================================================================== 77. WINDOWS / SYSTEM FORCED COLORS ========================================================================== Use semantic system colors: Canvas CanvasText ButtonFace ButtonText Field FieldText Highlight HighlightText LinkText GrayText Do not globally set forced-color-adjust:none. The operating system should retain control of high-contrast rendering. ========================================================================== */ @media (forced-colors: active) { :root { --bsm-a11y-focus-color: Highlight; --bsm-a11y-visible-border: CanvasText; } :where( .card, .panel, .dashboard-card, .admin-card, .auth-card, .notification-item, .signal-popup, .receipt-card ) { border-color: CanvasText; background-image: none; box-shadow: none; } :where( a[href], .text-link, .auth-links a ) { color: LinkText; } } /* ========================================================================== 78. FORCED COLORS — INTERACTIVE CONTROLS ========================================================================== */ @media (forced-colors: active) { :where( button, .btn, .icon-button, .notification-close, .receipt-close ) { border-color: ButtonText; } :where( input, select, textarea ) { border-color: FieldText; background-color: Field; color: FieldText; } :where( button, input, select, textarea, a[href], [role="tab"] ):focus-visible { outline-color: Highlight; box-shadow: none; } } /* ========================================================================== 79. FORCED COLORS — MARKET TABS ========================================================================== */ @media (forced-colors: active) { #market-tabs [aria-selected="true"], .market-tab[aria-selected="true"], .admin-nav-link[aria-current="page"] { outline: 2px solid Highlight; outline-offset: -2px; } .market-clue, .market-clue-dot, .status-dot, .notification-unread-dot { border: 2px solid CanvasText; box-shadow: none; } } /* ========================================================================== 80. FORCED COLORS — RECEIPT AND SIGNAL STATES ========================================================================== */ @media (forced-colors: active) { .signal-popup.is-buy, .signal-popup.is-sell, .receipt.is-buy, .receipt.is-sell { border-color: CanvasText; } .signal-popup-direction, .receipt-direction, .receipt-status { border-color: CanvasText; color: CanvasText; } .receipt-status[data-status="confirmed"], .receipt-status[data-status="invalidated"] { outline: 2px solid Highlight; outline-offset: 2px; } } /* ========================================================================== 81. PRINT ACCESSIBILITY ========================================================================== Printing does not bypass permissions. Hidden private content must remain hidden. Printed text must be readable on light paper without requiring decorative background gradients. ========================================================================== */ @media print { :root { color-scheme: light; } body { font-size: 11pt; line-height: 1.5; } .skip-link, .skip-to-content, .skip-navigation, .tooltip-content { display: none !important; } a[href] { text-decoration: underline; } :where( .card, .panel, .auth-card, .admin-card, .dashboard-card ) { box-shadow: none; } [hidden] { display: none !important; } } /* ========================================================================== 82. FINAL ACCESSIBILITY INTEGRATION CHECKLIST ========================================================================== NAVIGATION ---------- [x] Skip-link styling [x] Keyboard focus indicators [x] Focusable hidden-content utilities [x] Selected navigation state [x] Mobile navigation support [x] Horizontal scroll accessibility FORMS ----- [x] Authentication fields [x] Signup fields [x] Payment fields [x] Admin forms [x] Password toggle styling [x] Admin MFA input [x] Invalid form states [x] Error-message styling [x] Disabled states [x] Touch targets FOREX DASHBOARD --------------- [x] Market tab focus [x] Selected market state [x] Market clue styling [x] Pair selector focus [x] Timeframe selector focus [x] Chart keyboard focus [x] Chart summary presentation [x] Accessible data-table presentation [x] Stale/unavailable feed states NOTIFICATIONS ------------- [x] Notification bell [x] Unread counter [x] Notification drawer [x] Drawer control focus [x] Read/unread visual states [x] BUY/SELL direction labels [x] Popup action focus [x] Thirty-second progress foundation [x] Market clue accessible-description support SIGNAL RECEIPTS --------------- [x] Receipt dialog focus [x] Close button [x] Readable financial values [x] Evidence sections [x] Outcome states [x] Risk disclaimers [x] Mobile receipt scrolling ECONOMIC CALENDAR ----------------- [x] Event readability [x] CPI countdown typography [x] Impact status support [x] Accessible countdown summary styling ADMINISTRATION -------------- [x] Keyboard navigation [x] Current-page indicators [x] Scrollable record tables [x] Table caption styling [x] Form errors [x] Destructive-action focus [x] Payment review status [x] Administrator MFA focus ACCESSIBILITY MODES ------------------- [x] Screen-reader-only utilities [x] Keyboard focus [x] Browser zoom support [x] Text resizing [x] Touchscreens [x] Reduced motion [x] Reduced transparency [x] High contrast [x] Forced colors [x] Narrow viewports [x] Printing ========================================================================== REQUIRED HTML / JAVASCRIPT INTEGRATIONS ========================================================================== EXISTING HTML AND FUTURE FRONTEND MODULES MUST: 01. Provide correct labels for form fields. 02. Provide accessible names for icon-only buttons. 03. Provide skip-link targets within real page markup. 04. Associate field errors with affected inputs. 05. Implement keyboard market-tab navigation. 06. Keep actual market selection synchronized with authenticated API and SSE requests. 07. Provide readable descriptions of chart status. 08. Expose verified OHLCV data through appropriate text/table alternatives. 09. Announce important new signal notifications without repeatedly announcing duplicates. 10. Avoid revealing pair details in other-market clues. 11. Manage focus when opening notification drawers. 12. Trap focus in custom modal dialogs when appropriate. 13. Restore focus after closing drawers and receipts. 14. Handle Escape to close eligible overlays. 15. Update aria-expanded and aria-selected correctly. 16. Preserve native password-manager integration. 17. Validate administrator MFA in private PHP. 18. Avoid announcing CPI countdown changes every second. 19. Display readable BUY and SELL direction labels. 20. Never claim unavailable market feeds are LIVE. 21. Keep the logical 30-second popup timer independent of reduced-motion animation settings. 22. Never use color alone to represent trade results. ========================================================================== END OF BALOCH SM ACCESSIBILITY STYLESHEET ========================================================================== */