From f7773c71d4448897b9a81b4fde34024e2e3505b6 Mon Sep 17 00:00:00 2001
From: Light1YT <evileyecreation@gmail.com>
Date: Tue, 23 Jun 2026 12:52:32 +0500
Subject: [PATCH] fix(site-finder): P3 a11y/UI batch from audit #1871
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- add <h1> page title to analysis page (иерархия стартовала с h2 — a11y)
- emoji → Lucide во всех вердикт/баннер/статус UI (ui-conventions: emoji
  запрещены): GateVerdictBanner (VerdictColor.icon string→ComponentType,
  sourceHint→ReactNode, SectionLabels), + найдены ещё 3 файла:
  OverviewTab (⚠ ЛЭП/трамвай), GeotechRiskBlock (🟡 вечная мерзлота → Snowflake,
  ⚠ загрязнение), HydrologyBlock (⚠ паводок, 🏞💦🪷🚣💧 subtype-map → Waves/Droplet).
  Все иконки декоративные → aria-hidden, семантика дублируется текстом.
  Семантические цвета через var(--success/--warn/--danger) + hex-fallback.
- расшифровка аббревиатур при первом упоминании (ui-microcopy):
  Section2 «строительство в охранной зоне (ОЗ)... зоне с особыми условиями
  использования территорий (ЗОУИТ), тип 5»; Section4 title-tooltip для ЗОУИТ.
- ForecastChart: axis-chrome hex (:65/67/68) задокументирован как canvas-renderer
  исключение (echarts canvas не резолвит CSS var() — var() сломал бы chrome,
  как и VIZ-series). Цвета не тронуты, только комментарий.

НЕ в scope: ForecastChart CI-band (±p25/p75 — backend не отдаёт, отдельная
задача); ★ в WeightProfilePanel <option> (SVG в option невозможен);
токенизация legacy-hex в Geotech/Hydrology (отдельный pass).

138 frontend vitest passed, tsc/lint clean. lucide-react уже в deps.

Refs #1871
---
 .../analysis/[cad]/AnalysisPageContent.tsx    |  12 +++
 .../site-finder/GateVerdictBanner.tsx         | 102 +++++++++++++++---
 .../site-finder/GeotechRiskBlock.tsx          |  15 ++-
 .../components/site-finder/HydrologyBlock.tsx |  31 ++++--
 .../components/site-finder/OverviewTab.tsx    |  21 +++-
 .../site-finder/analysis/ForecastChart.tsx    |  14 ++-
 .../analysis/Section2NetworksUtilities.tsx    |   3 +-
 .../site-finder/analysis/Section4Estimate.tsx |   1 +
 8 files changed, 166 insertions(+), 33 deletions(-)

diff --git a/frontend/src/app/site-finder/analysis/[cad]/AnalysisPageContent.tsx b/frontend/src/app/site-finder/analysis/[cad]/AnalysisPageContent.tsx
index 8d4cc818..db414820 100644
--- a/frontend/src/app/site-finder/analysis/[cad]/AnalysisPageContent.tsx
+++ b/frontend/src/app/site-finder/analysis/[cad]/AnalysisPageContent.tsx
@@ -119,6 +119,18 @@ export function AnalysisPageContent({ cad }: Props) {
       {/* Breadcrumb */}
       <Breadcrumb cad={cad} districtName={districtName} areaStr={areaStr} />
 
+      <h1
+        style={{
+          fontSize: 22,
+          fontWeight: 600,
+          margin: "0 0 12px",
+          color: "var(--fg-primary)",
+        }}
+      >
+        Анализ участка {cad}
+        {districtName && districtName !== "—" ? ` · ${districtName}` : ""}
+      </h1>
+
       {/* Controls row — horizon selector drives the analyze + forecast queries */}
       <div
         style={{
diff --git a/frontend/src/components/site-finder/GateVerdictBanner.tsx b/frontend/src/components/site-finder/GateVerdictBanner.tsx
index 02e503a2..21d733ed 100644
--- a/frontend/src/components/site-finder/GateVerdictBanner.tsx
+++ b/frontend/src/components/site-finder/GateVerdictBanner.tsx
@@ -1,5 +1,15 @@
 "use client";
 import { useState } from "react";
+import type { ComponentType } from "react";
+import {
+  AlertOctagon,
+  AlertTriangle,
+  CheckCircle2,
+  Clock,
+  HelpCircle,
+  XCircle,
+  type LucideProps,
+} from "lucide-react";
 import type { GateVerdict, GateVerdictLabel } from "@/types/site-finder";
 import { SectionLabel } from "@/components/ui/SectionLabel";
 
@@ -10,23 +20,28 @@ interface GateVerdictBannerProps {
 interface VerdictColor {
   bg: string;
   border: string;
-  icon: string;
+  Icon: ComponentType<LucideProps>;
   iconBg: string;
 }
 
 const COLOR_BY_LABEL: Record<GateVerdictLabel, VerdictColor> = {
-  Можно: { bg: "#ecfdf5", border: "#34d399", icon: "✅", iconBg: "#10b981" },
-  Нельзя: { bg: "#fef2f2", border: "#f87171", icon: "🚫", iconBg: "#ef4444" },
+  Можно: {
+    bg: "#ecfdf5",
+    border: "#34d399",
+    Icon: CheckCircle2,
+    iconBg: "#10b981",
+  },
+  Нельзя: { bg: "#fef2f2", border: "#f87171", Icon: XCircle, iconBg: "#ef4444" },
   "С ограничениями": {
     bg: "#fffbeb",
     border: "#fbbf24",
-    icon: "⚠️",
+    Icon: AlertTriangle,
     iconBg: "#f59e0b",
   },
   "Нужна проверка": {
     bg: "#f9fafb",
     border: "#9ca3af",
-    icon: "❓",
+    Icon: HelpCircle,
     iconBg: "#6b7280",
   },
 };
@@ -55,14 +70,32 @@ export function GateVerdictBanner({ verdict }: GateVerdictBannerProps) {
   if (!verdict) return null;
 
   const color = COLOR_BY_LABEL[verdict.verdict_label];
+  const Icon = color.Icon;
   const hasDetails = verdict.blockers.length > 0 || verdict.warnings.length > 0;
 
+  const iconSx = { flexShrink: 0 } as const;
   const sourceHint =
-    verdict.source === "nspd_dump_partial"
-      ? "⏱ устарели"
-      : verdict.source === "no_data"
-        ? "❓ нет данных"
-        : "🟢 свежие";
+    verdict.source === "nspd_dump_partial" ? (
+      <>
+        <Clock size={14} strokeWidth={1.5} aria-hidden style={iconSx} />
+        устарели
+      </>
+    ) : verdict.source === "no_data" ? (
+      <>
+        <HelpCircle size={14} strokeWidth={1.5} aria-hidden style={iconSx} />
+        нет данных
+      </>
+    ) : (
+      <>
+        <CheckCircle2
+          size={14}
+          strokeWidth={1.5}
+          aria-hidden
+          style={{ ...iconSx, color: "var(--success, #0A7A3A)" }}
+        />
+        свежие
+      </>
+    );
 
   const summaryParts: string[] = [];
   if (verdict.blockers.length > 0)
@@ -94,11 +127,10 @@ export function GateVerdictBanner({ verdict }: GateVerdictBannerProps) {
             display: "flex",
             alignItems: "center",
             justifyContent: "center",
-            fontSize: 20,
             flexShrink: 0,
           }}
         >
-          {color.icon}
+          <Icon size={20} strokeWidth={1.5} aria-hidden />
         </div>
         <div style={{ flex: 1, minWidth: 0 }}>
           <div style={{ fontSize: 18, fontWeight: 700, color: "#111827" }}>
@@ -107,7 +139,15 @@ export function GateVerdictBanner({ verdict }: GateVerdictBannerProps) {
           <div style={{ fontSize: 12, color: "#6b7280", marginTop: 2 }}>
             {summaryText}
             {" · "}
-            <span title={SOURCE_LABEL[verdict.source] ?? verdict.source}>
+            <span
+              title={SOURCE_LABEL[verdict.source] ?? verdict.source}
+              style={{
+                display: "inline-flex",
+                alignItems: "center",
+                gap: 4,
+                verticalAlign: "middle",
+              }}
+            >
               {sourceHint}
             </span>
           </div>
@@ -142,7 +182,23 @@ export function GateVerdictBanner({ verdict }: GateVerdictBannerProps) {
         >
           {verdict.blockers.length > 0 && (
             <div style={{ marginBottom: 12 }}>
-              <SectionLabel>🚫 Блокеры</SectionLabel>
+              <SectionLabel>
+                <span
+                  style={{
+                    display: "inline-flex",
+                    alignItems: "center",
+                    gap: 6,
+                  }}
+                >
+                  <AlertOctagon
+                    size={16}
+                    strokeWidth={1.5}
+                    aria-hidden
+                    style={{ flexShrink: 0, color: "var(--danger, #B3261E)" }}
+                  />
+                  Блокеры
+                </span>
+              </SectionLabel>
               <ul
                 style={{
                   marginTop: 4,
@@ -161,7 +217,23 @@ export function GateVerdictBanner({ verdict }: GateVerdictBannerProps) {
           )}
           {verdict.warnings.length > 0 && (
             <div style={{ marginBottom: 12 }}>
-              <SectionLabel>⚠️ Предупреждения</SectionLabel>
+              <SectionLabel>
+                <span
+                  style={{
+                    display: "inline-flex",
+                    alignItems: "center",
+                    gap: 6,
+                  }}
+                >
+                  <AlertTriangle
+                    size={16}
+                    strokeWidth={1.5}
+                    aria-hidden
+                    style={{ flexShrink: 0, color: "var(--warn, #9A6700)" }}
+                  />
+                  Предупреждения
+                </span>
+              </SectionLabel>
               <ul
                 style={{
                   marginTop: 4,
diff --git a/frontend/src/components/site-finder/GeotechRiskBlock.tsx b/frontend/src/components/site-finder/GeotechRiskBlock.tsx
index 83030a54..c669a56c 100644
--- a/frontend/src/components/site-finder/GeotechRiskBlock.tsx
+++ b/frontend/src/components/site-finder/GeotechRiskBlock.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { AlertTriangle, Snowflake } from "lucide-react";
 import type { GeotechRisk } from "@/types/site-finder";
 
 interface Props {
@@ -93,7 +94,12 @@ export function GeotechRiskBlock({ risk }: Props) {
             color: "#374151",
           }}
         >
-          <span>🟡</span>
+          <Snowflake
+            size={16}
+            strokeWidth={1.5}
+            aria-hidden
+            style={{ flexShrink: 0, color: "#92400e" }}
+          />
           <span>Вечная мерзлота — особые фундаменты</span>
         </div>
       )}
@@ -114,7 +120,12 @@ export function GeotechRiskBlock({ risk }: Props) {
             gap: 6,
           }}
         >
-          <span>⚠</span>
+          <AlertTriangle
+            size={16}
+            strokeWidth={1.5}
+            aria-hidden
+            style={{ flexShrink: 0 }}
+          />
           <span>
             {risk.industrial_within_500m} промзон(ы) в &lt;500м (риск
             загрязнения почв)
diff --git a/frontend/src/components/site-finder/HydrologyBlock.tsx b/frontend/src/components/site-finder/HydrologyBlock.tsx
index ed32f9d4..7f555320 100644
--- a/frontend/src/components/site-finder/HydrologyBlock.tsx
+++ b/frontend/src/components/site-finder/HydrologyBlock.tsx
@@ -1,16 +1,21 @@
 "use client";
 
+import type { ComponentType } from "react";
+import { AlertTriangle, Droplet, Waves, type LucideProps } from "lucide-react";
 import type { Hydrology, HydrologyNearest } from "@/types/site-finder";
 
 interface Props {
   hydrology: Hydrology;
 }
 
-const SUBTYPE_ICON: Record<string, string> = {
-  river: "🏞",
-  stream: "💦",
-  lake_or_pond: "🪷",
-  canal: "🚣",
+// Decorative water glyph per subtype — the text label already names the body
+// (река / ручей / озеро / канал), so the icon is aria-hidden. Lucide has no
+// distinct lake/canal glyph; flowing bodies use Waves, the rest use Droplet.
+const SUBTYPE_ICON: Record<string, ComponentType<LucideProps>> = {
+  river: Waves,
+  stream: Droplet,
+  lake_or_pond: Waves,
+  canal: Waves,
 };
 
 function subtypeLabel(subtype: HydrologyNearest["subtype"]): string {
@@ -63,7 +68,12 @@ export function HydrologyBlock({ hydrology }: Props) {
             gap: 6,
           }}
         >
-          <span>⚠</span>
+          <AlertTriangle
+            size={16}
+            strokeWidth={1.5}
+            aria-hidden
+            style={{ flexShrink: 0 }}
+          />
           <span>Возможная пойма — река/канал в &lt;200м</span>
         </div>
       )}
@@ -76,7 +86,7 @@ export function HydrologyBlock({ hydrology }: Props) {
       ) : (
         <div style={{ display: "flex", flexDirection: "column", gap: 5 }}>
           {top5.map((item, i) => {
-            const icon = SUBTYPE_ICON[item.subtype ?? ""] ?? "💧";
+            const Icon = SUBTYPE_ICON[item.subtype ?? ""] ?? Droplet;
             const label = subtypeLabel(item.subtype);
             const name = item.name ?? "б/н";
             return (
@@ -90,7 +100,12 @@ export function HydrologyBlock({ hydrology }: Props) {
                   color: "#374151",
                 }}
               >
-                <span>{icon}</span>
+                <Icon
+                  size={16}
+                  strokeWidth={1.5}
+                  aria-hidden
+                  style={{ flexShrink: 0, color: "#0369a1" }}
+                />
                 <span>
                   {name} {label} — {Math.round(item.distance_m)} м
                 </span>
diff --git a/frontend/src/components/site-finder/OverviewTab.tsx b/frontend/src/components/site-finder/OverviewTab.tsx
index 595a6e51..ab0f9030 100644
--- a/frontend/src/components/site-finder/OverviewTab.tsx
+++ b/frontend/src/components/site-finder/OverviewTab.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { AlertTriangle } from "lucide-react";
 import type { FeatureCollection } from "geojson";
 import type { ParcelAnalysis } from "@/types/site-finder";
 import { SectionLabel } from "@/components/ui/SectionLabel";
@@ -185,13 +186,24 @@ export function OverviewTab({ data, onIsochronesResult }: Props) {
             {data.utilities.power_line_охранная_зона_flag && (
               <div
                 style={{
+                  display: "flex",
+                  alignItems: "center",
+                  gap: 6,
                   fontSize: 12,
                   color: "#b3261e",
                   fontWeight: 600,
                   marginTop: 4,
                 }}
               >
-                ⚠ Охранная зона ЛЭП — капитальное строительство запрещено
+                <AlertTriangle
+                  size={16}
+                  strokeWidth={1.5}
+                  aria-hidden
+                  style={{ flexShrink: 0 }}
+                />
+                <span>
+                  Охранная зона ЛЭП — капитальное строительство запрещено
+                </span>
               </div>
             )}
           </div>
@@ -212,7 +224,12 @@ export function OverviewTab({ data, onIsochronesResult }: Props) {
             gap: 8,
           }}
         >
-          <span style={{ fontSize: 16 }}>⚠</span>
+          <AlertTriangle
+            size={16}
+            strokeWidth={1.5}
+            aria-hidden
+            style={{ flexShrink: 0 }}
+          />
           <span>Трамвай в {nearestTram} м — возможный источник шума</span>
         </div>
       )}
diff --git a/frontend/src/components/site-finder/analysis/ForecastChart.tsx b/frontend/src/components/site-finder/analysis/ForecastChart.tsx
index 469d77cf..ab811474 100644
--- a/frontend/src/components/site-finder/analysis/ForecastChart.tsx
+++ b/frontend/src/components/site-finder/analysis/ForecastChart.tsx
@@ -61,11 +61,15 @@ const VIZ: Record<ScenarioKey, string> = {
 
 // Single-line fallback colour (ui-tokens: одиночная линия — #374151).
 const SINGLE_LINE = "#374151";
-// Prediction / forecast (dashed) — --prediction-line.
-const PREDICTION_LINE = "#0EA5E9";
-// Axis chrome.
-const FG_SECONDARY = "#5B6066";
-const BORDER_STRONG = "#D1D5DB";
+// Chrome colours below are intentionally raw hex, NOT var(--token), for the same
+// reason as VIZ above: ChartShell renders via echarts-for-react with the default
+// CANVAS renderer (no opts.renderer:"svg"), and the canvas 2D context does not
+// resolve CSS custom properties — `var(--x)` would paint as transparent/black.
+// Values mirror ui-tokens.md exactly: --prediction-line, --fg-secondary,
+// --border-strong. Keep in sync with ui-tokens.md by hand.
+const PREDICTION_LINE = "#0EA5E9"; // --prediction-line
+const FG_SECONDARY = "#5B6066"; // --fg-secondary
+const BORDER_STRONG = "#D1D5DB"; // --border-strong
 
 // ── Tooltip row type (echarts-for-react gives loose params; narrow ourselves) ──
 interface TooltipParam {
diff --git a/frontend/src/components/site-finder/analysis/Section2NetworksUtilities.tsx b/frontend/src/components/site-finder/analysis/Section2NetworksUtilities.tsx
index 77209674..460a47de 100644
--- a/frontend/src/components/site-finder/analysis/Section2NetworksUtilities.tsx
+++ b/frontend/src/components/site-finder/analysis/Section2NetworksUtilities.tsx
@@ -804,7 +804,8 @@ export function Section2NetworksUtilities({ cad }: Props) {
           />
           <span>
             Участок находится в охранной зоне ЛЭП ≥35 кВ. Капитальное
-            строительство в ОЗ запрещено (СП 36.13330, ЗОУИТ тип 5).
+            строительство в охранной зоне (ОЗ) запрещено (СП 36.13330). Участок
+            в зоне с особыми условиями использования территорий (ЗОУИТ), тип 5.
           </span>
         </div>
       )}
diff --git a/frontend/src/components/site-finder/analysis/Section4Estimate.tsx b/frontend/src/components/site-finder/analysis/Section4Estimate.tsx
index 118dea0a..8cc5be9d 100644
--- a/frontend/src/components/site-finder/analysis/Section4Estimate.tsx
+++ b/frontend/src/components/site-finder/analysis/Section4Estimate.tsx
@@ -219,6 +219,7 @@ export function Section4Estimate({ cad }: Props) {
           }}
         >
           <div
+            title="Зоны с особыми условиями использования территорий — охранные зоны инженерной инфраструктуры (ЛЭП, газопровод и т.д.)"
             style={{
               fontSize: 12,
               fontWeight: 600,
-- 
2.45.3