chore: move setAttribute

src/v2/components/Web3ConnectionManager/WalletSelectorModal/hooks/useIsWalletConnectModalActive.ts

@@ -3,7 +3,7 @@ import { useEffect, useRef, useState } from "react"
 const useIsWalletConnectModalActive = () => {
   const [isWalletConnectModalActive, setIsWalletConnectModalActive] = useState(false)
 
-  const w3mModalRef = useRef(null)
+  const w3mModalRef = useRef<Element | null>(null)
   useEffect(() => {
     if (typeof window === "undefined" || w3mModalRef.current) return
     w3mModalRef.current = document.querySelector("wcm-modal")
@@ -17,6 +17,8 @@ const useIsWalletConnectModalActive = () => {
 
     if (!observerTarget) return
 
+    observerTarget.setAttribute("aria-label", "Web3ConnectionManager")
+
     const mutationCallback: MutationCallback = (mutations, _) => {
       const classNameChange = mutations.find(
         (mutation) => mutation.attributeName === "class"

src/v2/components/Web3ConnectionManager/Web3ConnectionManager.tsx

@@ -32,33 +32,5 @@ export function Web3ConnectionManagerBase() {
 export function Web3ConnectionManager() {
   useTriggerWalletSelectorModal()
 
-  // a11y: WCM misses label from their modal
-  useEffect(() => {
-    function waitQuerySelector(selector: string): Promise<Element> {
-      return new Promise((resolve) => {
-        const elem = document.querySelector(selector)
-        if (elem) {
-          return resolve(elem)
-        }
-        const observer = new MutationObserver(() => {
-          const elem = document.querySelector(selector)
-          if (elem) {
-            observer.disconnect()
-            resolve(elem)
-          }
-        })
-        observer.observe(document.body, {
-          childList: true,
-          subtree: true,
-        })
-      })
-    }
-    waitQuerySelector("wcm-modal").then((element) => {
-      element?.shadowRoot
-        ?.getElementById("wcm-modal")
-        ?.setAttribute("aria-label", "Web3ConnectionManager")
-    })
-  }, [])
-
   return <Web3ConnectionManagerBase />
 }