/* * kutri-a11y.css — site-wide accessibility repairs (audit 2026-09-24, * plans/2026-09-24-saavutettavuus-auditointi/). Enqueued SITE-WIDE, front end * only, after every other theme sheet (functions.php). Pairs with * assets/js/kutri-a11y.js, which sets --kutri-obscure-bottom and fixes the * cookie-consent keyboard behaviour. * * RUCSS: this whole FILE is in the code-side rocket_rucss_safelist * (functions.php) because most selectors target JS-added state (body classes, * the cookie lightbox, aria-hidden flips) that never appears in the static * HTML. No :not() anywhere — RUCSS strips it even when safelisted. * Third-party markup (WooCommerce, core navigation, GDPR Cookie Compliance by * Moove) is overridden here, never edited. Token-bound via kutri-tokens.css. */ /* -------------------------------------------------------------------------- * Reflow (WCAG 1.4.10): long Finnish compounds ("henkilökohtainen", * "Opinnäytetyökurssi") never wrapped and pushed 19–22 px of sideways scroll * into 320 px screens. break-word only engages when a whole word cannot fit on * its own line, so ordinary line breaks stay whole-word. No hyphens:auto on * purpose: extra hyphenation makes text harder to read for dyslexic readers. * -------------------------------------------------------------------------- */ body { overflow-wrap: break-word; } /* -------------------------------------------------------------------------- * Focus never hides under pinned bars (WCAG 2.4.11 Focus Not Obscured, C43). * --kutri-obscure-bottom = height of whatever is pinned to the viewport * bottom right now (sticky purchase bar, fixed cookie bar), measured by * kutri-a11y.js; kutri-landing.css carries a no-JS fallback. The top reserve * covers the logged-in admin bar. * -------------------------------------------------------------------------- */ html { scroll-padding-top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--space-4)); scroll-padding-bottom: calc(var(--kutri-obscure-bottom, 0px) + var(--space-4)); } /* The cookie bar and the sticky purchase bar never stack: while the consent bar is shown (Moove adds body.gdpr-infobar-visible), the purchase bar waits at the page end. Together they covered ≈36 % of a phone screen. These two body-class rules survive RUCSS only if the file safelist matches the minified URL, so kutri-a11y.js applies the same two effects inline (review T3); the rules stay as a no-JS-timing duplicate. */ body.gdpr-infobar-visible .kc-lp-stickycta { position: static; } /* Room at the document end while the fixed consent bar is shown: on pages without a footer (Kutri Landing – minimalisti) the last controls could never scroll out from under it. kutri-a11y.js sets the height (0 when static). */ body.gdpr-infobar-visible { padding-bottom: var(--kutri-cookiebar-h, 0px); } /* -------------------------------------------------------------------------- * Cookie consent bar (GDPR Cookie Compliance, #moove_gdpr_cookie_info_bar). * kutri-a11y.js moves it right after the skip link, so Tab and VoiceOver reach * the consent choice first instead of after 71–75 other stops. * -------------------------------------------------------------------------- */ /* Short viewports (200–400 % zoom, phone landscape): the fixed bar covered 58 % of the screen. There it joins the page flow at the top instead, so it covers nothing. Media-query rem is 16 px: 30rem = 480 px, the same limit as the sticky purchase bar. */ @media (max-height: 30rem) { #moove_gdpr_cookie_info_bar.gdpr_infobar_postion_bottom { position: static; max-height: none; transition: none; } } /* "asetuksista": the plugin's focus state was #0c4da2 text + ring on the #202020 bar (≈2:1). White text + keltaoranssi ring (≈11:1), the same ring colour the footer uses on dark surfaces. Specificity (1,5,1) beats the plugin's (1,4,1) "…-content button:focus { color: #0C4DA2 }". */ #moove_gdpr_cookie_info_bar .moove-gdpr-info-bar-container .moove-gdpr-info-bar-content .moove-gdpr-cookie-notice button.change-settings-button:focus-visible { color: var(--color-valkoinen); outline: var(--border-3) solid var(--color-keltaoranssi); outline-offset: 2px; box-shadow: none; } /* -------------------------------------------------------------------------- * Cookie settings modal (#moove_gdpr_cookie_modal). * -------------------------------------------------------------------------- */ /* The consent checkboxes were display:none, so the analytics toggle could only be clicked (WCAG 2.1.1). Keep the real checkbox in the tab order, invisible, laid over the painted switch: taps and Space toggle the input itself, and VoiceOver's focus rectangle sits on the switch. */ #moove_gdpr_cookie_modal .moove-gdpr-status-bar .cookie-switch { position: relative; } #moove_gdpr_cookie_modal .moove-gdpr-status-bar .cookie-switch input[type="checkbox"] { display: block; position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; } #moove_gdpr_cookie_modal .moove-gdpr-status-bar .cookie-switch input[type="checkbox"]:focus-visible + .cookie-slider { outline: var(--border-3) solid var(--color-petrooli); outline-offset: 3px; } /* Status words on the light panel: red "Pois" was ≈3.5:1 and green "Käytössä" ≈3.3:1 (WCAG 1.4.3). varoitus / petrooli pass 4.5:1 on white and #f1f1f1. */ #moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-status-bar .cookie-switch .cookie-slider::after, #moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-status-bar .cookie-switch .gdpr-sr-label, #moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-status-bar .cookie-switch .gdpr-sr-disable { color: var(--color-varoitus); } #moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-status-bar .cookie-switch input:checked + .cookie-slider::after, #moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-status-bar .cookie-switch input:checked + .cookie-slider .gdpr-sr-enable { color: var(--color-petrooli); } /* Category buttons are now in the native Tab order (kutri-a11y.js stops the plugin's own Tab hijack) – give them the site's focus ring. */ #moove_gdpr_cookie_modal .moove-gdpr-modal-content #moove-gdpr-menu .moove-gdpr-tab-nav:focus-visible, #moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-close:focus-visible { outline: var(--border-3) solid var(--color-petrooli); outline-offset: 2px; box-shadow: 0 0 0 2px var(--color-valkoinen); } /* -------------------------------------------------------------------------- * WooCommerce mini-cart drawer: the closed drawer is aria-hidden="true" but * kept 2–4 focusable, off-screen Tab stops ("Close", "Siirry ostoksille"). * visibility:hidden takes them out of the Tab order and the AX tree; the * attribute flips to "false" when the drawer opens, so opening still works. * -------------------------------------------------------------------------- */ .wc-block-mini-cart__drawer[aria-hidden="true"] { visibility: hidden; } /* -------------------------------------------------------------------------- * Target size (WCAG 2.5.8, and Kutri's 44 px on phones where layout allows). * -------------------------------------------------------------------------- */ /* Desktop "Kauppa" submenu toggle was 12×12 right next to the Kauppa link: 24×24 box, the chevron keeps its .6em size. ONLY the icon-only toggle (.wp-block-navigation__submenu-icon + __toggle, the "open on hover" menu): in an "open on click" menu (the logged-in Jäsensivut menu) the toggle is the text button itself, and 24×24 squeezed "Jäsensivut" over "Blogi" and "Kirjaudu ulos" (1.2.51 fix). (0,3,0) on purpose: core's (0,2,0) .wp-block-navigation__submenu-icon size rule sits in the safelisted, end-appended navigation sheet, so order must not decide it (review T1). The open mobile overlay still hides the toggle – core's rule there is (0,4,0). */ .wp-block-navigation .wp-block-navigation__submenu-icon.wp-block-navigation-submenu__toggle { display: inline-flex; width: 24px; height: 24px; justify-content: center; align-items: center; } .wp-block-navigation .wp-block-navigation__submenu-icon.wp-block-navigation-submenu__toggle svg { width: .6em; height: .6em; margin-top: 0; } /* Mobile menu open/close buttons were 24×24. The open button's display is left to core (it hides it at ≥ 600 px); only min sizes are added. */ .wp-block-navigation__responsive-container-open, .wp-block-navigation__responsive-container-close { min-width: var(--touch-min); min-height: var(--touch-min); align-items: center; justify-content: center; } .wp-block-navigation__responsive-container-close { display: inline-flex; } /* kutri/liity-nappi now opens its dialog from a real