SOROUSH.DESIGN
Design SystemMarkdownStyled System

Rating

A row of icons the user sets as a rating - or, read-only, a display of one.

Source

Accessibility

  • A group of native radios: Tab focuses the current rating, the arrows change it. Name the group with aria-label, or a FormLabel.
  • Each radio's name is its getLabelText - give a function in the app's language; the default is the number.
  • Filled and empty items differ in shape (a solid and an outlined star) as well as color. If color is the only difference in your icons, show the value as text too (WCAG 1.4.1).
  • A read-only rating is one image, role="img", named by its rating.