patternfly / patternfly/patternfly-react

Bug - Table - several variants don't allow customizing aria labeling

Đang mở
#8,964 12 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 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ả

[Edited by @thatblindgeye 11/7/2025]

This issue should involve fixing the following (we should try to prioritize the first 2 items, as they are affecting the new Compass demos):

  • The action buttons in the ActionsColumn should allow customizing the aria-label and aria-labelledby on MenuToggle, rather than hardcoding them as "Kebab toggle"

  • For selectable with checkbox/radio, we need to allow customizing the aria-label and aria-labelledby for the inputs, and also update the default values to be index + 1 (currently the first row will read "Select row 0", which makes sense from an index persepective but from a user perspective it should probably be "Select row 1")

  • The Table sort functionality should allow passing some SR text to help identify what order the column is sorted.

    • If we have any implementations where a sort button is standalone without any text, we should allow passing an aria-label and aria-labelledby to those as well
  • The Favorite button in FavoritesCell should allow customizing the aria-label and aria-labelledby (props are being spread in this file, but would need to check if how it's actually used with decorators if it's possible to override the default hardcoded values and pass in aria-labelledby)

  • DraggableCell default value should omit the word "button" in its default aria-label at the very least. Ideally we either wouldn't have a default value or the default would be able to be more unique as its used (right now every row will default to the same exact label which isn't good)

    • We should also check if it's actually possible to override the default labels, and add the ability to use aria-labelledby

After these are completed, we want to open followup issues/PRs in Org to update any new Compass demos using a Table with any of the above functionality

[Original ticket below]

Describe the problem
It's not possible to add aria-label in Table sorts, so I can't use semantic syntax. If I'm a user who needs a screen reader to sort some data by name, for example, I just listen "name button" and not something with a better description.

Expected behavior
If I'm a user who needs a screen reader, when clicking in a button I should listen to a descriptive message about the functionality of the button, for accessibility purpose. So, when I have data inside a Table and I want to sort that data, I need to listen to a clear message.

Is this issue blocking you?
No

What is your environment?

  • RHEL 8.6
  • Browser Chrome

What is your product and what release date are you targeting?
consoledot


Jira Issue: PF-136

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 với component Table và các biến thể ActionsColumn, selectable checkbox/radio inputs, sort controls, FavoritesCell và DraggableCell được nêu trong issue. Xem lại cách các aria labels hiện tại của chúng được thiết lập và xác minh từng yêu cầu tùy chỉnh cũng như giá trị mặc định được liệt kê, bao gồm các trường hợp sort và standalone-button. Được xem là hoàn tất khi các biến thể Table bị ảnh hưởng hỗ trợ việc gắn nhãn accessibility được yêu cầu và sẵn sàng cho các cập nhật Compass demo tiếp theo.

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
Lỗi
Độ khó
4/5
Thời gian dự kiến
3-5 ngày
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
45/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.