fix(05-review): IN-03 use useId() instead of Math.random() for headingId in PushPermissionPrompt
This commit is contained in:
@@ -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)',
|
||||||
|
|||||||
Reference in New Issue
Block a user