[TASK] Migrate search-modal to HTML dialog

packages/typo3-docs-theme/assets/sass/components/_search.scss

@@ -1,20 +1,13 @@
 .search-modal {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    z-index: 1050;
+    border: none;
+    background-color: unset;
+    margin-top: 0;
+    padding: 0;
+    width: auto;
     display: flex;
-    align-items: flex-start;
     justify-content: center;
 
-    &__overlay {
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
+    &::backdrop {
         background-color: rgba(0, 0, 0, 0.5);
     }
 

packages/typo3-docs-theme/assets/sass/theme.scss

@@ -33,7 +33,6 @@
 @import 'components/command';
 @import 'components/directoryTree';
 @import 'components/frame';
-@import 'components/globalSearchResults';
 @import 'components/glossary';
 @import 'components/images';
 @import 'components/math';

packages/typo3-docs-theme/resources/js/components/SearchModal.jsx

@@ -11,6 +11,7 @@ const SearchModal = ({ isOpen, onClose }) => {
     const [activeIndex, setActiveIndex] = useState(-1);
     const suggestionsRef = useRef([]);
     const inputRef = useRef();
+    const dialogRef = useRef();
 
     const {
         fileSuggestions,
@@ -179,28 +180,40 @@ const SearchModal = ({ isOpen, onClose }) => {
     }, [activeIndex]);
 
     useEffect(() => {
-        const handleEscape = (e) => {
-            if (e.key === 'Escape') {
-                onClose();
-            }
-        };
+        const dialog = dialogRef.current;
+        if (!dialog) return;
 
-        if (isOpen) {
-            document.addEventListener('keydown', handleEscape);
-            document.body.style.overflow = 'hidden';
+        if (isOpen && !dialog.open) {
+            dialog.showModal();
+        } else if (!isOpen && dialog.open) {
+            dialog.close();
         }
+    }, [isOpen]);
 
-        return () => {
-            document.removeEventListener('keydown', handleEscape);
-            document.body.style.overflow = 'unset';
+    useEffect(() => {
+        const dialog = dialogRef.current;
+        if (!dialog) return;
+
+        const handleClose = () => onClose();
+        dialog.addEventListener('close', handleClose);
+
+        // Polyfill closedby="any" for Safari: clicking the ::backdrop
+        // fires a click on the <dialog> itself, not on any child element.
+        const handleBackdropClick = (e) => {
+            if (e.target === dialog) {
+                dialog.close();
+            }
         };
-    }, [isOpen, onClose]);
+        dialog.addEventListener('click', handleBackdropClick);
 
-    if (!isOpen) return null;
+        return () => {
+            dialog.removeEventListener('close', handleClose);
+            dialog.removeEventListener('click', handleBackdropClick);
+        };
+    }, [onClose]);
 
     return (
-        <div className="search-modal">
-            <div className="search-modal__overlay" onClick={onClose}></div>
+        <dialog ref={dialogRef} id="search-modal" className="search-modal" closedby="any">
             <div className="search-modal__content">
                 <div className="search-modal__header">
                     <div className="search-modal__input-wrapper"
@@ -312,7 +325,7 @@ const SearchModal = ({ isOpen, onClose }) => {
                     )}
                 </ul>
             </div>
-        </div>
+        </dialog>
     );
 };
 

packages/typo3-docs-theme/resources/public/css/theme.css

@@ -24667,10 +24667,6 @@ dl.command .command-arguments section {
   visibility: visible;
 }
 
-#global-search-results button {
-  z-index: unset;
-}
-
 #indexNav {
   background-color: rgb(242.25, 242.25, 242.25);
   border-radius: 8px;
@@ -25237,22 +25233,15 @@ figure.uml-diagram {
 }
 
 .search-modal {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: 1050;
+  border: none;
+  background-color: unset;
+  margin-top: 0;
+  padding: 0;
+  width: auto;
   display: flex;
-  align-items: flex-start;
   justify-content: center;
 }
-.search-modal__overlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
+.search-modal::backdrop {
   background-color: rgba(0, 0, 0, 0.5);
 }
 .search-modal__content {