fix(react): hide svg icon images in a11y tree in Rating component (#2469)

* fix(react): hide svg icon images in a11y tree in Rating component

Author: hbuchel

.changeset/silver-moles-wait.md

@@ -0,0 +1,5 @@
+---
+"@aws-amplify/ui-react": patch
+---
+
+fix(react): hide svg icon images in a11y tree in Rating component so redundant text is not announced

docs/src/pages/[platform]/components/rating/examples/RatingEmptyExample.tsx

@@ -2,10 +2,7 @@ import { Rating, Icon } from '@aws-amplify/ui-react';
 
 const IconStarBorder = () => {
   return (
-    <Icon
-      ariaLabel="No rating"
-      pathData="M22 9.24L14.81 8.62L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27L18.18 21L16.55 13.97L22 9.24ZM12 15.4L8.24 17.67L9.24 13.39L5.92 10.51L10.3 10.13L12 6.1L13.71 10.14L18.09 10.52L14.77 13.4L15.77 17.68L12 15.4Z"
-    />
+    <Icon pathData="M22 9.24L14.81 8.62L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27L18.18 21L16.55 13.97L22 9.24ZM12 15.4L8.24 17.67L9.24 13.39L5.92 10.51L10.3 10.13L12 6.1L13.71 10.14L18.09 10.52L14.77 13.4L15.77 17.68L12 15.4Z" />
   );
 };
 

docs/src/pages/[platform]/components/rating/examples/RatingIconExample.tsx

@@ -1,12 +1,7 @@
 import { Rating, Icon } from '@aws-amplify/ui-react';
 
 const IconAdd = () => {
-  return (
-    <Icon
-      ariaLabel="No rating"
-      pathData="M19 13H13V19H11V13H5V11H11V5H13V11H19V13Z"
-    />
-  );
+  return <Icon pathData="M19 13H13V19H11V13H5V11H11V5H13V11H19V13Z" />;
 };
 
 export const RatingIconExample = () => {

packages/react/src/primitives/Rating/RatingIcon.tsx

@@ -17,7 +17,11 @@ export const RatingIcon: React.FC<RatingIconProps> = ({
   className,
 }) => {
   return (
-    <View as="span" className="amplify-rating-icon-container">
+    <View
+      as="span"
+      className="amplify-rating-icon-container"
+      aria-hidden="true"
+    >
       <View as="span" className={classNames(className)} color={fill}>
         {icon}
       </View>

packages/react/src/primitives/Rating/RatingMixedIcon.tsx

@@ -21,7 +21,11 @@ export const RatingMixedIcon: React.FC<RatingMixedIconProps> = ({
 }) => {
   const widthPercentage = `${(value % 1) * 100}%`;
   return (
-    <View as="span" className="amplify-rating-icon-container">
+    <View
+      as="span"
+      className="amplify-rating-icon-container"
+      aria-hidden="true"
+    >
       <View as="span" className="amplify-rating-label">
         <View
           as="span"