Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

[Feature request] Star rating component (Rating)

Abierto
  • ¿Algo no está bien?
#5,149 1 comentario 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 2 días

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
5/5
Tiempo estimado
Más de una semana
Aptitud para principiantes
15/100
Tipo de issue
Nueva funcionalidad
Claridad
Bastante claro
Estado de actividad
Activo
Stack tecnológico
react, typescript
Área
design, frontend

Línea de trabajo

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.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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
Lenguaje dominante
TypeScript
Estrellas
2.7k
Forks
248
Merge medio
3 d 14 h
PR fusionados (30 d)
83

Preparar el entorno

Este proyecto no incluye contenedor de desarrollo, Dockerfile ni guía de contribución, así que la configuración corre por tu cuenta: empieza por su README y consulta nuestra guía para la primera contribución para los pasos generales.

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de cloudscape-design/components

Todos los issues de cloudscape-design/components

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.