Breaking changes

• [Rating] Change the default empty icon to improve accessibility.
  If you have a custom icon prop but no emptyIcon prop, you can restore the previous behavior with:

  <Rating
    icon={customIcon}
  + emptyIcon={null}
  />

This is a continuation of #22541 by @eps1lon. The success Criterion 1.4.1 of WCAG 2.1. mentions the following:

This success criterion addresses color perception specifically. Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.

The rationale is explained in https://www.w3.org/WAI/WCAG21/Understanding/use-of-color.html. Users with partial sight often experience limited color vision. It can even be as extreme as only seeing in the greyscale.

As it turns out, if you are color blind, you can't see the active value with the current implementation. It sucks:

value = 2

The proposed solution is based on #22541 (comment) and relies on:

• Using a different shape between the filled and empty state.
• Increase the color contrast (when RGB blind) slightly between the filled and empty states.
• Encourage to duplicate the information with text in the a11y section.
• Update the customization demos to be as good as possible, e.g. use opacity

After the changes applied, the component look as follow in the different color distortions:

• Achromatopsia (RGB-blind)

• Achromatomaly (RGB-weak)

• Tritanopia (blue-blind)

• Tritanomaly (blue-weak)

• Deuteranopia (green-blind)

• Deuteranomaly (green-week)

• Protanopia (red-blind)

• Protanomaly (red-weak)