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

[Feature request] Star rating component (Rating)

Đang mở
  • Có gì không ổn?
#5,149 1 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 2 ngày

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

Đánh giá

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

Hướng nghiên cứu

Start with src/radio-group/internal.tsx to see how RadioGroup reads ariaLabelledby and ariaDescribedby from src/internal/context/form-field-context.ts. The API decisions are still open, including whether users can clear a star, so agree the design with the maintainers before writing code. Done means a Rating component that works inside FormField, with keyboard, screen-reader and target-size behaviour that matches the issue's accessibility list.

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

Mô tả

enhancement
Description

What we ask for

Cloudscape has no rating component. At Amazon, many teams make a star rating control with the Cloudscape star icons. We ask the Cloudscape team to add a Rating component that operates in a FormField, the same as RadioGroup.

Where we use a star rating

Event Surveys (P530017185) is a new part of AWS Builder Center. After an event, Builder Center shows a short survey to the user. The first item in the survey is a 1 to 5 star rating of the event.

Our solution and its problems

We made a StarRating component (CR-313119797). It uses HTML radio inputs in a fieldset with a legend. This solution has three problems:

  1. We cannot connect our component to FormField. FormField gives controlId, ariaLabelledby, ariaDescribedby, invalid, and warning to its control through FormFieldContext (form-field-context.ts). For example, RadioGroup gets ariaLabelledby and ariaDescribedby from this context (radio-group/internal.tsx). This context is not part of the Cloudscape public API. Thus, our component shows its label and its error text without FormField.
  2. Our label and error text are a copy of FormField. They use the same font weight and error icon as FormField. When Cloudscape changes FormField, our component does not change. To set the label font weight, our code has a stylelint disable comment.
  3. We wrote all the accessibility code and its tests. This code includes the radio group, the star labels for screen readers, the arrow keys, the focus ring, and the error text. Many other teams write this code again (see "Other teams at Amazon").

When a Cloudscape Rating component is available, we will replace our component with it.

Example API

This API is only an example. The Cloudscape team makes the last decision about the API.

<FormField label="Star rating" errorText={errorText}>
  <Rating
    value={value}
    onChange={({ detail }) => setValue(detail.value)}
    i18nStrings={{ valueLabel: (value, max) => `${value} of ${max} stars` }}
  />
</FormField>

<Rating readOnly value={4.5} ariaLabel="Rating of the event" />

Properties:

  • value: the selected number, from 1 to max. If the user did not select a star, the value is null.
  • onChange: a non-cancelable event. detail.value contains the new value.
  • max: the number of stars. If you do not set max, the number of stars is 5.
  • readOnly: the component shows the value, and the user cannot change it. In this mode, the component can show a value of 4.5 with the star-half icon.
  • disabled
  • invalid and warning: FormField sets these properties, the same as for other controls.
  • ariaLabel, ariaLabelledby, ariaDescribedby, and ariaRequired
  • i18nStrings.valueLabel: the name that screen readers read for each star, for example "3 of 5 stars".
  • size (optional): the dimensions of the stars, for example the same values as the Icon size property.

Decision for the Cloudscape team: can the user remove the value, for example with a second click on the selected star?

Accessibility

These items are necessary. We found most of them when we made and examined our component.

  • Each star is a radio (role="radio" or an HTML radio input). The stars are in a group that has a name.
  • Tab moves the focus into the group. The arrow keys change the value.
  • The focus ring is the same as in other Cloudscape controls.
  • The target of each star is a minimum of 24 × 24 CSS pixels (WCAG 2.5.8 Target Size (Minimum)).
  • Selected stars and other stars have different shapes, not only different colors (WCAG 1.4.1 Use of Color).
  • When the pointer is on a star, that star and the stars before it show as selected. The value does not change.
  • Screen readers read the error text when it shows, and when the focus moves into the group. aria-invalid is not applicable to role="radio".
  • The component operates correctly on right-to-left pages and in forced-colors mode.

We can help

We can give our StarRating code and tests to the Cloudscape team.

Code of Conduct
Ngôn ngữ chính
TypeScript
Star
2.7k
Fork
248
Merge trung bình
3 ngày 14 giờ
Pull request đã merge (30 ngày)
83

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 cloudscape-design/components

Tất cả issue của cloudscape-design/components

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.