From 76e0fb9588fddf15208387d0ffc5626706e79f78 Mon Sep 17 00:00:00 2001
From: Lucas Berger <me@lucasberger.ca>
Date: Tue, 9 Jun 2026 22:21:05 -0400
Subject: [PATCH] fix(05-review): IN-03 use useId() instead of Math.random()
 for headingId in PushPermissionPrompt

---
 apps/pwa/src/components/PushPermissionPrompt.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/apps/pwa/src/components/PushPermissionPrompt.tsx b/apps/pwa/src/components/PushPermissionPrompt.tsx
index 54b7aae..d71ea2a 100644
--- a/apps/pwa/src/components/PushPermissionPrompt.tsx
+++ b/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)',