Built-in reverification dialog lacks an accessible name (aria-dialog-name)

Abierto Apto para principiantes
  • ¿Algo no está bien?
#10,548 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
2/5
Tiempo estimado
1-3 horas
Aptitud para principiantes
75/100
Tipo de issue
Error
Claridad
Bien especificado
Estado de actividad
Activo
Stack tecnológico
react, typescript
Área
accessibility, authentication

Línea de trabajo

Empieza por packages/ui/src/elements/Modal.tsx, la fuente citada del modal estándar. Sigue cómo se renderizan el encabezado localizado visible y el contenedor del diálogo, y luego comprueba si el nombre accesible del diálogo está asociado a ese encabezado. Se dará por terminado cuando axe deje de informar de aria-dialog-name en el desafío de reverificación integrado.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

Description

The built-in reverification modal opens with role="dialog" and aria-modal="true" but no accessible name. A real second-factor reverification challenge reports axe aria-dialog-name (serious) on .cl-modalContent.

Reproduction
  1. Sign in to a React application using ClerkProvider and the standard Clerk sign-in UI, with authenticator MFA enrolled.
  2. Let the actual second-factor age exceed five minutes, then use useReverification for a requirement with level: 'second_factor' and afterMinutes: 5.
  3. Run axe while the built-in reverification challenge is open, before entering the code.

Expected: the dialog has an accessible name, preferably associated with its visible localized heading. Actual: the modal container has neither aria-label nor aria-labelledby; the scan fails. This is not an application-owned dialog.

This was reproduced in an application integration; a standalone public reproduction repository is not attached. The relevant source is Modal.tsx at Clerk UI 1.42.0. Could the standard modal connect its accessible name to the rendered heading? We did not find a supported appearance or reverification option that supplies this semantic label.

Environment
  • @clerk/react 6.18.3; the live browser reports ClerkJS 6.41.0 and Clerk UI 1.42.0 through the public Clerk.version and Clerk.uiVersion fields. ClerkJS 6.42.0 was the initial source-review tag, not the observed hosted runtime.
  • React 19, Linux, Chromium driven by Playwright 1.64.0
  • Real development-instance session and actual elapsed factor age, not mocked provider responses

No account identifiers, credentials or verification codes are included. Exact-rule and broader reverification/accessibility searches found no existing issue. No Clerk support contact was made as part of this report.

Lenguaje dominante
TypeScript
Estrellas
1.8k
Forks
484
Merge medio
1 d 7 h
PR fusionados (30 d)
350

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de clerk/javascript

Todos los issues de clerk/javascript

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.