cps-timepicker: fields and AM/PM selector don't reflow (WCAG 1.4.10)

Đang mở
  • Có gì không ổn?
#911 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ó
4/5
Thời gian dự kiến
3-5 ngày
Mức phù hợp với người mới
49/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ệ
angular, playwright, scss, typescript
Lĩnh vực
accessibility, frontend

Hướng nghiên cứu

Read projects/cps-ui-kit/src/lib/components/cps-timepicker/cps-timepicker.component.scss around &-body and investigate how the timepicker fits within cps-scheduler at desktop widths. Then run the reflow and 200% text tests in playwright/cps-ui-kit/accessibility-cps-ui-kit.spec.ts; done means the timepicker fits at the specified widths, those tests pass, and desktop rendering of both components is unchanged.

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

Mô tả

Problem

cps-timepicker doesn't reflow (WCAG 1.4.10). The hours, minutes and seconds fields, their delimiters and the AM/PM selector stay on one row. That row is about 362 px wide. At 320 px and 640 px wide, about 245 px is available in a docs example, so the AM/PM selector sticks out and the page scrolls sideways. The same happens at 1280 px with 200% text.

Found by the reflow tests added in #908.

Where

projects/cps-ui-kit/src/lib/components/cps-timepicker/cps-timepicker.component.scss:29 (&-body): a flex row with no wrapping.

Why it's not a one-line fix

flex-wrap: wrap on the body fixes the timepicker page, but it changes the desktop layout of cps-scheduler. There the timepicker sits in a row that's already too narrow for it (the Monthly view gets about 72 px taller at 1280 px). The timepicker has to wrap without changing the scheduler at desktop widths, so fix it together with, or after, the scheduler reflow issue.

Acceptance criteria

  • At 320 px and 640 px, and at 1280 px with 200% text, the timepicker fits its container.
  • Remove the Timepicker entry from KNOWN_FAILURES in playwright/cps-ui-kit/accessibility-cps-ui-kit.spec.ts. Its reflow and 200% text tests then pass.
  • Desktop rendering of both the timepicker and the scheduler is unchanged.
Ngôn ngữ chính
TypeScript
Star
9
Fork
7
Merge trung bình
1 ngày 11 giờ
Pull request đã merge (30 ngày)
13

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

Dự án này không cung cấp dev container, Dockerfile hay hướng dẫn đóng góp, nên bạn cần tự thiết lập môi trường: hãy bắt đầu từ README và xem hướng dẫn đóng góp lần đầu của chúng tôi để biết các bước chung.

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 AbsaOSS/cps-shared-ui

Tất cả issue của AbsaOSS/cps-shared-ui

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.