import rules, {starRules} from './rules.a11y';

### Rules

#### Rating

<AccessibilityList rules={rules} />

<InfoBox type="warning">
  Using <code>noLabel</code> option will affect different people with visual
  impairments. Omitting <code>activeText</code> for an active
  <code>Rating</code> results in a non-labelled
  <code>onChange</code> action.
</InfoBox>

#### Star

<AccessibilityList rules={starRules} />

### Usage

#### Code examples

- basic

```jsx
<Rating />
```

- active with `activeText` & `counterText`

<!-- prettier-ignore -->
```jsx
<Rating
  active
  activeText="Rate this answer"
  counterText="32 votes"
  onChange={onChange}
/>
```

- with a current rate value `rate` and `metricSize`

<!-- prettier-ignore -->
```jsx
<Rating
  rate={2.2}
  metricSize={10}
/>
```

- with a custom label for current value

<!-- prettier-ignore -->
```jsx
<Rating
  rate={2.2}
  aria-label="Our rate:"
/>
```

### Resources

- <https://www.w3.org/WAI/tutorials/forms/custom-controls/#a-star-rating>
- <https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html>
- <https://scottaohara.github.io/a11y_styled_form_controls/src/radio-button--rating/>
- <https://lunarlogic.github.io/starability/>
- <https://decathlon.github.io/vitamin-web/@vtmn/showcase-css/iframe.html?id=components-rating--overview&viewMode=story>
- <https://baseweb.design/components/rating/>
- <https://dev.to/inhuofficial/5-star-rating-system-actually-accessible-no-js-no-wai-aria-3idl>