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 (`