Move DOM selector to selectors file for Uppy

Author: webstackdev

src/components/Pages/Contact/client/selectors.ts

@@ -140,6 +140,7 @@ export const queryUppyDashboardTarget = (uppyContainer: HTMLElement | null): HTM
 }
 
 export type AccessibilityLabelTarget = HTMLInputElement | HTMLTextAreaElement
+export type UppyDashboardRoot = HTMLElement
 
 const isAccessibilityLabelTarget = (element: Element): element is AccessibilityLabelTarget => {
   if (isInputElement(element)) {
@@ -149,12 +150,20 @@ const isAccessibilityLabelTarget = (element: Element): element is AccessibilityL
   return element.tagName === 'TEXTAREA'
 }
 
+const isUppyDashboardRoot = (element: Element): element is UppyDashboardRoot => {
+  return element instanceof HTMLElement && element.matches('.uppy-Dashboard')
+}
+
 export const queryAccessibilityLabelTargets = (root: ParentNode): AccessibilityLabelTarget[] => {
   return Array.from(root.querySelectorAll('input[type="text"], input[type="email"], textarea')).filter(
     isAccessibilityLabelTarget
   )
 }
 
+export const queryUppyDashboardRoots = (root: ParentNode): UppyDashboardRoot[] => {
+  return Array.from(root.querySelectorAll('.uppy-Dashboard')).filter(isUppyDashboardRoot)
+}
+
 export const queryContactProjectTypeSelect = (root: ParentNode = document): HTMLSelectElement | null => {
   const projectTypeSelect = root.querySelector('#project_type')
   return projectTypeSelect instanceof HTMLSelectElement ? projectTypeSelect : null

src/components/Pages/Contact/client/upload.ts

@@ -4,7 +4,11 @@ import Audio from '@uppy/audio'
 import Webcam from '@uppy/webcam'
 
 import type { ContactFormElements } from './@types'
-import { queryAccessibilityLabelTargets, queryUppyDashboardTarget } from './selectors'
+import {
+  queryAccessibilityLabelTargets,
+  queryUppyDashboardRoots,
+  queryUppyDashboardTarget,
+} from './selectors'
 import { isUnitTest } from '@components/scripts/utils/environmentClient'
 
 export interface UploadController {
@@ -73,7 +77,7 @@ export const ensureUppyGeneratedAccessibility = (root: ParentNode & Node): Mutat
     element.setAttribute('aria-label', fallback)
   }
 
-  root.querySelectorAll(UPPY_DASHBOARD_SELECTOR).forEach(applyUppyDashboardSemantics)
+  queryUppyDashboardRoots(root).forEach(applyUppyDashboardSemantics)
   queryAccessibilityLabelTargets(root).forEach(labelIfMissing)
 
   const observer = new MutationObserver(mutations => {
@@ -89,7 +93,7 @@ export const ensureUppyGeneratedAccessibility = (root: ParentNode & Node): Mutat
         }
 
         if ('querySelectorAll' in node) {
-          node.querySelectorAll(UPPY_DASHBOARD_SELECTOR).forEach(applyUppyDashboardSemantics)
+          queryUppyDashboardRoots(node as ParentNode).forEach(applyUppyDashboardSemantics)
           queryAccessibilityLabelTargets(node as ParentNode).forEach(labelIfMissing)
         }
       })