Safer query selectors

components/system/Files/FileManager/useFileKeyboardShortcuts.ts

@@ -276,11 +276,16 @@ const useFileKeyboardShortcuts = (
                 if (focusOnEntry) {
                   blurEntry();
                   focusEntry(focusOnEntry);
-                  fileManagerRef.current
+
-                    ?.querySelector(
+                  try {
-                      `button[aria-label='${focusOnEntry.replace(SHORTCUT_EXTENSION, "")}']`
+                    fileManagerRef.current
-                    )
+                      ?.querySelector(
-                    ?.scrollIntoView();
+                        `button[aria-label='${CSS.escape(focusOnEntry.replace(SHORTCUT_EXTENSION, ""))}']`
+                      )
+                      ?.scrollIntoView();
+                  } catch {
+                    // Ignore error getting/scrolling element
+                  }
                 }
               }
           }

components/system/Files/FileManager/useFocusableEntries.ts

@@ -134,14 +134,18 @@ const useFocusableEntries = (
         );
 
         if (lines.length > 1) {
-          const element = fileManagerRef.current?.querySelector(
+          try {
-            `[aria-label='${textLabel}'] figcaption`
+            const element = fileManagerRef.current?.querySelector(
-          );
+              `[aria-label='${CSS.escape(textLabel)}'] figcaption`
+            );
 
-          if (element) {
+            if (element) {
-            $labelHeightOffset =
+              $labelHeightOffset =
-              (lines.length - 1) *
+                (lines.length - 1) *
-              Number.parseFloat(window.getComputedStyle(element).lineHeight);
+                Number.parseFloat(window.getComputedStyle(element).lineHeight);
+            }
+          } catch {
+            // Ignore error getting element
           }
         }
       }

hooks/useGlobalKeyboardShortcuts.ts

@@ -22,10 +22,17 @@ declare global {
   }
 }
 
-export const getNavButtonByTitle = (title: string): HTMLButtonElement | null =>
+export const getNavButtonByTitle = (
-  document.querySelector(
+  title: string
-    `main > nav > div[title='${title}']`
+): HTMLButtonElement | undefined => {
-  ) as HTMLButtonElement;
+  try {
+    return document.querySelector(
+      `main > nav > div[title='${CSS.escape(title)}']`
+    ) as HTMLButtonElement;
+  } catch {
+    return undefined;
+  }
+};
 
 let metaDown = false;
 let metaComboUsed = false;

utils/functions.ts

@@ -510,11 +510,17 @@ export const updateIconPositionsIfEmpty = (
     const entryUrl = join(url, entry);
 
     if (!iconPositions[entryUrl]) {
-      const gridEntry = [...gridElement.children].find((element) =>
+      let gridEntry: Element | undefined;
-        element.querySelector(
+
-          `button[aria-label="${entry.replace(SHORTCUT_EXTENSION, "")}"]`
+      try {
-        )
+        gridEntry = [...gridElement.children].find((element) =>
-      );
+          element.querySelector(
+            `button[aria-label="${CSS.escape(entry.replace(SHORTCUT_EXTENSION, ""))}"]`
+          )
+        );
+      } catch {
+        // Ignore error getting element
+      }
 
       if (gridEntry instanceof HTMLElement) {
         const { x, y, height, width } = gridEntry.getBoundingClientRect();