patternfly / patternfly/patternfly-react

Spike: Revisit Timestamp accessibility

Đang mở
#10,265 9 bình luận 0 reaction 0 người được giao Xem trên GitHub

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

A11y PF Team Stale
Ngôn ngữ chính
TypeScript
Star
862
Fork
392
Merge trung bình
4 ngày 8 giờ
Pull request đã merge (30 ngày)
9

Mô tả

Describe the enhancement or change
Per a discussion including @jgiardino and @jessiehuff there are some issues related to accessibility with our current Timestamp implementation:

  • There's no clear visual indication that the timestamp text can be interacted with when there's a tooltip

  • The tooltip content does not get announced by AT when triggered

Some ideas that have been brought up to help resolve this include:

  • Render screen reader text in the timestamp wrapper element of the UTC (or whatever other) time, and render the full timestamp info in the tooltip. Essentially treating the timestamp as truncated content when there's a tooltip. This would require rendering the UTC/additional time in a time element and passing it a valid datetime attribute (we're already handling this in a way if no dateTime prop is passed to Timestamp, so we could just expose a new "tooltipDateTime" prop or something if a user wants/needs to pass their own datetime attribute). See the following video for an example (note that VO is not announcing the tooltip content, it is announcing the visible text + screen reader text that is also wrapped in the main timestamp span wrapper).

    https://github.com/patternfly/patternfly-react/assets/70952936/629a9b1a-fbd3-4d80-ae9a-483067a39eab

  • Rendering an icon button next to the main timestamp visual text, and apply a popover (instead of a tooltip) to that button. This would require rendering a time element inside the popover as well if users can navigate into the popover.

For both points above, we already handle creating a datetime attribute internally if a consumer doesn't pass their own dateTime prop:

https://github.com/patternfly/patternfly-react/blob/62810f14601fdd4133d74e737c28c2e37dd3da6f/packages/react-core/src/components/Timestamp/Timestamp.tsx#L147

Which just creates a string of the UTC time already which should be valid.

Is this request originating from a Red Hat product team? If so, which ones and is there any sort of deadline for this enhancement?

Any other information?


Jira Issue: PF-83

Hướng dẫn đóng góp

Mở 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.

Hướng nghiên cứu

Bắt đầu tại packages/react-core/src/components/Timestamp/Timestamp.tsx, khoảng dòng 147, nơi thuộc tính datetime được tạo, và kiểm tra hành vi hiện tại của Timestamp, tooltip và popover. So sánh hai cách tiếp cận về khả năng truy cập được mô tả trong issue, sau đó xác định hướng nào giải quyết tốt nhất khả năng dễ nhận biết bằng mắt và các thông báo dành cho công nghệ hỗ trợ. Được xem là hoàn tất khi đạt được một khuyến nghị triển khai được ghi lại rõ ràng, với hành vi về khả năng truy cập cụ thể.

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

Đánh giá

Công nghệ
react, typescript
Lĩnh vực
accessibility, frontend
Loại issue
Tính năng
Độ khó
5/5
Thời gian dự kiến
Hơn một tuần
Mức độ hoạt động
Ít trao đổi
Độ rõ ràng
Khá rõ ràng
Mức phù hợp với người mới
35/100

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.