Fix accessibility: Focus target element on in-page anchor navigation (#60152)

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Author: heiskr

src/frame/components/ClientSideHashFocus.tsx

@@ -0,0 +1,25 @@
+import { useEffect } from 'react'
+
+// When an in-page anchor link is clicked (e.g. href="#section-id"),
+// browsers scroll to the target but may not move keyboard focus to it.
+// This component listens for hash changes and programmatically focuses
+// the target element so screen reader and keyboard users land at the
+// correct position.
+export function ClientSideHashFocus() {
+  useEffect(() => {
+    const handleHashChange = () => {
+      const hash = window.location.hash.slice(1)
+      if (!hash) return
+
+      const target = document.getElementById(hash)
+      if (target) {
+        target.focus({ preventScroll: true })
+      }
+    }
+
+    window.addEventListener('hashchange', handleHashChange)
+    return () => window.removeEventListener('hashchange', handleHashChange)
+  }, [])
+
+  return null
+}

src/frame/pages/app.tsx

@@ -18,6 +18,7 @@ import {
 import { useTheme } from '@/color-schemes/components/useTheme'
 import { SharedUIContextProvider } from '@/frame/components/context/SharedUIContext'
 import { CTAPopoverProvider } from '@/frame/components/context/CTAContext'
+import { ClientSideHashFocus } from '@/frame/components/ClientSideHashFocus'
 import type { ExtendedRequest } from '@/types'
 
 type MyAppProps = AppProps & {
@@ -146,6 +147,7 @@ const MyApp = ({ Component, pageProps, languagesContext, stagingName }: MyAppPro
         <LanguagesContext.Provider value={languagesContext}>
           <SharedUIContextProvider>
             <CTAPopoverProvider>
+              <ClientSideHashFocus />
               <Component {...pageProps} />
             </CTAPopoverProvider>
           </SharedUIContextProvider>