/* ============================================================ wcag-s0085-slate.css WCAG 2.1 Level AA override for the S0085-Slate Kentico template. Owner of TFS 2852272 (1.4.3 Body/UI text contrast). Selectors verified against the live base CSS pulled from https://somersettownhomes.com on 2026-05-07. Audit findings: - Base CSS is sparse (~20KB / 191 rules). No outline-suppression, no sticky-header rules, no form-control rules in template's own CSS — almost everything inherits from Bootstrap and the shared footer.min.css. - The TFS 2852272 text-contrast issue is NOT visible in the template CSS dump. The failing rule may be in: a) Bootstrap defaults applied without override b) A shared widget CSS file (cookies, social, etc.) c) Inline styles in widget instances Refine this file during deploy testing — open the live page, run Silktide/devtools, identify the exact element/selector flagged, and add a targeted override here. Specificity strategy: Every selector is prefixed with `body #form` to lift above widget CSS load order. ============================================================ */ /* ------------------------------------------------------------ WCAG 2.4.7 Focus Visible Bootstrap suppressors plus general fallback. ------------------------------------------------------------ */ body #form .navbar-toggle:focus-visible, body #form .dropdown-toggle:focus-visible, body #form .btn:focus-visible, body #form .form-control:focus-visible, body #form a:focus-visible, body #form button:focus-visible, body #form input:focus-visible, body #form select:focus-visible, body #form textarea:focus-visible, body #form [tabindex]:focus-visible, body #form [role="button"]:focus-visible, body #form .footer-widget footer a:focus-visible { /* Webkit-style two-ring halo: blue inner ring + white outer ring gives focus visibility on both light AND dark backgrounds. The `outline` declaration is intentionally omitted — outline paints on top of box-shadow and would cover the white ring. */ outline-offset: 2px; box-shadow: 0 0 0 2px #005fcc, 0 0 0 3px #fff; } /* ------------------------------------------------------------ WCAG 2.4.11 Focus Not Obscured Default 80px scroll-padding. Measure the actual sticky header height on the live site and adjust. ------------------------------------------------------------ */ html { scroll-padding-top: 80px; } body #form :focus-visible { scroll-margin-top: 80px; } /* ------------------------------------------------------------ WCAG 1.4.11 Non-text Contrast (form controls) No template-specific form rules audited. Defensive override on generic form inputs. ------------------------------------------------------------ */ body #form input.form-control, body #form select.form-control, body #form textarea.form-control, body #form input[type="text"], body #form input[type="email"], body #form input[type="tel"], body #form input[type="search"], body #form input[type="number"], body #form input[type="password"], body #form select, body #form textarea { border-color: #595959; } /* ------------------------------------------------------------ WCAG 1.4.3 Contrast Minimum (TFS 2852272 — body/UI text) PLACEHOLDER — exact failing selector not visible in template CSS. After deploy + Silktide rescan, replace this block with the targeted override for whatever element actually fails. Common likely offenders below as defensive defaults. ------------------------------------------------------------ */ body #form .text-muted, body #form .muted, body #form small.text-muted, body #form .caption, body #form .helper-text { color: #595959; } body #form .footer-widget footer .footer-disclosure { opacity: 0.85; } /* ------------------------------------------------------------ WCAG 1.4.1 Use of Color (inline links) Defensive underline + button opt-outs. Update content selector after inspecting live DOM. ------------------------------------------------------------ */ body #form .main-content-text a, body #form .inner-page-main-content a, body #form .mainContent a, body #form main p a, body #form article p a, body #form .content p a { text-decoration: underline; text-underline-offset: 2px; } body #form .btn, body #form .button, body #form header a, body #form nav a, body #form .navbar a, body #form footer a, body #form .footer-widget footer a, body #form .footer-CTA-Button, body #form .header-CTA-button, body #form a.more-link, body #form a.less-link { text-decoration: none; } /* ------------------------------------------------------------ TFS 2870264 — WCAG 1.4.1 (homepage inline links) Slate's homepage welcome blurb lives in `.homeWelcomeText` (inside `.homeCta1`); the second CTA's text block is `.homeCta2Holder` (which also contains `.homeCta2Button`, a button — opted out below). The generic interior-page selectors above don't reach these widgets. ------------------------------------------------------------ */ body #form .homeWelcomeText a, body #form .homeCta1 .homeWelcomeText a, body #form .homeCta2Holder a { text-decoration: underline; text-underline-offset: 2px; } body #form .homeCta2Button, body #form a.homeCta2Button { text-decoration: none; } /* ------------------------------------------------------------ TFS 2905632 - WCAG 1.4.1 Use of Color (selected state) The Floor Plans bed/bath filter and view-switch tabs mark the selected item with a brand-color background + #fff text only (base rule sets border-color:transparent, no weight/underline). Add an underline so the selection is perceivable in greyscale and for color-blind users. `body #form` prefix keeps specificity above the rpWebpartCss_Floorplan* base bundles. No color changed. ------------------------------------------------------------ */ body #form .fp2-bed-bath ul li.active > a, body #form .FloorPlansV2 .fp-switch-tabs .btn-default.active, body #form .FloorPlansV3 .fp-switch-tabs .btn-default.active { text-decoration: underline; text-underline-offset: 3px; } /* ------------------------------------------------------------ TFS 2905631 - WCAG 1.4.11 Non-text Contrast (form controls) The full-width Neighborhood search input has no perceivable resting border: base CSS (rpWebpartCss_NeighborhoodFullWidth.css) sets `border:none; background:none; color:#fff` on a dark rgba(0,0,0,.83) search overlay. Add a light 1px boundary at #cfcfcf (~9.6:1 on that dark surface; matches the widget's existing placeholder color). All 21 priority templates use this dark default - none override it to a light surface. ------------------------------------------------------------ */ body #form .neighborhood-widget .neighborhood-widget__search .form-group .form-control { border: 1px solid #cfcfcf; } /* WCAG 2.2 AA 2.5.8 Target Size (Pointer) — real fix (native checkbox can't be padded; appearance:none + explicit 24px sizing; :checked::after re-draws the check so consent UX is preserved) */ body .contact-mobile-form input[type="checkbox"], #contactusPrivacy input[type="checkbox"], #privacyDiv input[type="checkbox"], #contactUsV1Privacy input[type="checkbox"] { -webkit-appearance: none; appearance: none; width: 24px; height: 24px; min-width: 24px; min-height: 24px; margin: 4px; padding: 0; border: 2px solid currentColor; border-radius: 3px; background: #fff; cursor: pointer; position: relative; vertical-align: middle; flex: 0 0 auto; } body .contact-mobile-form input[type="checkbox"]:checked::after, #contactusPrivacy input[type="checkbox"]:checked::after, #privacyDiv input[type="checkbox"]:checked::after, #contactUsV1Privacy input[type="checkbox"]:checked::after { content: ""; position: absolute; left: 7px; top: 3px; width: 6px; height: 11px; border: solid #1a1a1a; border-width: 0 2px 2px 0; transform: rotate(45deg); } body .contact-mobile-form input[type="checkbox"]:focus-visible, #contactusPrivacy input[type="checkbox"]:focus-visible, #privacyDiv input[type="checkbox"]:focus-visible, #contactUsV1Privacy input[type="checkbox"]:focus-visible { outline: 2px solid; outline-offset: 2px; } /* TFS 2987209 — WCAG 2.2 AAA 2.5.5 Target Size (Enhanced): expand the consent checkbox's pointer hit-area to 44×44 without changing anything visually (Option B, plan §4.4/§0.5 J — live-prototyped pixel-identical to today). The painted box stays 24×24 (position:relative already set above); this adds a transparent ::before centred over the box that only widens the clickable/tappable region. Do not touch :checked::after or :focus-visible above, and do not remove min-width/min-height:24px on the box rule above — on ContactUsFloating templates that min-width is the only reason the box is 24px wide at all (rpWebpartCss_ContactUsFloating.css sets width:auto !important, §0.4 D). Uses symmetric inset offsets, not left/top:50%+transform: live click-testing found percentage-based centering lands ~1-2px off-centre (asymmetric vs. the border-box), which stole clicks from an adjacent control (Submit button / privacy-policy link) on 3 of 16 templates — insets centre reliably regardless of border width. */ body .contact-mobile-form input[type="checkbox"]::before, #contactusPrivacy input[type="checkbox"]::before, #privacyDiv input[type="checkbox"]::before, #contactUsV1Privacy input[type="checkbox"]::before { content: ""; position: absolute; top: -12px; left: -12px; right: -12px; bottom: -12px; } /* ------------------------------------------------------------ TFS 2982346 - WCAG 2.2 AA 2.5.8 Target Size (Pointer): footer links Live-measured on slateqanew.sat-ws.realpage.com/Contact.aspx at 1280x900 (headless Chrome, border-box heights): 1 footer target(s) under 24x24. footer .footer-property-logo a 226.7 x 21, display:inline, wraps an These are display:inline, where `line-height` cannot help - it does not change an inline element's border-box height. inline-block is what makes min-height apply. No padding and no negative-margin cancel is used: each target sits in a line box already at or above 24px, so the box grows into existing leading. Verified by injecting these rules into the live SAT page: 0 targets remaining, document height +0px, no horizontal overflow. SCOPE PREFIX: scoped on the `footer` element. On THIS template `.footer-widget footer` also matches, so either prefix would work - the bare `footer` is used for consistency across the 18 template files in this ticket, three of which genuinely need it (Zen-Garden and Au-Courant nest `footer > .footer-widget`, reversed; Jackson-Square has no `.footer-widget` element at all). `footer` is a superset of both nestings. Verified against the live SAT DOM per template - not assumed. ------------------------------------------------------------ */ footer .footer-property-logo a { display: inline-block; min-height: 24px; }