/** * fill'd Accessibility — toolbar chrome * * Loaded after adjustments.css. Everything is namespaced under .filld-a11y and * declares its own colours, spacing and type, so the panel stays legible no * matter which adjustments are active — the control that turns high contrast * off must never be made unreadable by high contrast being on. * * Brand blue is hard-coded rather than read from the theme's custom properties * on purpose: this plugin has to keep working if it is dropped onto a site * where those tokens do not exist. */ .filld-a11y { --fa11y-blue: #1e5fbf; --fa11y-blue-dark: #17458c; --fa11y-blue-soft: #e8effa; --fa11y-ink: #16202e; --fa11y-ink-soft: #5b6675; --fa11y-paper: #ffffff; --fa11y-paper-2: #f4f7fb; --fa11y-rule: #dbe2ec; --fa11y-focus: #b8330b; /* The ring drawn inside the launcher, between its edge and the icon. Brand "Blue Tile" (--blue-tile in the theme's global.css), which against the brand blue reads as near-white — the UserWay button this was modelled on uses pure #fff. Copied rather than referenced, for the same reason as the blues above: the plugin has to keep working on a site where those tokens do not exist. */ --fa11y-ring: #e3edfa; position: fixed; z-index: 2147483000; font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; font-size: 16px; line-height: 1.45; color: var(--fa11y-ink); } .filld-a11y *, .filld-a11y *::before, .filld-a11y *::after { box-sizing: border-box; } .filld-a11y--left { left: 20px; bottom: 20px; } .filld-a11y--right { right: 20px; bottom: 20px; } /* The visitor's own choice of side, which overrides the site-wide default from the PHP filter. Keyed off rather than the widget's class because the preboot script can set an attribute before the toolbar markup exists in the footer — so the launcher is on the right side at first paint instead of visibly jumping once scripts run. JS keeps the class in step afterwards. */ html[data-a11y-widgetpos="left"] .filld-a11y { left: 20px; right: auto; } html[data-a11y-widgetpos="right"] .filld-a11y { right: 20px; left: auto; } /* Visually hidden but available to assistive tech. */ .filld-a11y__sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* ========================================================================== Launcher ========================================================================== */ /* Icon only. 64px keeps it comfortably above the WCAG 2.5.5 44px target minimum while staying out of the way of the page content. */ .filld-a11y__launcher { width: 64px; height: 64px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 2px solid transparent; border-radius: 50%; background: var(--fa11y-blue); color: #fff; font: inherit; cursor: pointer; box-shadow: 0 6px 20px rgba(15, 35, 70, 0.32); transition: background-color 150ms ease, transform 150ms ease; /* Positions the inner ring below. */ position: relative; } /* The ring inside the button, between its edge and the icon — the UserWay button's shape. A pseudo-element rather than a border or an inset shadow: a border would eat into the 56px hit area, and an inset box-shadow can only sit flush against the edge, with no blue left outside it. */ .filld-a11y__launcher::before { content: ""; position: absolute; inset: 5px; border: 2.5px solid var(--fa11y-ring); border-radius: 50%; pointer-events: none; } .filld-a11y__launcher:hover { background: var(--fa11y-blue-dark); transform: scale(1.05); } .filld-a11y__launcher:active { transform: scale(0.98); } .filld-a11y__launcher-icon { display: inline-flex; } /* Once the panel is open the launcher is redundant and would sit under it. */ .filld-a11y__launcher[aria-expanded="true"] { display: none; } /* ========================================================================== Panel ========================================================================== */ .filld-a11y__panel { width: min(384px, calc(100vw - 32px)); max-height: min(82vh, 760px); display: flex; flex-direction: column; background: var(--fa11y-paper-2); border-radius: 18px; box-shadow: 0 24px 60px rgba(15, 35, 70, 0.32); overflow: hidden; } .filld-a11y__panel[hidden] { display: none; } .filld-a11y__header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; background: linear-gradient(135deg, var(--fa11y-blue) 0%, #1348a0 100%); color: #fff; } .filld-a11y__title { margin: 0; font-size: 17px; font-weight: 800; letter-spacing: -0.01em; color: #fff; } .filld-a11y__close { flex: none; width: 34px; height: 34px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.18); color: #fff; cursor: pointer; transition: background-color 150ms ease; } .filld-a11y__close:hover { background: rgba(255, 255, 255, 0.32); } .filld-a11y__body { padding: 14px; overflow-y: auto; overscroll-behavior: contain; } /* ========================================================================== Tile grid ========================================================================== */ .filld-a11y__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .filld-a11y__cell { display: flex; } .filld-a11y__tile { position: relative; flex: 1 1 auto; min-height: 104px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; padding: 12px 6px 14px; border: 2px solid transparent; border-radius: 14px; background: var(--fa11y-paper); color: var(--fa11y-ink); font: inherit; cursor: pointer; text-align: center; box-shadow: 0 1px 2px rgba(15, 35, 70, 0.06); transition: border-color 150ms ease, background-color 150ms ease, transform 120ms ease; } .filld-a11y__tile:hover { border-color: #c3d3ec; background: #fbfcfe; } .filld-a11y__tile:active { transform: translateY(1px); } /* Read aloud on a browser with no speech synthesis. Left in place and visibly unavailable rather than removed, so the grid does not reflow and the tooltip can explain why. */ .filld-a11y__tile[disabled] { opacity: 0.45; cursor: not-allowed; } .filld-a11y__tile[disabled]:hover { border-color: transparent; background: var(--fa11y-paper); } .filld-a11y__icon { color: var(--fa11y-ink); transition: color 150ms ease; } .filld-a11y__tile-label { font-size: 12.5px; font-weight: 700; line-height: 1.25; letter-spacing: -0.005em; } /* The Screen reader tile rewrites its own label as it cycles ("Screen reader" -> "Read speed normal" -> ...), and those wrap to a different number of lines. Reserving two lines keeps the tile — and so the whole grid row — from resizing under the pointer between clicks. */ .filld-a11y__tile[data-a11y-tile="readAloud"] .filld-a11y__tile-label { display: block; min-height: 2.5em; /* 2 lines at line-height 1.25 */ } /* Active state — the blue fill is what tells you a tile is doing something. */ .filld-a11y__tile.is-active { background: var(--fa11y-blue-soft); border-color: var(--fa11y-blue); } .filld-a11y__tile.is-active .filld-a11y__icon, .filld-a11y__tile.is-active .filld-a11y__tile-label { color: var(--fa11y-blue-dark); } /* Step dots for the multi-level tiles (contrast, text size, spacing, leading). */ .filld-a11y__steps { position: absolute; left: 0; right: 0; bottom: 7px; display: flex; justify-content: center; gap: 4px; } .filld-a11y__step { width: 5px; height: 5px; border-radius: 50%; background: #cfd8e5; transition: background-color 150ms ease; } .filld-a11y__step.is-on { background: var(--fa11y-blue); } /* ========================================================================== Footer ========================================================================== */ .filld-a11y__footer { padding: 12px 14px 14px; border-top: 1px solid var(--fa11y-rule); background: var(--fa11y-paper); } /* ========================================================================== Footer disclosures — toolbar settings, collapsed until asked for ========================================================================== */ .filld-a11y__disclosure { margin-bottom: 8px; border: 1px solid var(--fa11y-rule); border-radius: 10px; background: var(--fa11y-paper-2); overflow: hidden; } .filld-a11y__disclosure-toggle { width: 100%; display: flex; align-items: center; gap: 9px; padding: 10px 11px; border: 0; background: transparent; color: var(--fa11y-ink); font: inherit; font-size: 13px; font-weight: 800; text-align: left; cursor: pointer; } .filld-a11y__disclosure-toggle:hover { background: #eef3fa; } .filld-a11y__disclosure-icon { flex: none; display: inline-flex; color: var(--fa11y-blue); } /* The tile icon helper renders at 26px; these headers want something smaller. */ .filld-a11y__disclosure-icon .filld-a11y__icon { width: 18px; height: 18px; color: inherit; } .filld-a11y__disclosure-label { flex: 1 1 auto; } .filld-a11y__disclosure-chevron { flex: none; display: inline-flex; color: var(--fa11y-ink-soft); transition: transform 160ms ease; } .filld-a11y__disclosure.is-open .filld-a11y__disclosure-chevron { transform: rotate(180deg); } .filld-a11y__disclosure-body { padding: 2px 11px 12px; } .filld-a11y__disclosure-body[hidden] { display: none; } /* ========================================================================== Launcher position ========================================================================== */ .filld-a11y__position { margin: 0; padding: 0; border: 0; } .filld-a11y__position-options { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .filld-a11y__position-option { display: flex; align-items: center; gap: 8px; padding: 9px 11px; border: 1px solid var(--fa11y-rule); border-radius: 10px; background: var(--fa11y-paper-2); font-size: 13.5px; font-weight: 700; cursor: pointer; transition: border-color 150ms ease, background-color 150ms ease; } .filld-a11y__position-option:hover { border-color: #c3d3ec; } .filld-a11y__position-option input { flex: none; width: 17px; height: 17px; margin: 0; accent-color: var(--fa11y-blue); cursor: pointer; } /* Progressive enhancement: without :has() the native radio still shows which side is selected, so nothing is lost, only the filled card treatment. */ .filld-a11y__position-option:has(input:checked) { border-color: var(--fa11y-blue); background: var(--fa11y-blue-soft); color: var(--fa11y-blue-dark); } /* The ring goes on the label, since the radio itself is only 17px. */ .filld-a11y__position-option:focus-within { outline: 3px solid var(--fa11y-focus); outline-offset: 2px; } .filld-a11y__reset { width: 100%; padding: 11px 14px; border: 1px solid var(--fa11y-blue); border-radius: 10px; background: transparent; color: var(--fa11y-blue); font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; } .filld-a11y__reset:hover { background: var(--fa11y-blue-soft); } .filld-a11y__note { margin: 9px 0 0; font-size: 11px; line-height: 1.4; color: var(--fa11y-ink-soft); text-align: center; } /* Shared focus ring. Deliberately loud — this is an accessibility control. */ .filld-a11y__launcher:focus-visible, .filld-a11y__close:focus-visible, .filld-a11y__reset:focus-visible, .filld-a11y__tile:focus-visible, .filld-a11y__disclosure-toggle:focus-visible { outline: 3px solid var(--fa11y-focus); outline-offset: 2px; } /* Inset, because the toggle spans the full width of its rounded container and an outset ring would be clipped by the overflow:hidden on it. */ .filld-a11y__disclosure-toggle:focus-visible { outline-offset: -3px; } /* ========================================================================== Reading guide — a ruler that tracks the pointer. Never interactive. ========================================================================== */ .filld-a11y__guide { position: fixed; left: 0; top: 0; width: 100vw; height: 44px; pointer-events: none; z-index: 2147482999; border-top: 3px solid rgba(30, 95, 191, 0.95); border-bottom: 3px solid rgba(30, 95, 191, 0.95); background: rgba(30, 95, 191, 0.08); will-change: transform; } .filld-a11y__guide[hidden] { display: none; } /* ========================================================================== Small screens — the panel becomes a bottom sheet. ========================================================================== */ @media (max-width: 480px) { .filld-a11y--left, .filld-a11y--right, html[data-a11y-widgetpos="left"] .filld-a11y, html[data-a11y-widgetpos="right"] .filld-a11y { left: 12px; right: 12px; bottom: 12px; } .filld-a11y__panel { width: 100%; max-height: 78vh; } /* The launcher stays a circle on mobile — only the panel becomes a sheet. It is pinned to the toolbar's own side so it does not stretch across. */ .filld-a11y--left .filld-a11y__launcher { margin-right: auto; } .filld-a11y--right .filld-a11y__launcher { margin-left: auto; } html[data-a11y-widgetpos="left"] .filld-a11y__launcher { margin-right: auto; margin-left: 0; } html[data-a11y-widgetpos="right"] .filld-a11y__launcher { margin-left: auto; margin-right: 0; } .filld-a11y { display: flex; flex-direction: column; align-items: stretch; } .filld-a11y__tile { min-height: 96px; } } /* Respect a system-level motion preference for the panel's own transitions. */ @media (prefers-reduced-motion: reduce) { .filld-a11y *, .filld-a11y *::before, .filld-a11y *::after { transition-duration: 0.001ms !important; } } /* ========================================================================== Windows High Contrast Mode ========================================================================== Forced colours override background-color, border-color and color with the system palette, which is fine for most of this panel but destroys the two places where colour was the ONLY signal: - an active tile, which said "on" purely with a blue fill and border; - the step dots, identical 5px circles distinguished only by fill. Both collapsed into their inactive state, so a sighted visitor in HCM could not see what they had switched on — in the one tool on the site meant for them. aria-pressed was always correct, so this was never a screen reader problem; it was specifically HCM-without-a-screen-reader. The fix gives each state a non-colour cue that survives the override, per WCAG 1.4.1: active tiles get a thicker border, and "on" dots become solid where "off" dots become hollow rings. Highlight/CanvasText are system keywords, so they follow whatever palette the visitor has chosen. */ @media (forced-colors: active) { /* Shape, not hue: 2px -> 4px is legible even when both borders are forced to the same colour. */ .filld-a11y__tile.is-active { border-width: 4px; border-style: solid; border-color: Highlight; } /* forced-color-adjust: none is what lets the dots keep a fill distinction at all — without it both are painted the same system colour. Scoped to these 5px dots only; everything else stays under the OS palette. */ .filld-a11y__step { forced-color-adjust: none; border: 1px solid CanvasText; background: Canvas; } .filld-a11y__step.is-on { background: Highlight; border-color: Highlight; } /* The launcher's inner ring is a pseudo-element border, which forced colours flatten against the button face until the glyph reads as one solid blob. */ .filld-a11y__launcher::before { border-color: ButtonText; } /* A disabled tile signalled itself with opacity alone, and forced colours ignore opacity — Read aloud on a browser with no speech synthesis looked identical to a working tile. GrayText is the system's own "unavailable". */ .filld-a11y__tile[disabled] { color: GrayText; } .filld-a11y__tile[disabled] .filld-a11y__icon, .filld-a11y__tile[disabled] .filld-a11y__tile-label { color: GrayText; } /* The reading guide is a translucent band; transparency does not survive forced colours, so it needs real borders to stay visible as a ruler. */ .filld-a11y__guide { forced-color-adjust: none; background: transparent; border-top: 3px solid Highlight; border-bottom: 3px solid Highlight; } }