Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

MFA enrollment QR SVG lacks an accessible name (svg-img-alt)

Aperta Adatta ai principianti
#10,547 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
2/5
Tempo stimato
1-3 ore
Idoneità per principianti
84/100
Tipo di issue
Bug
Chiarezza
Specificata chiaramente
Stato di attività
Attiva
Stack tecnologico
react, typescript

Direzione di ricerca

Inizia da packages/ui/src/common/QRCode.tsx e controlla come viene renderizzato QRCodeSVG e come l’interfaccia di registrazione localizza il testo. Verifica con axe la schermata di registrazione integrata setup-mfa; il lavoro è terminato quando l’SVG del codice QR ha un nome accessibile localizzato e la violazione svg-img-alt è scomparsa.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

Description

The built-in pending setup-mfa authenticator flow renders its QR code as an SVG image without an accessible name. A real Chromium sign-in against a development instance reports axe svg-img-alt (serious) on svg[height="200"].

Reproduction
  1. Render the standard ClerkProvider and SignIn components in a React application.
  2. Require MFA for sign-in and sign in with an account that must complete the setup-mfa session task.
  3. Open the built-in authenticator enrollment screen and run axe on the displayed QR code.

Expected: the SVG image has an accessible name describing its purpose, localized with the rest of the enrollment UI. Actual: no accessible name is supplied, so the scan fails. No application DOM modification is involved.

This was reproduced in an application integration; a standalone public reproduction repository is not attached. The component source independently identifies the omission: QRCode.tsx at Clerk UI 1.42.0 passes the value and size to QRCodeSVG without a title or accessible-label property. Could the built-in component supply a localized accessible name?

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 password sign-in and pending MFA, not mocked provider responses

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

Lingua principale
TypeScript
Stelle
1.8k
Fork
483
Merge medio
1g 20h
PR unite (30g)
363

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di clerk/javascript

Tutte le issue di clerk/javascript

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.