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

Đang mở Phù hợp với người mới
  • Có gì không ổn?
#10,547 0 bình luận 0 reaction 0 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 1 ngày

Chưa có ai nhận issue này.

Đánh giá

Độ khó
2/5
Thời gian dự kiến
1-3 giờ
Mức phù hợp với người mới
84/100
Loại issue
Lỗi
Độ rõ ràng
Đặc tả rõ ràng
Mức độ hoạt động
Sôi nổi
Công nghệ
react, typescript
Lĩnh vực
accessibility, frontend

Hướng nghiên cứu

Bắt đầu với packages/ui/src/common/QRCode.tsx và kiểm tra cách QRCodeSVG được kết xuất cũng như cách giao diện đăng ký bản địa hóa văn bản. Dùng axe kiểm tra màn hình đăng ký tích hợp setup-mfa; công việc hoàn tất khi SVG QR có tên trợ năng được bản địa hóa và lỗi vi phạm svg-img-alt không còn nữa.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

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.

Ngôn ngữ chính
TypeScript
Star
1.8k
Fork
484
Merge trung bình
1 ngày 20 giờ
Pull request đã merge (30 ngày)
363

Chuẩn bị môi trường

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của clerk/javascript

Tất cả issue của clerk/javascript

Issue tương tự

Thêm issue về TypeScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.