The editor's expanded platform preview doesn't work with the keyboard
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ả
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-modaland 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
keydownondocumentin auseEffectand 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"andaria-labelledbypointing at the platform name (line 82).useIdworks for the id. - Remove
role="button"andtabIndexfrom 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 testandnpm run buildpass - 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
- 6 giờ 9 phút
- Pull request đã merge (30 ngày)
- 66
Chuẩn bị môi trường
- Không có Dockerfile hay tệp Docker Compose
- Có mẫu pull request
- Đọc hướng dẫn đóng góp
Bắt đầu từ đâu
- Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
- 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.
- Fork repository và làm thay đổi trên một nhánh.
- Mở pull request có tham chiếu số hiệu của issue.
Issue khác của codercops/ogcops
-
accessibility bug good first issue hacktoberfest
Độ khó 2/5 1-3 giờ Mức phù hợp với người mới 86/100
Maintainer thường phản hồi trong vòng 1 ngày
-
bug good first issue hacktoberfest ui
Độ khó 2/5 1-3 giờ Mức phù hợp với người mới 88/100
Maintainer thường phản hồi trong vòng 1 ngày
-
bug good first issue hacktoberfest
Độ khó 2/5 1-3 giờ Mức phù hợp với người mới 88/100
codercops/ogcops#167 · 1 bình luận ·
Maintainer thường phản hồi trong vòng 1 ngày
-
An empty `imageUrl=`, `logoUrl=` or `template=` returns an error instead of the defaultCó thể đã có người làm @Saifjafri212213 đã nhận 1 ngày trước. Đang mởbug good first issue hacktoberfest
Độ khó 2/5 1-3 giờ Mức phù hợp với người mới 88/100
codercops/ogcops#166 · 1 bình luận ·
Maintainer thường phản hồi trong vòng 1 ngày
-
bug good first issue hacktoberfest
Độ khó 2/5 1-3 giờ Mức phù hợp với người mới 87/100
codercops/ogcops#164 · 2 bình luận ·
Maintainer thường phản hồi trong vòng 1 ngày
Tất cả issue của codercops/ogcops
Issue tương tự
-
Độ khó 2/5 1-3 giờ Mức phù hợp với người mới 68/100
maniator/verticopolis#1303 · 1 bình luận ·
Maintainer thường phản hồi trong vòng 1 ngày
-
Độ khó 2/5 1-3 giờ Mức phù hợp với người mới 73/100
components-web-app/docs#297 ·
-
listFeatures/getFeatureExamples never return Kotlin examples for Android or server Kotlin SDKsĐang mở
Độ khó 2/5 1-3 giờ Mức phù hợp với người mới 68/100
appwrite/mcp-for-docs#23 · 1 bình luận ·
-
`@vanilla-extract/turbopack-plugin`: "getImageSize is not a function" with Next.js 16.4.x when a `.css.ts` file imports an imageCó thể đã có người làm @aevarOrigo đã nhận hôm nay. Đang mở
Độ khó 2/5 1-3 giờ Mức phù hợp với người mới 78/100
vanilla-extract-css/vanilla-extract#1799 · 1 bình luận ·
-
native
Độ khó 2/5 1-3 giờ Mức phù hợp với người mới 72/100
prime-radiant-inc/evener#4839 ·
Maintainer thường phản hồi trong vòng 1 ngày