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/modals/modal_inner.html

@@ -1,5 +1,16 @@
 {# Inner modal template - do not use directly, use modal_base.html instead #}
 {# Enhanced with animations, focus trap, and loading states #}
+{% comment %}
+ACCESSIBILITY FEATURES:
+- Focus trap: Tab/Shift+Tab cycles through focusable elements within modal
+- Home/End keys: Jump to first/last focusable element
+- Escape key: Close modal (configurable via close_on_escape)
+- aria-modal="true": Indicates modal dialog semantics
+- aria-labelledby: References modal title for screen readers
+- aria-describedby: References modal body and subtitle for description
+- Automatic focus: First focusable element receives focus on open
+- Focus restoration: Focus returns to trigger element on close (handled by parent)
+{% endcomment %}
 
 {% with animation=animation|default:'scale' loading=loading|default:False %}
 
@@ -30,11 +41,19 @@
             return true;
         }
      "
+     @keydown.home.prevent="
+        const focusables = $el.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])');
+        if (focusables[0]) focusables[0].focus();
+     "
+     @keydown.end.prevent="
+        const focusables = $el.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])');
+        if (focusables[focusables.length - 1]) focusables[focusables.length - 1].focus();
+     "
      class="fixed inset-0 z-[60] flex items-center justify-center p-4"
      role="dialog"
      aria-modal="true"
      {% if title %}aria-labelledby="{{ modal_id }}-title"{% endif %}
-     aria-describedby="{{ modal_id }}-body">
+     {% if subtitle %}aria-describedby="{{ modal_id }}-subtitle {{ modal_id }}-body"{% else %}aria-describedby="{{ modal_id }}-body"{% endif %}>
 
     {# Backdrop #}
     <div class="fixed inset-0 bg-black/50 backdrop-blur-sm"
@@ -103,7 +122,7 @@
                         {{ title }}
                     </h3>
                     {% if subtitle %}
-                    <p class="text-sm text-muted-foreground">{{ subtitle }}</p>
+                    <p id="{{ modal_id }}-subtitle" class="text-sm text-muted-foreground">{{ subtitle }}</p>
                     {% endif %}
                 </div>
             </div>
@@ -115,8 +134,8 @@
             {% if show_close_button %}
             <button type="button"
                     @click="{{ show_var }} = false"
-                    class="p-2 -mr-2 text-muted-foreground hover:text-foreground rounded-lg hover:bg-muted focus:outline-none focus:ring-2 focus:ring-ring transition-colors"
-                    aria-label="Close modal">
+                    class="p-2 -mr-2 text-muted-foreground hover:text-foreground rounded-lg hover:bg-muted focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 transition-colors"
+                    aria-label="Close {{ title|default:'modal' }}">
                 <i class="fas fa-times text-lg" aria-hidden="true"></i>
             </button>
             {% endif %}