fix(added dynamically set trustpilot title): trustpilot logo title to…

… include star rating
ZopaPublic · Dec 16, 2022 · 4d4f0e2 · 4d4f0e2
1 parent 2a3098a
commit 4d4f0e2
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 3 deletions.
diff --git a/src/components/atoms/Trustpilot/Stars/Stars.tsx b/src/components/atoms/Trustpilot/Stars/Stars.tsx
@@ -14,6 +14,19 @@ export type TrustPilotStarsProps = SVGProps<SVGSVGElement> & {
   rating?: 0 | 1 | 1.5 | 2 | 2.5 | 3 | 3.5 | 4 | 4.5 | 5;
 };
 
+const trustPilotStarsLogoTitle = {
+  0: 'Trustpilot Zero stars rating',
+  1: 'Trustpilot One star',
+  1.5: 'Trustpilot One and a half stars rating',
+  2: 'Trustpilot Two stars rating',
+  2.5: 'Trustpilot Two and a half stars rating',
+  3: 'Trustpilot Three stars rating',
+  3.5: 'Trustpilot Three and a half stars rating',
+  4: 'Trustpilot Four stars rating',
+  4.5: 'Trustpilot Four and a half stars rating',
+  5: 'Trustpilot Five stars rating',
+} as const;
+
 const TrustPilotStars = ({ rating = 5, ...props }: TrustPilotStarsProps) => (
   <svg
     viewBox="0 0 512 96"
@@ -24,7 +37,7 @@ const TrustPilotStars = ({ rating = 5, ...props }: TrustPilotStarsProps) => (
     role="img"
     {...props}
   >
-    <title id="trust-pilot-rating-title">Trustpilot Stars Logo</title>
+    <title id="trust-pilot-rating-title">{trustPilotStarsLogoTitle[rating]}</title>
     <desc id="trust-pilot-rating-desc">An illustration of the Trustpilot Stars Logo</desc>
     {rating === 0 && <ZeroStar />}
     {rating === 1 && <OneStar />}

diff --git a/src/components/atoms/Trustpilot/Stars/__snapshots__/Stars.test.tsx.snap b/src/components/atoms/Trustpilot/Stars/__snapshots__/Stars.test.tsx.snap
@@ -13,7 +13,7 @@ exports[`<TrustpilotStars /> renders default 5 stars rating without a11y violati
     <title
       id="trust-pilot-rating-title"
     >
-      Trustpilot Stars Logo
+      Trustpilot Five stars rating
     </title>
     <desc
       id="trust-pilot-rating-desc"

diff --git a/src/components/atoms/Trustpilot/__snapshots__/Trustpilot.test.tsx.snap b/src/components/atoms/Trustpilot/__snapshots__/Trustpilot.test.tsx.snap
@@ -44,7 +44,7 @@ exports[`<Trustpilot /> renders without a11y violations 1`] = `
       <title
         id="trust-pilot-rating-title"
       >
-        Trustpilot Stars Logo
+        Trustpilot Five stars rating
       </title>
       <desc
         id="trust-pilot-rating-desc"