/* ========================================================================== Accessibility — shared global treatments -------------------------------------------------------------------------- WCAG 2.2 AA remediation (Milestone 1.0.7) — Batch 1 + Batch 2. Loaded globally from _Layout.cshtml AFTER the chrome (header/footer) CSS and layout.css so it can normalise focus rings across the vendored chrome export as well as the app's own components. This file addresses two shared-fix clusters: - 1.4.11 Focus-outline / non-text contrast (audit #2,3,4,13,35,55,67,68, 18,38,39,56 → GitLab #74,75,76,85,107,127,139,140, 90,110,111,128) - 1.4.3 / 1.4.1 Text & link contrast / distinguishability (audit #17,28,53,57,12,19 → GitLab #89,100,125,129,84,91) ========================================================================== */ :root { /* Dual-tone focus ring tokens. A single-colour ring can't satisfy the 3:1 non-text-contrast minimum on BOTH light and dark backgrounds (e.g. a blue ring measures only 2.58:1 on the #1A237E dark filter tags — audit #67/#139). We therefore render the focus indicator as two stacked rings: a dark inner ring + a light outer ring. Whatever the background, at least one of the two rings clears 3:1, so the indicator is always visible. */ --pf-focus-ring-dark: #181818; /* 17.76:1 on white, 12.7:1+ on the lilac surfaces */ --pf-focus-ring-light: #FFFFFF; /* 13.24:1 on #1A237E, 6.44:1 on #2B5EA7 */ --pf-focus-ring-width: 2px; } /* -------------------------------------------------------------------------- 1.4.11 — Global accessible focus indicator -------------------------------------------------------------------------- Baseline :focus-visible ring for every interactive element. Components that already declared a (lower-contrast) ring are normalised here; this rule wins because the file loads last. The dual ring = solid dark outline + a white box-shadow halo just outside it. Works on light AND dark surfaces, covering: #74/#75/#76 Header (Progyny, Get started, Explore menu) [vendored chrome] #85 Footer modal Close #107 Location "Call ..." link #127 Report an Issue checkboxes #139 Search "Remove filter" chips (dark #1A237E bg) #140 Search pagination "Page n" -------------------------------------------------------------------------- */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible, [role="button"]:focus-visible, [role="link"]:focus-visible, [role="menuitem"]:focus-visible, [role="tab"]:focus-visible, [role="checkbox"]:focus-visible, .btn:focus-visible, .filter-chip:focus-visible, .filter-tag__remove:focus-visible, .results-pagination .page-btn:focus-visible, .pf-info-modal__close-icon:focus-visible, .pf-info-modal__close-btn:focus-visible { outline: var(--pf-focus-ring-width) solid var(--pf-focus-ring-dark); outline-offset: 2px; /* White halo just outside the dark outline so the indicator stays visible on dark backgrounds too. */ box-shadow: 0 0 0 calc(var(--pf-focus-ring-width) + 2px) var(--pf-focus-ring-light); border-radius: inherit; } /* Fallback for engines that don't support :focus-visible — keep a ring on :focus too, but only where it won't show on mouse-click for plain links. */ @supports not selector(:focus-visible) { a:focus, button:focus, input:focus, select:focus, textarea:focus, [tabindex]:focus, [role="button"]:focus { outline: var(--pf-focus-ring-width) solid var(--pf-focus-ring-dark); outline-offset: 2px; box-shadow: 0 0 0 calc(var(--pf-focus-ring-width) + 2px) var(--pf-focus-ring-light); } } /* On dark-blue surfaces invert the ring: white outline + dark halo, so both rings keep >=3:1 against the dark #1A237E bg. White on #1A237E = 13.24:1, well above 3:1. */ .filter-tag__remove:focus-visible, .results-pagination .page-btn:focus-visible { outline-color: var(--pf-focus-ring-light); box-shadow: 0 0 0 calc(var(--pf-focus-ring-width) + 2px) var(--pf-focus-ring-dark); } /* GitLab #140 (WCAG Batch A): Eduardo re-tested the active pagination button and saw only the black outer halo. The white outline was being drawn outside the blue button, onto the white page background, so it became invisible. Draw the active/current page indicator INSET on the blue fill instead: the visible ring is white, not black, and clears the 3:1 non-text contrast requirement. */ .results-pagination .page-btn.active:focus-visible { outline: none; box-shadow: inset 0 0 0 var(--pf-focus-ring-width) var(--pf-focus-ring-light); } /* -------------------------------------------------------------------------- WCAG Batch A: Focus rings for header controls (#74 #75 #76) -------------------------------------------------------------------------- Eduardo re-tested MR !138 (Batch 1+2 dual-tone ring) and asked for the header focus indicators to read as the white ring used on "Login", not the old dark-outline-with-white-halo look. #74 (Progyny logo / brand link): The logo sits inside the dark header (#203860) with the brand SVG well clear of the header edges, so a SINGLE white outline reads cleanly on every side (white on #203860 = 11.69:1). Keep it as the approved single white ring. #75 / #76 (desktop "Get started" pill + "Explore menu" / nav-toggle button): These two controls have height:100% of the 60px header, so a white ring at outline-offset:2px regressed -- the ring's top/bottom edge was drawn OUTSIDE the control into the adjacent WHITE page area above/below the 60px header, where white-on-white is invisible. Per Eduardo's verdict the indicator MUST stay white-only ("Use only the white visual focus, the same way it is implemented on the Login element") -- adding a dark companion band would regress the accepted fix. So the ring stays a single WHITE ring; we only change HOW it is drawn: INSET via box-shadow so the whole ring sits ON the control's own colored fill rather than bleeding into the adjacent white. Contrast of the white ring against each fill: - Get started bg #3A5AAD => 6.47:1 (>>3:1) - Explore menu bg #749E19 => 3.16:1 ( >3:1, passes) Drawing it inset also keeps it within the control bounds, so it is never clipped by the 60px header height -- this resolves "not going around the whole element". NOTE on the nav-drawer "Get started" (.header-navigation .get-started): that one is intentionally NOT in this white block. When the menu is open it sits on the near-white drawer panel (rgba(255,255,255,0.9)) alongside the other menu items (Employers, Smart Benefits, ...). It uses an inset dark ring inside the blue button so the focus indicator is visible on all four sides, including desktop where the button is flush with the bottom of the menu panel. -------------------------------------------------------------------------- */ /* #74 logo + Login: single white ring, sits clear inside the dark header. */ .site-header .logo a:focus-visible, .site-header .login:focus-visible { outline: var(--pf-focus-ring-width) solid var(--pf-focus-ring-light); outline-offset: 2px; box-shadow: none; } /* #75 / #76: full-height header controls (height:100% of the 60px header) whose OUTER edge meets white. A white ring drawn OUTSIDE the control (outline-offset:2px) regressed: its top/bottom edge fell into the white page area above/below the 60px header (white-on-white, invisible). Per Eduardo's verdict the indicator stays WHITE-ONLY (matching Login) -- no dark companion band. Fix the visibility purely by drawing the same white ring INSET via an inset box-shadow, so the whole ring sits ON the control's own colored fill (#3A5AAD Get started = 6.47:1, #749E19 nav-toggle = 3.16:1, both >=3:1) instead of bleeding into the adjacent white. Inset also means it is never clipped by the header height, which resolves "not going around the whole element". The nav-drawer "Get started" (.header-navigation .get-started) is deliberately excluded here: on the open (near-white) menu panel it gets its own dark inset ring below, not the white-only desktop header treatment. */ .site-header .get-started-h:focus-visible, .site-header button.nav-toggle:focus-visible { outline: none; box-shadow: inset 0 0 0 var(--pf-focus-ring-width) var(--pf-focus-ring-light); } /* #75 menu/drawer "Get started": the link is full-width and flush with the menu panel edge on desktop, so the global OUTSIDE outline/halo can be clipped or hidden by the panel boundary (only the top edge remained visible). Draw the dark ring INSET on this menu button instead so it surrounds the button on all four sides while preserving the white-background desktop header Get Started treatment above. */ .site-header .header-navigation .get-started:focus-visible { outline: none; box-shadow: inset 0 0 0 var(--pf-focus-ring-width) var(--pf-focus-ring-dark); } /* -------------------------------------------------------------------------- 1.4.11 — Non-text contrast of edit-field borders & icons (≥3:1) -------------------------------------------------------------------------- #90 Main Finder edit-field borders were #B5B5B5 (2.05:1). Bump the resting border to #767676 (4.54:1). Covers the query field, location field, plan combobox trigger/dropdown/search. #128 Report an Issue "Additional information" + input borders (--pd-gray2 #E6E6E6 / similar low-contrast greys) → same accessible border token. #110/#111 Location clinic-score tooltip icon (reported #999, 2.85:1) + its hover → #595959 (7.0:1). -------------------------------------------------------------------------- */ :root { --pf-field-border: #767676; /* 4.54:1 on white — clears the 3:1 non-text min with margin */ --pf-icon-fg: #595959; /* 7.0:1 on white */ } /* GitLab #128 / WCAG audit #56 (1.4.11): Report an Issue text inputs and textarea use --pd-gray2 (#E6E6E6, ~1.24:1) for their resting border. Append .ri-input and .ri-textarea here so they inherit the accessible border token (#767676, 4.54:1). The :focus state (blue var(--pd-blue3) + box-shadow) is declared in report-issue.css via a :focus selector with its own border-color, so it continues to win for the focused state. */ .pf-combobox__trigger, .pf-combobox__dropdown, .pf-combobox__search, .pf-autocomplete__input, .pf-autocomplete__dropdown, .ri-input, .ri-textarea { border-color: var(--pf-field-border) !important; } /* Because the resting border above is !important, the blue focus border in report-issue.css (.ri-input:focus / .ri-textarea:focus, no !important) would otherwise lose to it and the focus indicator would stay grey. Re-assert the blue focus border here with !important so the visible focus state is kept. */ .ri-input:focus, .ri-textarea:focus { border-color: var(--pd-blue3) !important; } /* Clinic-score / priority-scheduling info icons (shared detail header). */ .pd-clinic-score__info { color: var(--pf-icon-fg); } .pd-clinic-score__info:hover, .pd-clinic-score__info:focus { color: var(--pf-icon-fg); } /* -------------------------------------------------------------------------- 1.4.3 — Placeholder / supporting text contrast (≥4.5:1) -------------------------------------------------------------------------- #89 Main Finder query/location placeholders (#999 → 2.85:1) #100 Main Finder combobox "Type at least 3 characters" helper (#999) #125 Report an Issue placeholders (#AAA → 2.32:1) #129 Report an Issue "(not required)" text (#777 → 4.48:1, just under) All bumped to #595959 (7.0:1). -------------------------------------------------------------------------- */ :root { --pf-muted-text: #595959; /* 7.0:1 on white */ } .pf-autocomplete__input::placeholder, .pf-autocomplete__input::-webkit-input-placeholder, .form-control-custom::placeholder, .search-header .form-control::placeholder, .pf-combobox__display, .pf-combobox__search::placeholder { color: var(--pf-muted-text); } /* Report an Issue page muted text + placeholders (#125, #129). */ .ri-optional { color: var(--pf-muted-text); } .ri-textarea::placeholder, .ri-input::placeholder { color: var(--pf-muted-text); } /* -------------------------------------------------------------------------- 1.4.1 — Links must be distinguishable from plain text (not by colour alone) -------------------------------------------------------------------------- #84 Footer "Emergency care notice" modal — "911" link inside a paragraph. #91 Main Finder "(888) 597-5065" Care Advocate phone link inside a paragraph (Need Help info box). Both sit in running text, so we add a persistent underline (a non-colour affordance) rather than relying on colour. Underline on hover/focus already existed; this makes it always-on inside body copy. -------------------------------------------------------------------------- */ .pf-info-modal__phone, .need-help-box__phone { text-decoration: underline; text-underline-offset: 2px; } /* Report an Issue page description — contact email link sits in running text (axe: 1.01:1 vs surrounding #444444). Underline it so it isn't colour-only. */ .ri-page-description a { text-decoration: underline; text-underline-offset: 2px; } /* ========================================================================== WCAG Batch 5b: Header button appearance preservation ========================================================================== #78/#77: The .nav-toggle was converted from to