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

…s-amplify#2469) * fix(react): hide svg icon images in a11y tree in Rating component
calebpollman · Aug 25, 2022 · 5ce7bcd · 5ce7bcd
1 parent 1716e82
commit 5ce7bcd
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 12 deletions.
diff --git a/.changeset/silver-moles-wait.md b/.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
diff --git a/docs/src/pages/[platform]/components/rating/examples/RatingEmptyExample.tsx b/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" />
   );
 };
 

diff --git a/docs/src/pages/[platform]/components/rating/examples/RatingIconExample.tsx b/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 = () => {

diff --git a/packages/react/src/primitives/Rating/RatingIcon.tsx b/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>

diff --git a/packages/react/src/primitives/Rating/RatingMixedIcon.tsx b/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"