Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

[Feature request] Star rating component (Rating)

Open
  • Is something wrong?
#5,149 1 comment 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 2 days

Nobody has claimed this yet.

Assessment

Difficulty
5/5
Estimated time
Over a week
Newbie friendliness
15/100
Issue type
Feature
Clarity
Mostly clear
Activity status
Active
Tech stack
react, typescript
Domain
design, frontend

Research direction

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.

Written by the indexing model from the issue text.

Description

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
Dominant language
TypeScript
Stars
2.7k
Forks
248
Avg merge
3d 14h
Merged PRs (30d)
83

Getting set up

This project ships no dev container, Dockerfile or contributing guide, so setting up is up to you: start from its README, and see our first-contribution guide for the general steps.

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from cloudscape-design/components

All issues in cloudscape-design/components

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.