[WebProfilerBundle] Close profiler settings on escape

norkunas · norkunas · commit 7e768e9699d4 · 2023-01-17T17:43:46.000+02:00
diff --git a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/settings.html.twig b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/settings.html.twig
@@ -49,7 +49,7 @@
     height: 100%;
     justify-content: center;
     left: 0;
-    opacity: 1;
+    opacity: 0;
     overflow: auto;
     position: fixed;
     top: 0;
@@ -195,7 +195,7 @@
     <div class="modal-container">
         <div class="modal-header">
             <h3>Configuration Settings</h3>
-            <button class="close-modal">&times;</button>
+            <button aria-label="Close" class="close-modal">&times;</button>
         </div>
 
         <div class="modal-content">
@@ -282,22 +282,30 @@
     const openModalButton = document.getElementById('open-settings');
     const modalWindow = document.getElementById('profiler-settings');
     const closeModalButton = document.getElementsByClassName('close-modal')[0];
-    const modalWrapper = document.getElementsByClassName('modal-wrap')[0]
+    const modalWrapper = document.getElementsByClassName('modal-wrap')[0];
+    const closeModal = () => {
+        modalWindow.classList.remove('visible');
+        setTimeout(() => openModalButton.focus(), 30);
+    };
 
     openModalButton.addEventListener('click', function(event) {
         document.getElementById('settings-' + (localStorage.getItem('symfony/profiler/theme') || 'theme-auto')).checked = 'checked';
         document.getElementById('settings-' + (localStorage.getItem('symfony/profiler/width') || 'width-normal')).checked = 'checked';
 
         modalWindow.classList.toggle('visible');
+        setTimeout(() => closeModalButton.focus(), 30);
         event.preventDefault();
     });
 
-    closeModalButton.addEventListener('click', function() {
-        modalWindow.classList.remove('visible');
-    });
+    closeModalButton.addEventListener('click', closeModal);
     modalWrapper.addEventListener('click', function(event) {
         if (event.target == event.currentTarget) {
-            modalWindow.classList.remove('visible');
+            closeModal();
+        }
+    });
+    modalWrapper.addEventListener('keydown', function(event) {
+        if (event.key === 'Esc' || event.key === 'Escape') {
+            closeModal();
         }
     });
 })();
