fix(05-review): IN-03 use useId() instead of Math.random() for headingId in PushPermissionPrompt

This commit is contained in:
Lucas Berger
2026-06-09 22:21:05 -04:00
parent bf64a0a0e1
commit 76e0fb9588
@@ -17,7 +17,7 @@
* the pushManager.subscribe() call satisfies the iOS user-gesture requirement. * 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 { Bell, Loader2, X } from 'lucide-react'
import { usePushSubscription, prefetchVapidKey } from '../hooks/usePushSubscription.js' import { usePushSubscription, prefetchVapidKey } from '../hooks/usePushSubscription.js'
@@ -60,7 +60,7 @@ export function PushPermissionPrompt({ onClose }: PushPermissionPromptProps) {
const [installed, setInstalled] = useState(false) const [installed, setInstalled] = useState(false)
const [loading, setLoading] = useState(false) const [loading, setLoading] = useState(false)
const [error, setError] = useState<string | null>(null) 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() const { subscribe, permission } = usePushSubscription()
@@ -122,7 +122,7 @@ export function PushPermissionPrompt({ onClose }: PushPermissionPromptProps) {
<div <div
role="dialog" role="dialog"
aria-modal="true" aria-modal="true"
aria-labelledby={headingId.current} aria-labelledby={headingId}
style={{ style={{
position: 'fixed', position: 'fixed',
inset: 0, inset: 0,
@@ -155,7 +155,7 @@ export function PushPermissionPrompt({ onClose }: PushPermissionPromptProps) {
}} }}
> >
<h2 <h2
id={headingId.current} id={headingId}
style={{ style={{
margin: 0, margin: 0,
fontSize: 'var(--text-heading-size, 18px)', fontSize: 'var(--text-heading-size, 18px)',