Enhance accessibility and user experience across modals and dialogs

- Added ARIA roles and labels to modals in haproxy_config templates for improved screen reader support.
- Included aria-label attributes on buttons to provide context for actions (e.g., close, cancel).
- Implemented live value displays next to chart titles in metrics page for better visibility of current data.
- Updated keydown event handlers to prevent default actions on Escape key to avoid unintended navigation or dialog closures.
- Improved handling of focusable elements and overlays to ensure a smoother user experience when interacting with modals.

Author: sarg3nt

gearbox/internal/framework/templates/pages/alert_rules.templ

@@ -112,11 +112,11 @@ templ AlertRulesPage(user *models.User, serverID string, serverName string, serv
 		</div>
 
 		<!-- Add/Edit Rule Modal -->
-		<div id="add-rule-modal" class="hidden fixed inset-0 bg-black/50 flex items-center justify-center z-50">
+		<div id="add-rule-modal" role="dialog" aria-modal="true" aria-labelledby="modal-title" class="hidden fixed inset-0 bg-black/50 flex items-center justify-center z-50">
 			<div class="bg-white dark:bg-slate-800 rounded-lg shadow-xl max-w-lg w-full mx-4 max-h-[90vh] overflow-y-auto">
 				<div class="p-4 border-b border-gray-200 dark:border-slate-700 flex items-center justify-between">
 					<h3 id="modal-title" class="text-lg font-semibold text-gray-800 dark:text-gray-200">Add Alert Rule</h3>
-					<button onclick="hideAddRuleModal()" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
+					<button onclick="hideAddRuleModal()" aria-label="Close" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
 						<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
 							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
 						</svg>

gearbox/internal/framework/templates/pages/alerts.templ

@@ -162,11 +162,11 @@ templ AlertsPage(user *models.User, servers []models.BoxConfig, perms *models.Us
 			</div>
 
 			<!-- Alert Detail Modal -->
-			<div id="alert-detail-modal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+			<div id="alert-detail-modal" role="dialog" aria-modal="true" aria-labelledby="alert-detail-modal-title" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
 				<div class="bg-white dark:bg-slate-800 rounded-lg shadow-xl max-w-2xl w-full mx-4 max-h-[90vh] overflow-y-auto">
 					<div class="p-4 border-b border-gray-200 dark:border-slate-700 flex justify-between items-center">
-						<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100">Alert Details</h3>
-						<button onclick="hideAlertDetailModal()" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
+						<h3 id="alert-detail-modal-title" class="text-lg font-semibold text-gray-800 dark:text-gray-100">Alert Details</h3>
+						<button onclick="hideAlertDetailModal()" aria-label="Close" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
 							<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
 								<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
 							</svg>
@@ -251,11 +251,11 @@ templ AlertsPage(user *models.User, servers []models.BoxConfig, perms *models.Us
 			</div>
 
 			<!-- Bulk Action Prompt Modal -->
-			<div id="bulk-action-modal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+			<div id="bulk-action-modal" role="dialog" aria-modal="true" aria-labelledby="bulk-action-title" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
 				<div class="bg-white dark:bg-slate-800 rounded-lg shadow-xl max-w-md w-full mx-4">
 					<div class="p-4 border-b border-gray-200 dark:border-slate-700 flex justify-between items-center">
 						<h3 id="bulk-action-title" class="text-lg font-semibold text-gray-800 dark:text-gray-100">Bulk Action</h3>
-						<button onclick="closeBulkActionModal(false)" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
+						<button onclick="closeBulkActionModal(false)" aria-label="Close" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
 							<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
 								<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
 							</svg>

gearbox/internal/framework/templates/pages/firewall_config.templ

@@ -144,7 +144,7 @@ templ FirewallConfigPage(user *models.User, server *database.BoxDB, config *agen
 		<!-- Validation Error Modal — shown when Save & Apply runs into errors.
 		     Real-time errors stay inline on the editor lines; this modal is
 		     specifically for the "you tried to save invalid config" case. -->
-		<div id="firewall-error-modal" class="hidden fixed inset-0 z-50 overflow-y-auto">
+		<div id="firewall-error-modal" role="dialog" aria-modal="true" aria-label="Configuration error" class="hidden fixed inset-0 z-50 overflow-y-auto">
 			<div class="flex items-center justify-center min-h-screen px-4">
 				<div class="fixed inset-0 bg-black bg-opacity-50" data-firewall-error-dismiss></div>
 				<div class="relative bg-white dark:bg-slate-800 rounded-lg shadow-xl max-w-2xl w-full">
@@ -171,7 +171,7 @@ templ FirewallConfigPage(user *models.User, server *database.BoxDB, config *agen
 		</div>
 
 		<!-- Snippets Modal — curated nftables patterns the user can insert. -->
-		<div id="firewall-snippets-modal" class="hidden fixed inset-0 z-50 overflow-y-auto">
+		<div id="firewall-snippets-modal" role="dialog" aria-modal="true" aria-label="Insert nftables snippet" class="hidden fixed inset-0 z-50 overflow-y-auto">
 			<div class="flex items-center justify-center min-h-screen px-4">
 				<div class="fixed inset-0 bg-black bg-opacity-50" data-firewall-snippets-dismiss></div>
 				<div class="relative bg-white dark:bg-slate-800 rounded-lg shadow-xl max-w-4xl w-full max-h-[85vh] flex flex-col">
@@ -207,7 +207,7 @@ templ FirewallConfigPage(user *models.User, server *database.BoxDB, config *agen
 		</div>
 
 		<!-- Backups Modal (kept simple; matches the existing site pattern) -->
-		<div id="firewall-backups-modal" class="hidden fixed inset-0 z-50 overflow-y-auto">
+		<div id="firewall-backups-modal" role="dialog" aria-modal="true" aria-label="Configuration backups" class="hidden fixed inset-0 z-50 overflow-y-auto">
 			<div class="flex items-center justify-center min-h-screen px-4">
 				<div class="fixed inset-0 bg-black bg-opacity-50" data-firewall-modal-dismiss></div>
 				<div class="relative bg-white dark:bg-slate-800 rounded-lg shadow-xl max-w-2xl w-full p-6">

gearbox/internal/framework/templates/pages/haproxy_config/modals.templ

@@ -2,7 +2,7 @@ package haproxy_config
 
 templ Modals() {
 	<!-- Backups Modal -->
-	<div id="backups-modal" class="hidden fixed inset-0 z-50 overflow-y-auto">
+	<div id="backups-modal" role="dialog" aria-modal="true" aria-label="Configuration backups" class="hidden fixed inset-0 z-50 overflow-y-auto">
 		<div class="flex items-center justify-center min-h-screen px-4">
 			<div id="backups-modal-backdrop" class="fixed inset-0 bg-black bg-opacity-50"></div>
 			<div class="relative bg-white dark:bg-slate-800 rounded-lg shadow-xl max-w-2xl w-full p-6">
@@ -19,7 +19,7 @@ templ Modals() {
 		</div>
 	</div>
 	<!-- Error Dialog for tampered markers -->
-	<div id="marker-error-modal" class="hidden fixed inset-0 z-50 overflow-y-auto">
+	<div id="marker-error-modal" role="dialog" aria-modal="true" aria-label="Configuration error" class="hidden fixed inset-0 z-50 overflow-y-auto">
 		<div class="flex items-center justify-center min-h-screen px-4">
 			<div class="fixed inset-0 bg-black bg-opacity-50"></div>
 			<div class="relative bg-white dark:bg-slate-800 rounded-lg shadow-xl max-w-2xl w-full">
@@ -56,7 +56,7 @@ templ Modals() {
 		</div>
 	</div>
 	<!-- Save Reason Dialog -->
-	<div id="save-reason-modal" class="hidden fixed inset-0 z-50 overflow-y-auto">
+	<div id="save-reason-modal" role="dialog" aria-modal="true" aria-label="Save configuration" class="hidden fixed inset-0 z-50 overflow-y-auto">
 		<div class="flex items-center justify-center min-h-screen px-4">
 			<div id="save-reason-backdrop" class="fixed inset-0 bg-black bg-opacity-50"></div>
 			<div class="relative bg-white dark:bg-slate-800 rounded-lg shadow-xl max-w-md w-full">
@@ -103,7 +103,7 @@ templ Modals() {
 		</div>
 	</div>
 	<!-- Validation Output Dialog -->
-	<div id="validation-modal" class="hidden fixed inset-0 z-50 overflow-y-auto">
+	<div id="validation-modal" role="dialog" aria-modal="true" aria-labelledby="validation-modal-title" class="hidden fixed inset-0 z-50 overflow-y-auto">
 		<div class="flex items-center justify-center min-h-screen px-4">
 			<div id="validation-modal-backdrop" class="fixed inset-0 bg-black bg-opacity-50"></div>
 			<div class="relative bg-white dark:bg-slate-800 rounded-lg shadow-xl max-w-2xl w-full">
@@ -134,7 +134,7 @@ templ Modals() {
 		</div>
 	</div>
 	<!-- Insert Snippets Modal -->
-	<div id="snippets-modal" class="hidden fixed inset-0 z-50 overflow-y-auto">
+	<div id="snippets-modal" role="dialog" aria-modal="true" aria-label="Insert configuration snippet" class="hidden fixed inset-0 z-50 overflow-y-auto">
 		<div class="flex items-center justify-center min-h-screen px-4">
 			<div id="snippets-modal-backdrop" class="fixed inset-0 bg-black bg-opacity-50"></div>
 			<div class="relative bg-white dark:bg-slate-800 rounded-lg shadow-xl max-w-4xl w-full max-h-[85vh] flex flex-col">

gearbox/internal/framework/templates/pages/haproxy_settings.templ

@@ -225,7 +225,7 @@ templ HAProxyBoxesPageContent(user *models.User, servers []*database.BoxDB) {
 						</div>
 					</div>
 					<div class="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
-						<button type="button" onclick="closeNotesModal()" class="w-full inline-flex justify-center rounded-md border border-gray-300 dark:border-gray-600 shadow-sm px-4 py-2 bg-white dark:bg-slate-700 text-base font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-slate-600 sm:w-auto sm:text-sm">
+						<button type="button" onclick="closeNotesModal()" aria-label="Close" class="w-full inline-flex justify-center rounded-md border border-gray-300 dark:border-gray-600 shadow-sm px-4 py-2 bg-white dark:bg-slate-700 text-base font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-slate-600 sm:w-auto sm:text-sm">
 							Close
 						</button>
 					</div>
@@ -263,7 +263,7 @@ templ HAProxyBoxesPageContent(user *models.User, servers []*database.BoxDB) {
 						<button type="button" id="delete-confirm-btn" onclick="confirmDeleteServer()" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 sm:ml-3 sm:w-auto sm:text-sm">
 							Yes, Delete
 						</button>
-						<button type="button" onclick="closeDeleteModal()" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 dark:border-gray-600 shadow-sm px-4 py-2 bg-white dark:bg-slate-700 text-base font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-slate-600 sm:mt-0 sm:w-auto sm:text-sm">
+						<button type="button" onclick="closeDeleteModal()" aria-label="Cancel" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 dark:border-gray-600 shadow-sm px-4 py-2 bg-white dark:bg-slate-700 text-base font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-slate-600 sm:mt-0 sm:w-auto sm:text-sm">
 							No, Cancel
 						</button>
 					</div>