<SignIn />: the reset password code step renders an empty, focusable back button with no accessible name

Offen Anfängerfreundlich
  • Stimmt etwas nicht?
#10,708 0 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Maintainer antworten meist innerhalb von 1 Tag

Dieses Issue hat noch niemand übernommen.

Bewertung

Schwierigkeit
2/5
Geschätzter Aufwand
1-3 Stunden
Anfängerfreundlichkeit
85/100
Issue-Typ
Bug
Klarheit
Klar beschrieben
Aktivitätsstatus
Aktiv
Tech-Stack
react, typescript
Bereich
accessibility, authentication

Rechercherichtung

Lies packages/ui/src/components/SignIn/SignInFactorOneForgotPasswordCard.tsx und verfolge, wie die Props an die Karte für den Verifizierungscode übergeben werden. Das Issue nennt backLinkLabel als fehlend und schlägt vor, die lokalisierte Beschriftung der Zurück-Schaltfläche zu verwenden; prüfe den zugehörigen Code in VerificationCodeCard.tsx und den Ablauf zum Zurücksetzen des Passworts bei der Anmeldung. Fertig ist die Arbeit, wenn der Schritt mit dem Reset-Code eine barrierefreie Bezeichnung für die Zurück-Schaltfläche hat und der Verstoß gegen die Barrierefreiheit bei der Schaltflächenbezeichnung behoben ist.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

Preliminary Checks
Reproduction

https://upward-hare-2386.accounts.dev/sign-in

Publishable key

pk_test_dXB3YXJkLWhhcmUtMjM4Ni5jbGVyay5hY2NvdW50cy5kZXYk

Description

The reproduction is the hosted Account Portal of a brand-new development application, created only for this report and left on Clerk's default settings (email + password). It has no appearance, no localization and no custom CSS. Test user: [email protected].

Steps to reproduce:

  1. Open the sign-in page above and enter [email protected].
  2. On the password step, click Forgot password?
  3. Click Reset your password.
  4. On the Reset password code step, press Tab from Continue, or run axe on the card.

Expected behavior:

A labelled "Back" button, or no button at all.

Actual behavior:

An empty ghost button is rendered below Continue:

<button class="cl-formButtonReset cl-button 🔒️ cl-internal-sbng93" data-variant="ghost" data-color="primary"></button>
  • It is 400×14 px, focusable (tabIndex 0) and the next Tab stop after Continue. When focused, it shows as an empty bar.
  • It has no text and no aria-label. axe 4.11 reports button-name (critical, WCAG 4.1.2).
  • Clicking it works: it goes back to the Forgot Password? screen. So it is a real action that is missing its label, not a leftover element.

Cause (from the source on main):

  • Since #7626, VerificationCodeCard renders a formButtonReset button whenever onBackLinkClicked is passed. Its text comes from the optional backLinkLabel prop that the same PR added.
  • SignInFactorOne passes onBackLinkClicked to SignInFactorOneForgotPasswordCard for both reset_password_phone_code and reset_password_email_code.
  • Neither SignInFactorOneForgotPasswordCard nor SignInFactorOneCodeForm sets backLinkLabel. Before #7626 the card ignored onBackLinkClicked, so nothing was rendered on this step. Since then, the button is rendered empty.
  • Only SmsCodeFlowScreen passes a label today. The open PR #10396 adds backLinkLabel={localizationKeys('backButton')} to UVFactorOneCodeForm for the same reason, but it does not touch the sign-in reset password step.

Possible fix: pass a label, e.g. backLinkLabel={localizationKeys('backButton')}, from SignInFactorOneForgotPasswordCard. As a safeguard, VerificationCodeCard could render the button only when a label is present.

Environment
Hosted Account Portal, development instance with default settings
ClerkJS 6.41.0, @clerk/ui 1.42.0 (window.Clerk.version / window.Clerk.uiVersion)
Chromium 153.0.8010.12 via Playwright 1.63.0, en-US
Same code in @clerk/ui 1.42.4 (latest on npm) and on main (f6d8807c28cf0d31662f3926ae7370cc69e8d554)
Also seen in a Next.js app on @clerk/ui 1.38.0 with the es-ES localization
Vorherrschende Sprache
TypeScript
Sterne
1.8k
Forks
492
Ø Merge
1 T. 6 Std.
Gemergte PRs (30 T.)
367

Entwicklungsumgebung

Erste Schritte

  1. Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
  3. Forken Sie das Repository und arbeiten Sie in einem Branch.
  4. Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus clerk/javascript

Alle Issues in clerk/javascript

Ähnliche Issues

Weitere Issues zu TypeScript

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.