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_base.html

@@ -10,28 +10,23 @@ Purpose:
     and proper ARIA attributes for accessibility.
 
 Usage Examples:
-    Basic modal:
-        {% include 'components/modals/modal_base.html' with modal_id='my-modal' title='Modal Title' %}
-            {% block modal_body %}
-                <p>Modal content here</p>
-            {% endblock %}
-        {% endinclude %}
+    Basic modal (extending):
+        {% extends 'components/modals/modal_base.html' %}
+        {% block modal_body %}
+            <p>Modal content here</p>
+        {% endblock %}
 
     Modal with footer:
-        <div x-data="{ showModal: false }">
-            <button @click="showModal = true">Open Modal</button>
-            {% include 'components/modals/modal_base.html' with modal_id='confirm-modal' title='Confirm Action' show_var='showModal' %}
-                {% block modal_body %}
-                    <p>Are you sure?</p>
-                {% endblock %}
-                {% block modal_footer %}
-                    <button @click="showModal = false" class="btn-secondary">Cancel</button>
-                    <button @click="confirmAction(); showModal = false" class="btn-primary">Confirm</button>
-                {% endblock %}
-            {% endinclude %}
-        </div>
+        {% extends 'components/modals/modal_base.html' %}
+        {% block modal_body %}
+            <p>Are you sure?</p>
+        {% endblock %}
+        {% block modal_footer %}
+            <button @click="showModal = false" class="btn-secondary">Cancel</button>
+            <button @click="confirmAction(); showModal = false" class="btn-primary">Confirm</button>
+        {% endblock %}
 
-    Different sizes:
+    Include-based usage (pass context via with):
         {% include 'components/modals/modal_base.html' with modal_id='lg-modal' title='Large Modal' size='lg' %}
 
 Parameters:
@@ -66,7 +61,7 @@ Accessibility:
 {% endcomment %}
 
 {# Default values #}
-{% with size=size|default:'md' show_close_button=show_close_button|default:True show_var=show_var|default:'show' close_on_backdrop=close_on_backdrop|default:True close_on_escape=close_on_escape|default:True prevent_scroll=prevent_scroll|default:True %}
+{% with size=size|default:'md' show_close_button=show_close_button|default:True show_var=show_var|default:'show' close_on_backdrop=close_on_backdrop|default:True close_on_escape=close_on_escape|default:True prevent_scroll=prevent_scroll|default:True animation=animation|default:'scale' loading=loading|default:False %}
 
 {# Size classes mapping #}
 {% if size == 'sm' %}

backend/templates/components/modals/modal_form.html

@@ -1,10 +1,10 @@
 {% extends "components/modals/modal_base.html" %}
 
-{% block modal_content %}
+{% block modal_body %}
   <form hx-post="{{ action }}" hx-target="#modal-container" hx-swap="outerHTML">
     {% for field in form %}
       {% include "forms/partials/form_field.html" with field=field %}
     {% endfor %}
     {% include "forms/partials/form_actions.html" %}
   </form>
-{% endblock %}
+{% endblock modal_body %}

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 %}