apps/pwa/src/components/PushPermissionPrompt.tsx

@@ -17,7 +17,7 @@
  *   the pushManager.subscribe() call satisfies the iOS user-gesture requirement.
  */
 
-import { useState, useEffect, useRef } from 'react'
+import { useState, useEffect, useId } from 'react'
 import { Bell, Loader2, X } from 'lucide-react'
 import { usePushSubscription, prefetchVapidKey } from '../hooks/usePushSubscription.js'
 
@@ -60,7 +60,7 @@ export function PushPermissionPrompt({ onClose }: PushPermissionPromptProps) {
   const [installed, setInstalled] = useState(false)
   const [loading, setLoading] = useState(false)
   const [error, setError] = useState<string | null>(null)
-  const headingId = useRef(`push-prompt-heading-${Math.random().toString(36).slice(2)}`)
+  const headingId = useId()
 
   const { subscribe, permission } = usePushSubscription()
 
@@ -122,7 +122,7 @@ export function PushPermissionPrompt({ onClose }: PushPermissionPromptProps) {
     <div
       role="dialog"
       aria-modal="true"
-      aria-labelledby={headingId.current}
+      aria-labelledby={headingId}
       style={{
         position: 'fixed',
         inset: 0,
@@ -155,7 +155,7 @@ export function PushPermissionPrompt({ onClose }: PushPermissionPromptProps) {
           }}
         >
           <h2
-            id={headingId.current}
+            id={headingId}
             style={{
               margin: 0,
               fontSize: 'var(--text-heading-size, 18px)',