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 Done group toggle sits off the left edge and shows no chevron

Đang mở Phù hợp với người mới
  • Có gì không ổn?
#268 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ệ
playwright, react, typescript, wordpress
Lĩnh vực
accessibility, frontend, testing

Hướng nghiên cứu

Bắt đầu tại frontend/src/tasks/TasksScreen.tsx, ở DoneGroup, rồi đọc các quy tắc .alphone-tasks__* gần đó trong frontend/src/index.css; kiểm tra mẫu khoảng cách hiện có của .alphone-tasks__open-contact. Cập nhật trigger và phần xuất icon thông qua sdk/frontend/index.ts, sau đó chạy kiểm thử route và kiểm thử tasks Playwright được nêu trong issue. Công việc hoàn tất khi nhãn căn chỉnh ở 1280 và 390 pixel, chevron phản ánh trạng thái mở và aria-expanded được xác minh.

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

Mô tả

bug help wanted

What happens

Under the day task list at /tasks, the Done toggle ("Done (1)") starts 13 pixels to the right of the left edge that the Overdue heading, the quick add fields and the task list card share. It does this at 1920, 1280 and 390 pixels wide. DoneGroup renders the Collapsible.Trigger as a Button with variant="minimal" and size="compact". That button keeps its 12 pixel inline padding and its 1 pixel border. No rule in index.css pulls it back to the edge.

The toggle also has no chevron. Nothing tells you it opens a list, so it reads like a plain label. Only the hover background gives it away, and a phone has no hover.

WordPress marks a group that opens and closes with a chevron. PanelBody in the block editor shows chevronDown while closed and chevronUp while open. CollapsibleCard.Header in @wordpress/ui shows chevronDown and turns it half a turn while open.

What should happen

The toggle's text starts on the same left edge as the Overdue heading and the list card, at every width. The hover and focus background can still reach past the text. .alphone-tasks__open-contact already does this on a phone with a negative start margin of padding plus border.

A chevron sits after the label. It points down while the group is closed and up while it is open. A CSS rule on the data-panel-open attribute that Base UI sets on the trigger turns it, as CollapsibleCard does. The icon is hidden from screen readers, because the button already carries aria-expanded.

A new Playwright check in test/e2e/tests/tasks.spec.ts proves at 1280 and 390 that the left of the toggle's text equals the left of the Open tasks list. A test in frontend/src/test/tasks-route.test.tsx checks that the toggle holds the chevron and that aria-expanded turns true when it opens.

Where

  • frontend/src/tasks/TasksScreen.tsx, the Collapsible.Trigger in DoneGroup
  • frontend/src/index.css, a new .alphone-tasks__done-toggle rule beside the other .alphone-tasks__* rules
  • sdk/frontend/index.ts, export chevronDown from @wordpress/icons
  • test/e2e/tests/tasks.spec.ts and frontend/src/test/tasks-route.test.tsx
Ngôn ngữ chính
Go
Star
287
Fork
64
Merge trung bình
13 giờ 19 phút
Pull request đã merge (30 ngày)
62

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

  • Có Dockerfile hoặc tệp Docker Compose
  • Không có mẫu pull request
  • Không có hướng dẫn đóng góp

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 gopherium/AlphOne

Tất cả issue của gopherium/AlphOne

Issue tương tự

Thêm issue về Go

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.