Many WCAG requirements are contextual to their implementation. To ensure that usage of this component complies with accessibility guidelines you are responsible for the following:

When linking the rating component be sure to provide a valid href value

This component has compliance with WCAG guidelines by:

Providing screen reader text customized to each available variant
Using text color with a Level AA contrast ratio of 4.5:1 contrast between the text color and the background (only when displayed on light backgrounds)
Replacing icon stars with utf-8 characters when images are disabled
Text links displays:
- Underline text style for mouse usage
- Focus state for keyboard usage

# Guidelines

# Use When

Providing a tool for comparing others’ opinions

# Don't Use When

Displaying a range of data

# Content

Always display the number of reviews next to the star rating
Use accompanying text label ‘Reviews’ when space allows

# Behavior

Rating appears with grey outlined stars when no reviews are available
Link to the corresponding review content if on the same page

# Do / Don’t

# Resources

# API

# Props

rating

name

number

type

default

Sets the rating values between 0 and 5. Required.

count

name

number

type

default

Displays the total number of reviews.

compact

name

boolean

type

false

default

Hides the word 'Reviews' if true.

href

name

string

type

N/A

default

Sets the rating component (icons and text) to display inline and wraps them in an anchor tag.

size

name

string

type

medium

default

Sets the rating component size; Breakpoint values are: xs, sm, md, and lg. Examples: { 'small' | 'medium' | 'large' | 'large@sm' }

# Usage

By default the CdrRating component renders the icons in medium size (24px) with the total number of reviews.

# Rating Values

The count for reviews will always be visible
Ratings are rounded to the nearest .25 because icons are represented in 25% increments
Screen reader text is provided which reads, “Rated [ rounded ] out of 5 with [ count ] reviews”