From dcbdd6cf7030eeb2b554f34122e9b6afa1d162dd Mon Sep 17 00:00:00 2001 From: "google-labs-jules[bot]" <161369871+google-labs-jules[bot]@users.noreply.github.com> Date: Sat, 16 May 2026 17:22:59 +0000 Subject: [PATCH] [docs: autonomous-visual-synthesis] Inject Mermaid diagrams and update sidebar for Design UI Injected logic flow Mermaid diagrams for styling, accessibility, and responsive design, applying the correct design tokens. Added missing Design UI modules alphabetically into the `_sidebar.md` to prevent orphaned files. Verified sitemap generation and visual scannability. Co-authored-by: beginwebdev2002 <102213457+beginwebdev2002@users.noreply.github.com> --- _sidebar.md | 3 + frontend/design-ui/accessibility.md | 14 + frontend/design-ui/component-architecture.md | 14 + frontend/design-ui/readme.md | 1 + frontend/design-ui/responsive-design.md | 14 + frontend/design-ui/styling.md | 14 + sitemap.xml | 312 +++++++++++-------- 7 files changed, 243 insertions(+), 129 deletions(-) diff --git a/_sidebar.md b/_sidebar.md index 17acc05..3c78772 100644 --- a/_sidebar.md +++ b/_sidebar.md @@ -159,7 +159,10 @@ * [State management](frontend/angular/state-management.md) * [Testing](frontend/angular/testing.md) * **Design ui** + * [Accessibility](frontend/design-ui/accessibility.md) + * [Component architecture](frontend/design-ui/component-architecture.md) * [Overview](frontend/design-ui/readme.md) + * [Responsive design](frontend/design-ui/responsive-design.md) * [Styling](frontend/design-ui/styling.md) * **Javascript** * [Overview](frontend/javascript/readme.md) diff --git a/frontend/design-ui/accessibility.md b/frontend/design-ui/accessibility.md index e03f550..9c66877 100644 --- a/frontend/design-ui/accessibility.md +++ b/frontend/design-ui/accessibility.md @@ -32,6 +32,20 @@ This document enforces strict adherence to semantic HTML and accessibility guide | **Generic Wrappers (Anti-Pattern)** | Manual JS Event Listeners | None | ❌ Avoid | Breaks native accessibility protocols; requires O(n) custom event management. | | **Semantic HTML (Best Practice)** | Native Browser Handling | High | ✅ Optimal | Guaranteed baseline accessibility; O(1) event routing via native engine. | +```mermaid +graph LR + A([♿ Interactive Element]) -->|Anti-Pattern| B([Generic div/span Wrappers]) + B -->|Requires| C([Manual JS Event & ARIA mgmt]) + + A -->|Best Practice| D([Semantic HTML]) + D -->|Inherits| E([Native Browser Accessibility]) + + classDef default fill:#e1f5fe,stroke:#03a9f4,stroke-width:2px,color:#000; + classDef component fill:#e8f5e9,stroke:#4caf50,stroke-width:2px,color:#000; + class A,B,C default; + class D,E component; +``` + > [!CAUTION] > **Semantic Constraint:** AI Agents MUST strictly enforce Semantic HTML tags (`