@dloizides/marketing-astro-kit 1.3.3 → 1.5.0

package/src/a11y.css

@@ -0,0 +1,46 @@
+/* Minimum touch-target floor for every interactive box in this kit.
+ *
+ * SOURCE OF TRUTH: `MIN_TARGET_PX` in @dloizides/ui-layout
+ * (v1.27.0, src/constants.ts:134). It is re-declared here as a CSS custom
+ * property rather than imported, deliberately:
+ *
+ *   1. ui-layout is a React Native / RN-web package. Its peer dependencies are
+ *      react, react-dom, react-native, react-native-svg and three more
+ *      @dloizides UI packages. This kit is a zero-dependency static Astro
+ *      source distribution (one peer: astro). Pulling that stack in for one
+ *      integer is the wrong trade.
+ *   2. A CSS `min-height` cannot read a JS constant anyway. The value has to
+ *      exist as CSS somewhere, so the only question is how many times — and
+ *      this file is the one place.
+ *
+ * Keep the two in sync: if ui-layout's MIN_TARGET_PX changes, change this.
+ * A host may RAISE this (e.g. a touch-heavy kiosk build); it must never lower
+ * it below 44px, which is the WCAG 2.2 AA target-size floor.
+ */
+:root {
+  --tmk-min-target: 44px;
+}
+
+/* ---------------------------------------------------------------------------
+ * TOPNAV TOUCH TARGETS
+ *
+ * The site header is hand-rolled per marketing site (agora / ichnos / kefi each
+ * own their own `src/components/SiteNav.astro`) but all three emit the SAME
+ * class names, and none of them sets a min-height. Measured at 360x640 on the
+ * deployed sites the brand link came out 36px tall and the nav CTA 41px, on all
+ * three identically. Because the defect is in shared markup conventions rather
+ * than in a shared component, the fix is a selector here rather than a new
+ * component: a site adopts it by importing this file once from its base layout.
+ *
+ * The per-site Astro scoped styles only set colour, font and gap on these
+ * selectors, so there is no min-height to fight; source order decides and this
+ * file is imported last.
+ * ------------------------------------------------------------------------- */
+.topnav .brand,
+.topnav__links > a {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: var(--tmk-min-target);
+  min-width: var(--tmk-min-target);
+}