From c5cd2828a547862e17c335933cf5952f6a03fdf7 Mon Sep 17 00:00:00 2001
From: Ken Johnson <cktricky@gmail.com>
Date: Sun, 7 Dec 2025 01:33:45 -0500
Subject: [PATCH] Fix Bootstrap 5 modal aria-hidden focus timing issue
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Added event listeners to manage aria-hidden attribute timing during
modal open/close transitions to prevent accessibility warnings.

Changes:
- Listen to hide.bs.modal to remove aria-hidden before closing
- Listen to hidden.bs.modal to restore aria-hidden after fully closed
- Listen to show.bs.modal to remove aria-hidden when opening
- Use setTimeout to ensure focus has moved before setting aria-hidden

This prevents the "Blocked aria-hidden on element with focus" warning
by ensuring aria-hidden is only set after focus has left the modal.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 app/views/layouts/shared/_header.html.erb | 26 ++++++++++++++++++++---
 1 file changed, 23 insertions(+), 3 deletions(-)

diff --git a/app/views/layouts/shared/_header.html.erb b/app/views/layouts/shared/_header.html.erb
index 1a5b269..9e2fee3 100755
--- a/app/views/layouts/shared/_header.html.erb
+++ b/app/views/layouts/shared/_header.html.erb
@@ -132,24 +132,44 @@
   <script>
     function initCredentialsModal() {
       const showCredsBtn = document.getElementById('show_creds_btn');
-      if (showCredsBtn) {
+      const modalElement = document.getElementById('credentialsModal');
+
+      if (showCredsBtn && modalElement) {
         // Remove any existing listeners
         const newBtn = showCredsBtn.cloneNode(true);
         showCredsBtn.parentNode.replaceChild(newBtn, showCredsBtn);
 
+        // Fix aria-hidden timing issue with Bootstrap 5
+        modalElement.addEventListener('hide.bs.modal', function() {
+          // Remove aria-hidden before the modal closes to prevent focus conflict
+          this.removeAttribute('aria-hidden');
+        });
+
+        modalElement.addEventListener('hidden.bs.modal', function() {
+          // Add aria-hidden back after modal is fully closed and focus has moved
+          setTimeout(() => {
+            this.setAttribute('aria-hidden', 'true');
+          }, 0);
+        });
+
+        modalElement.addEventListener('show.bs.modal', function() {
+          // Ensure aria-hidden is removed when opening
+          this.removeAttribute('aria-hidden');
+        });
+
         newBtn.addEventListener('click', function(event) {
           event.preventDefault();
           fetch('<%= credentials_tutorials_path %>')
             .then(response => response.text())
             .then(html => {
               document.getElementById('modal_content').innerHTML = html;
-              const modal = new bootstrap.Modal(document.getElementById('credentialsModal'));
+              const modal = new bootstrap.Modal(modalElement);
               modal.show();
             })
             .catch(error => {
               console.error('Error loading credentials:', error);
               document.getElementById('modal_content').innerHTML = '<p class="text-danger">Error loading credentials. Please try again.</p>';
-              const modal = new bootstrap.Modal(document.getElementById('credentialsModal'));
+              const modal = new bootstrap.Modal(modalElement);
               modal.show();
             });
         });