Hacktoberfest 2026: những issue maintainer đã đánh dấu cho tháng Mười, đang mở và phù hợp người mới. Xem issue Hacktoberfest

The editor's expanded platform preview doesn't work with the keyboard

Đã đóng Phù hợp với người mới
  • Có gì không ổn?
#170 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
85/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

Đọc src/components/editor/PlatformPreviewStrip.tsx, tập trung vào các thẻ nền tảng, lớp phủ, hộp thoại, tên nền tảng và nút Close. Triển khai các hành vi được liệt kê về focus, Escape, giới hạn Tab trong hộp thoại, khôi phục focus và gắn nhãn cho hộp thoại, đồng thời giữ nguyên hành vi đóng khi nhấp vào nền. Dùng các tiêu chí chấp nhận về bàn phím của issue để xác minh kết quả, sau đó chạy npm run check, npm run test và npm run build.

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

Mô tả

accessibility bug good first issue hacktoberfest ui

In the editor (for example https://og.codercops.com/create/blog), Tab to one of the platform cards under the canvas and press Enter. The expanded preview opens, but:

  • Focus stays on the card behind the overlay.
  • Escape doesn't close it. The Escape handler is on the overlay (src/components/editor/PlatformPreviewStrip.tsx, line 73), and the overlay doesn't have focus.
  • Tab keeps moving through the other seven cards underneath. After them it lands on the overlay itself, which is a role="button" (lines 69 to 72) whose name is all the text in the preview. Only there does Escape work.
  • When it closes (Escape on the overlay, or the Close button), focus drops to the page body instead of going back to the card.
  • The dialog (line 78) has no aria-modal and no accessible name, so a screen reader doesn't say which platform it shows.

What to do

  • Move focus into the dialog when it opens, for example to the Close button.
  • Close it on Escape while it's open: listen for keydown on document in a useEffect and remove the listener in the cleanup, or put the handler on the dialog.
  • Keep Tab inside the dialog while it's open (the viewport buttons and Close), so focus can't wander behind it.
  • When it closes, put focus back on the card that opened it.
  • Give the dialog aria-modal="true" and aria-labelledby pointing at the platform name (line 82). useId works for the id.
  • Remove role="button" and tabIndex from the overlay. Clicking the backdrop can still close it.

Where to look

  • src/components/editor/PlatformPreviewStrip.tsx: the cards (lines 41 to 54), the overlay (lines 68 to 74), the dialog (lines 75 to 80), the platform name (lines 82 to 84) and the Close button (lines 87 to 94)

Acceptance criteria

  • Enter on a platform card opens the preview with focus inside it
  • Escape and the Close button both close it, and focus goes back to the card
  • Tab stays inside the dialog while it's open
  • The dialog has aria-modal="true" and is labelled with the platform name
  • Mouse use works as before, including closing by clicking the backdrop
  • npm run check, npm run test and npm run build pass
  • The PR says how you tested it with the keyboard

Want to work on this? Comment below and I'll assign it to you. Please take one issue at a time, branch off dev, and open your PR against dev with Closes #170 in the description.

Ngôn ngữ chính
TypeScript
Star
8
Fork
4
Merge trung bình
8 giờ 14 phút
Pull request đã merge (30 ngày)
120

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 codercops/ogcops

Tất cả issue của codercops/ogcops

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.