/** * Accessibility — visible keyboard focus indicator (WCAG 2.4.7, Level AA) * * The theme resets `outline` on many controls (links, buttons, inputs), which * removes the keyboard focus ring and leaves keyboard users unable to see where * they are. This restores a visible ring for KEYBOARD focus only (:focus-visible), * so mouse interaction and the visual design are unchanged. * * Loaded last (see custom_style_enqueue) + !important so it overrides the theme's * existing `outline:none` / `outline:0` resets. No JS/behaviour depends on this. */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [role="button"]:focus-visible, [role="link"]:focus-visible, [role="tab"]:focus-visible, [role="menuitem"]:focus-visible, [role="checkbox"]:focus-visible, [role="radio"]:focus-visible, [tabindex]:not([tabindex="-1"]):focus-visible { outline: 3px solid var(--color-secondary, #f9ac1b) !important; outline-offset: 2px !important; } /* Skip-to-content link must be clearly visible when it receives focus. */ .skip-link:focus, .skip-link:focus-visible { outline: 3px solid var(--color-secondary, #f9ac1b) !important; outline-offset: 2px !important; } /** * Screen-reader-only text must reach screen readers (WCAG 1.3.1 / 2.4.1 / 4.1.2, Level A). * * header-search.css sets `.screen-reader-text { display:none }`, which overrides the * correct visually-hidden pattern in style.css and removes EVERY .screen-reader-text from * the accessibility tree, site-wide. Effects: the skip link (header.php) cannot receive * focus, and controls that rely on it for their name (History timeline tabs, FAQ, search, * calendar, program cards…) are announced with no name. * * style.css already keeps these elements invisible (position:absolute !important + clip, * 1x1px), so undoing `display:none` shows nothing on screen — verified: no layout change. * `:not(:focus)` leaves style.css's own `.screen-reader-text:focus` rule free to reveal the * skip link when a keyboard user tabs to it. */ .screen-reader-text:not(:focus) { display: inline !important; } /** * Sticky header must not cover focused / scrolled-to content (WCAG 2.4.11; technique C43). * * `scroll-padding-top` on makes the browser stop every focus-scroll, #anchor jump and * scrollIntoView() below the sticky header instead of underneath it. (assets/js/a11y.js also * reveals focus hidden under the sticky page bars; scanners only check for this CSS.) * * The offset uses the SAME values the theme already used for its own anchor targets * (#primary-content: 110px, and 80px at <=1200px - header.css). Elements that already had a * scroll-margin-top keep their exact landing position: their margin becomes * (original - offset), because the browser adds scroll-margin to scroll-padding. * #primary-content 110 / 80 -> 0 * .pdop_schedule 110 -> 110 - offset (calendar.css) * .search-category-section 100 -> 100 - offset (inline style in search.php) * Scroll targets with no margin of their own (mega-menu anchors, rainout grid, schedule * anchor, #primary skip link) now stop below the header rather than hidden under it. * Scripts that scroll with explicit coordinates (window.scrollTo / jQuery animate, e.g. the * accordion and TOC scrolling) are not affected by scroll-padding. */ /* Offset clears the tallest sticky header measured (111px incl. top bar) + 16px breathing room; assets/js/a11y.js raises it further if the real header is ever taller (never lowers it). */ :root { --pdop-scroll-offset: 128px; } @media (max-width: 1200px) { :root { --pdop-scroll-offset: 88px; } } html { scroll-padding-top: var(--pdop-scroll-offset); } /* Theme's own landing points kept exact: margin = original - offset (header.css 110 / 80). */ #primary-content { scroll-margin-top: calc(110px - var(--pdop-scroll-offset)) !important; } @media (max-width: 1200px) { #primary-content { scroll-margin-top: calc(80px - var(--pdop-scroll-offset)) !important; } } .pdop_schedule { scroll-margin-top: calc(110px - var(--pdop-scroll-offset)) !important; } .search-category-section { scroll-margin-top: calc(100px - var(--pdop-scroll-offset)) !important; } /** * Rentals & Permits Gravity Forms — expose hidden field labels to assistive tech * (WCAG 1.3.1 / 4.1.2, Level A). * * The theme hides the form labels with `.rp-form-section .gfield_label { display:none }` * (components.css + rentals-permits.css). `display:none` also removes them from the * accessibility tree, so screen-reader users get no field name — the