/* ============================================================================= Accessibility toolbar — chrome for resources/views/components/accessibility-toolbar.blade.php ----------------------------------------------------------------------------- Loads after Bootstrap and before accessibility.css, so the accessibility layer can still override anything here (high-contrast and dark modes in particular). This panel is used by the people who need it most, so it holds itself to a higher standard than the rest of the site: 44px minimum targets everywhere, a 3px focus ring that never disappears, generous line length and spacing, and nothing that depends on hover or on colour alone. Everything is written with logical properties (inline-start / block-end / padding-inline) so the whole thing mirrors when is set for Arabic, without a parallel RTL stylesheet — v1 needed style_rtl.css for exactly this reason. v1 problem this replaces: the only adjustment on offer was the OpenDyslexic font, it was rendered by a third-party widget bundle, and it was gated behind an `is_special` account flag the backend had to set. There was no panel, no keyboard path to it, and no way for a logged-out visitor to reach it at all. ========================================================================== */ :root { --a11y-ink: #10131a; --a11y-paper: #ffffff; --a11y-line: #10131a; --a11y-accent: #4338ca; --a11y-muted: #4b5563; --a11y-focus: #6253f1; --a11y-radius: 8px; } /* ----------------------------------------------------------------------------- Trigger — a fixed circular button in the block-end / inline-end corner -------------------------------------------------------------------------- */ .a11y-trigger { position: fixed; inset-block-end: 1rem; inset-inline-end: 1rem; z-index: 99997; inline-size: 56px; block-size: 56px; min-block-size: 56px; /* beats the global button min-height in accessibility.css */ padding: 0; display: flex; align-items: center; justify-content: center; background: var(--a11y-ink); color: #ffffff; border: 2px solid #ffffff; border-radius: 50%; /* A ring in the opposite tone, so the control stays visible whether it lands on the white header, the #ddd footer or a photographic banner. */ box-shadow: 0 0 0 2px var(--a11y-ink), 0 6px 18px rgb(0 0 0 / 35%); cursor: pointer; transition: transform 150ms ease-out, background-color 150ms ease-out; } .a11y-trigger svg { inline-size: 28px; block-size: 28px; } .a11y-trigger:hover { background: var(--a11y-accent); transform: scale(1.06); } .a11y-trigger:focus-visible { outline: 3px solid var(--a11y-focus); outline-offset: 4px; } /* While the panel is open the trigger would sit on top of it. */ .a11y-trigger[aria-expanded='true'] { opacity: 0; pointer-events: none; } /* ----------------------------------------------------------------------------- Panel — slides in from the inline-end edge -------------------------------------------------------------------------- */ .a11y-panel { /* Flipped for RTL below, because there is no logical equivalent of translateX. */ --a11y-slide: 105%; position: fixed; inset-block: 0; inset-inline-end: 0; z-index: 99997; inline-size: min(380px, 100vw); max-inline-size: 380px; block-size: 100dvh; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 1.25rem 1.25rem 2.5rem; background: var(--a11y-paper); color: var(--a11y-ink); border-inline-start: 3px solid var(--a11y-line); box-shadow: -12px 0 40px rgb(0 0 0 / 35%); transform: translateX(var(--a11y-slide)); transition: transform 180ms ease-out; } html[dir='rtl'] .a11y-panel, [dir='rtl'] .a11y-panel { --a11y-slide: -105%; box-shadow: 12px 0 40px rgb(0 0 0 / 35%); } .a11y-panel.is-open { transform: translateX(0); } /* [hidden] must win over the display value the panel would otherwise take. The script removes `hidden` first and adds `.is-open` on the next frame, so the slide actually animates instead of the element appearing already in place. */ .a11y-panel[hidden] { display: none; } /* Someone who has asked for less motion gets no slide at all. */ @media (prefers-reduced-motion: reduce) { .a11y-panel, .a11y-trigger { transition: none; } } html[data-a11y-motion='reduced'] .a11y-panel, html[data-a11y-stop-animations] .a11y-panel { transition: none; } /* ----------------------------------------------------------------------------- Panel header -------------------------------------------------------------------------- */ .a11y-panel__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; padding-block-end: 0.75rem; margin-block-end: 0.75rem; border-block-end: 2px solid var(--a11y-line); } .a11y-panel__head h2 { margin: 0; padding: 0; font-size: 1.375rem; line-height: 1.3; font-weight: 700; color: var(--a11y-ink); } .a11y-panel__close { flex: 0 0 auto; inline-size: 44px; block-size: 44px; min-block-size: 44px; padding: 0; display: flex; align-items: center; justify-content: center; font-size: 1.75rem; line-height: 1; background: transparent; color: var(--a11y-ink); border: 2px solid var(--a11y-line); border-radius: var(--a11y-radius); cursor: pointer; } .a11y-panel__close:hover, .a11y-panel__close:focus { background: var(--a11y-ink); color: #ffffff; } .a11y-panel__intro { margin: 0 0 1.25rem; font-size: 0.9375rem; line-height: 1.6; color: var(--a11y-muted); max-inline-size: 42ch; /* short measure — this is instructional text */ } /* ----------------------------------------------------------------------------- Groups -------------------------------------------------------------------------- */ .a11y-group { margin: 0 0 1.5rem; padding: 1rem; border: 2px solid #d1d5db; border-radius: var(--a11y-radius); } .a11y-group > legend { /* Not a heading, so it must not be styled like one — but it does need to read as a group name. */ inline-size: auto; padding-inline: 0.5rem; margin: 0; font-size: 0.875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--a11y-ink); border: 0; } /* ----------------------------------------------------------------------------- Fields -------------------------------------------------------------------------- */ .a11y-field { display: flex; flex-direction: column; gap: 0.375rem; margin-block-end: 1.125rem; } .a11y-field:last-child { margin-block-end: 0; } .a11y-field > label { font-size: 1rem; font-weight: 600; line-height: 1.4; color: var(--a11y-ink); margin: 0; } .a11y-field select { inline-size: 100%; min-block-size: 44px; /* WCAG 2.5.8 asks 24px; 44px is the comfortable figure */ padding-block: 0.5rem; padding-inline: 0.75rem 2.25rem; font-size: 1rem; line-height: 1.4; font-family: inherit; color: var(--a11y-ink); background-color: #ffffff; /* Chevron drawn inline so no icon font is needed; flipped for RTL below. */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 5l6 6 6-6' fill='none' stroke='%2310131a' stroke-width='2'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.75rem center; background-size: 16px; border: 2px solid var(--a11y-line); border-radius: var(--a11y-radius); appearance: none; cursor: pointer; } html[dir='rtl'] .a11y-field select, [dir='rtl'] .a11y-field select { padding-inline: 0.75rem 2.25rem; background-position: left 0.75rem center; } .a11y-field select:focus-visible, .a11y-check input[type='checkbox']:focus-visible, .a11y-actions button:focus-visible { outline: 3px solid var(--a11y-focus); outline-offset: 2px; } .a11y-hint { font-size: 0.875rem; line-height: 1.5; color: var(--a11y-muted); max-inline-size: 40ch; } /* ----------------------------------------------------------------------------- Checkboxes The whole row is the target, not just the 24px box — a 44px strip is far easier to hit with a tremor or a head pointer. -------------------------------------------------------------------------- */ .a11y-check { display: flex; align-items: center; gap: 0.75rem; min-block-size: 44px; margin-block-end: 0.25rem; padding-inline: 0.25rem; border-radius: var(--a11y-radius); } .a11y-check:hover { background: #f3f4f6; } .a11y-check input[type='checkbox'] { flex: 0 0 auto; inline-size: 24px; block-size: 24px; margin: 0; accent-color: var(--a11y-accent); cursor: pointer; } .a11y-check > label { flex: 1; margin: 0; padding-block: 0.625rem; font-size: 1rem; line-height: 1.4; font-weight: 500; color: var(--a11y-ink); cursor: pointer; } /* ----------------------------------------------------------------------------- Actions -------------------------------------------------------------------------- */ .a11y-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-block-start: 1.5rem; } .a11y-actions button { flex: 1 1 auto; min-block-size: 48px; padding-block: 0.75rem; padding-inline: 1.25rem; font-size: 1rem; font-weight: 600; font-family: inherit; border-radius: var(--a11y-radius); cursor: pointer; } .a11y-save { background: var(--a11y-ink); color: #ffffff; border: 2px solid var(--a11y-ink); } .a11y-save:hover, .a11y-save:focus { background: var(--a11y-accent); border-color: var(--a11y-accent); } .a11y-reset { background: #ffffff; color: var(--a11y-ink); border: 2px solid var(--a11y-ink); } .a11y-reset:hover, .a11y-reset:focus { background: #f3f4f6; } /* With JavaScript running, every control applies the moment it changes, so Save is redundant. It is hidden only once the script has confirmed it is alive — with JavaScript off the form is a plain POST and Save is the only way to commit, so it must stay in the markup. */ html.a11y-js .a11y-save { display: none; } /* ----------------------------------------------------------------------------- Read-aloud control Replaces v1's Talkify widget, which shipped a live API key in the client bundle (src/components/Students/CourseView.vue:339) and only ever worked on course pages. This uses the browser's own SpeechSynthesis: no key, no third-party request, and it honours the voice and rate the user has already set in their operating system. The markup is created by public/js/accessibility.js, because a button that cannot work without JavaScript should not be in the HTML. -------------------------------------------------------------------------- */ .a11y-tts { position: fixed; inset-block-end: 5.25rem; /* clears the 56px trigger plus its margin */ inset-inline-end: 1rem; z-index: 99996; display: flex; flex-direction: column; gap: 0.5rem; } .a11y-tts__button { inline-size: 56px; block-size: 56px; min-block-size: 56px; padding: 0; display: flex; align-items: center; justify-content: center; background: var(--a11y-paper); color: var(--a11y-ink); border: 3px solid var(--a11y-ink); border-radius: 50%; box-shadow: 0 6px 18px rgb(0 0 0 / 30%); cursor: pointer; } .a11y-tts__button svg { inline-size: 24px; block-size: 24px; } .a11y-tts__button:hover { background: var(--a11y-ink); color: #ffffff; } .a11y-tts__button:focus-visible { outline: 3px solid var(--a11y-focus); outline-offset: 4px; } /* Speaking state is shown by the icon AND the pressed state, never by colour alone (WCAG 1.4.1). */ .a11y-tts__button[aria-pressed='true'] { background: var(--a11y-accent); color: #ffffff; border-color: var(--a11y-accent); } .a11y-tts__button[hidden] { display: none; } /* ----------------------------------------------------------------------------- Small screens — the panel becomes full width -------------------------------------------------------------------------- */ @media (max-width: 420px) { .a11y-panel { inline-size: 100vw; max-inline-size: 100vw; border-inline-start: 0; border-block-start: 3px solid var(--a11y-line); } .a11y-actions button { flex: 1 1 100%; } } /* ----------------------------------------------------------------------------- The toolbar inside the toolbar's own modes If someone has turned on dark or high contrast, the panel they used to do it has to follow — otherwise the one surface they are looking at is the one that ignored them. -------------------------------------------------------------------------- */ html[data-a11y-contrast='dark'] { --a11y-ink: #f8fafc; --a11y-paper: #111827; --a11y-line: #f8fafc; --a11y-muted: #cbd5e1; --a11y-accent: #818cf8; } html[data-a11y-contrast='dark'] .a11y-group { border-color: #475569; } html[data-a11y-contrast='dark'] .a11y-check:hover, html[data-a11y-contrast='dark'] .a11y-reset:hover { background: #1f2937; } html[data-a11y-contrast='dark'] .a11y-field select { background-color: #1f2937; color: #f8fafc; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 5l6 6 6-6' fill='none' stroke='%23f8fafc' stroke-width='2'/%3E%3C/svg%3E"); } html[data-a11y-contrast='dark'] .a11y-trigger { background: #f8fafc; color: #111827; border-color: #111827; box-shadow: 0 0 0 2px #f8fafc, 0 6px 18px rgb(0 0 0 / 60%); } html[data-a11y-contrast='high'] .a11y-panel { border-inline-start-width: 4px; } html[data-a11y-contrast='high'] .a11y-group { border-color: #000000; }