From c8e23e4c29c86d9bb7fd2cbceafb7d8731b47cdc Mon Sep 17 00:00:00 2001
From: Johannes Emerich <johannes@dividat.com>
Date: Wed, 14 Feb 2024 16:27:29 +0100
Subject: [PATCH] Wrap use of ':modal' selector in try-catch block

Older browsers that do not support this pseudo-class may throw.
---
 index.js | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/index.js b/index.js
index e849923..64c0d23 100644
--- a/index.js
+++ b/index.js
@@ -271,17 +271,24 @@ function applyFocus(direction, origin, target) {
  * @returns {Element}
  */
 function getBlockingElement() {
-  // Try top-layer pseudo class (2022+ browsers)
-  let trapElements = document.querySelectorAll(":modal")
+  /** @type {Element[]} */
+  let trapElements = []
+  try {
+    // Try top-layer pseudo class (2022+ browsers)
+    trapElements = Array.from(document.querySelectorAll(":modal"))
+  } catch (e) {
+    logging.debug("Browser does not support ':modal' selector, ignoring.")
+  }
   // If none, use fallback selector
   if (trapElements.length === 0) {
-    trapElements = document.querySelectorAll("dialog[open], [data-focus-trap]")
+    trapElements = Array.from(
+      document.querySelectorAll("dialog[open], [data-focus-trap]")
+    )
   }
 
   // If no explicit trap elements were found, body is the top element
   return (
-    getMinimumBy(Array.from(trapElements), (elem) => -getTrapIndex(elem)) ||
-    document.body
+    getMinimumBy(trapElements, (elem) => -getTrapIndex(elem)) || document.body
   )
 }