Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

[Feature request] Star rating component (Rating)

Aperta
  • Qualcosa non va?
#5,149 1 commento 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 2 giorni

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
5/5
Tempo stimato
Più di una settimana
Idoneità per principianti
15/100
Tipo di issue
Funzionalità
Chiarezza
Abbastanza chiara
Stato di attività
Attiva
Stack tecnologico
react, typescript
Ambito
design, frontend

Direzione di ricerca

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.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

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
Lingua principale
TypeScript
Stelle
2.7k
Fork
248
Merge medio
3g 14h
PR unite (30g)
83

Preparare l'ambiente

Questo progetto non fornisce container di sviluppo, Dockerfile né guida per i contributori, quindi l'ambiente è a tuo carico: parti dal suo README e consulta la nostra guida al primo contributo per i passaggi generali.

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di cloudscape-design/components

Tutte le issue di cloudscape-design/components

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.