Add secret management guide, client-side performance monitoring, and search accessibility enhancements

- Introduced a comprehensive Secret Management Guide detailing best practices, secret classification, development setup, production management, rotation procedures, and emergency protocols.
- Implemented a client-side performance monitoring script to track various metrics including page load performance, paint metrics, layout shifts, and memory usage.
- Enhanced search accessibility with keyboard navigation support for search results, ensuring compliance with WCAG standards and improving user experience.

backend/templates/components/ui/button.html

@@ -4,6 +4,16 @@ Button Component - Unified Django Template Version of shadcn/ui Button
 A versatile button component that supports multiple variants, sizes, icons, and both
 button/link elements. Compatible with HTMX and Alpine.js.
 
+ACCESSIBILITY REQUIREMENT:
+  Icon-only buttons (size='icon') MUST include aria_label parameter.
+  This is required for screen reader users to understand the button's purpose.
+
+  Correct usage:
+    {% include 'components/ui/button.html' with size='icon' icon=close_svg aria_label='Close dialog' %}
+
+  INCORRECT - will be inaccessible:
+    {% include 'components/ui/button.html' with size='icon' icon=close_svg %}
+
 Usage Examples:
   Basic button:
     {% include 'components/ui/button.html' with text='Click me' %}
@@ -23,7 +33,7 @@ Usage Examples:
   With SVG icon (preferred):
     {% include 'components/ui/button.html' with icon=search_icon_svg text='Search' %}
 
-  Icon-only button:
+  Icon-only button (REQUIRES aria_label):
     {% include 'components/ui/button.html' with icon=icon_svg size='icon' aria_label='Close' %}
 
 Parameters:
@@ -40,12 +50,18 @@ Parameters:
   - disabled: Boolean to disable the button
   - class: Additional CSS classes
   - id: Element ID
-  - aria_label: Accessibility label (required for icon-only buttons)
+  - aria_label: Accessibility label (REQUIRED for icon-only buttons)
   - onclick: JavaScript click handler
   - hx_get, hx_post, hx_target, hx_swap, hx_trigger, hx_indicator, hx_include: HTMX attributes
   - x_data, x_on_click, x_bind, x_show: Alpine.js attributes
   - attrs: Additional HTML attributes as string
 
+Accessibility Features:
+  - Focus ring: Visible focus indicator (focus-visible:ring-2)
+  - Disabled state: Proper disabled attribute and opacity change
+  - ARIA label: Required for icon-only buttons for screen reader support
+  - Keyboard accessible: All buttons are focusable and activatable via keyboard
+
 Security: Icon SVGs are sanitized using the sanitize_svg filter to prevent XSS attacks.
 {% endcomment %}