fix(ui-rating): add text value to Rating examples

Also remove a not needed div and make the icon aria-hidden because VO reads sometimes a lots of
empty groups

closes: INSTUI-4307

Author: matyasf

packages/ui-rating/src/Rating/README.md

@@ -20,27 +20,32 @@ this feature using the `animateFill` prop.
 ---
 type: example
 ---
-<div>
-  <Rating
-    formatValueText={function (currentRating, maxRating) {
-      return currentRating + ' out of ' + maxRating
-    }}
-    label="Overall rating of freshman year experience"
-    valueNow={68.45}
-    valueMax={100}
-  />
-  <br />
-  <Rating
-    animateFill
-    formatValueText={function (currentRating, maxRating) {
-      return currentRating + ' out of ' + maxRating
-    }}
-    label="Overall rating of freshman year experience"
-    iconCount={5}
-    valueNow={68.45}
-    valueMax={100}
-  />
-</div>
+<Flex gap="large">
+  <Flex gap="x-small">
+    <Rating
+      formatValueText={function (currentRating, maxRating) {
+        return currentRating + ' out of ' + maxRating
+      }}
+      label="Overall rating of freshman year experience"
+      valueNow={68.45}
+      valueMax={100}
+    />
+    <div>2/3</div>
+  </Flex>
+  <Flex gap="x-small">
+    <Rating
+      animateFill
+      formatValueText={function (currentRating, maxRating) {
+        return currentRating + ' out of ' + maxRating
+      }}
+      label="Overall rating of freshman year experience"
+      iconCount={5}
+      valueNow={68.45}
+      valueMax={100}
+    />
+    <div>3/5</div>
+  </Flex>
+</Flex>
 ```
 
 ### Sizes
@@ -52,30 +57,48 @@ space around the actual rating.
 ---
 type: example
 ---
-<div>
-  <Rating
-    label="Product rating"
-    size="small"
-    iconCount={5}
-    valueNow={3.76}
-    valueMax={5}
-    margin="x-small medium xx-small none"
-  />
-  <Rating
-    label="Overall rating of college experience"
-    iconCount={5}
-    valueNow={30}
-    valueMax={100}
-    margin="x-small xx-large"
-  />
-  <Rating
-    animateFill
-    label="Rating of professor"
-    size="large"
-    iconCount={5}
-    valueNow={8}
-    valueMax={8}
-    margin="medium"
-  />
-</div>
+<Flex gap="large">
+  <Flex>
+    <Rating
+      label="Product rating"
+      size="small"
+      iconCount={5}
+      valueNow={3.76}
+      valueMax={5}
+      margin="small"/>
+    <div>4/5</div>
+  </Flex>
+  <Flex>
+    <Rating
+      label="Overall rating of college experience"
+      iconCount={5}
+      valueNow={30}
+      valueMax={100}
+      margin="small"
+    />
+    <div>2/5</div>
+  </Flex>
+  <Flex>
+    <Rating
+      animateFill
+      label="Rating of professor"
+      size="large"
+      iconCount={5}
+      valueNow={8}
+      valueMax={8}
+      margin="small"/>
+    <div>5/5</div>
+  </Flex>
+</Flex>
+```
+
+```js
+---
+type: embed
+---
+<Guidelines>
+  <Figure recommendation="a11y" title="Accessibility">
+    <Figure.Item>Display a textual value for the rating to meet WCAG 2.1 Use of Color standards. "Non-text information within controls that uses a change of hue alone to convey the value or state of an input, such as a 1-5 star indicator where state depends on whether it's filled or empty is likely to fail the Use of color criterion"</Figure.Item>
+  </Figure>
+</Guidelines>
 ```

packages/ui-rating/src/RatingIcon/index.tsx

@@ -110,20 +110,19 @@ class RatingIcon extends Component<RatingIconProps, RatingIconState> {
 
     return (
       <span
+        aria-hidden="true"
         css={this.props.styles?.ratingIcon}
         ref={(el) => {
           this.ref = el
         }}
       >
-        <span>
-          {this.state.filled && animateFill ? (
-            <Transition in transitionOnMount type="scale">
-              <Icon css={this.props.styles?.icon} />
-            </Transition>
-          ) : (
+        {this.state.filled && animateFill ? (
+          <Transition in transitionOnMount type="scale">
             <Icon css={this.props.styles?.icon} />
-          )}
-        </span>
+          </Transition>
+        ) : (
+          <Icon css={this.props.styles?.icon} />
+        )}
       </span>
     )
   }