MSFT-231 Fix prize and bonus being read out incorrectly by screen reader (NVDA).

Author: gets0ul

src/shared/components/challenge-listing/ChallengeCard/Prize/Tip/Bonus/index.jsx

@@ -14,12 +14,14 @@ export default function Bonus({
   prizeUnitSymbol,
 }) {
   return (
-    <div styleName="bonus">
-      <span styleName="name">
-        {name}
+    <div styleName="bonus" aria-label={`${name} bonus is ${prizeUnitSymbol}${prize.toLocaleString()}`}>
+      <span aria-hidden="true">
+        <span styleName="name">
+          {name}
+        </span>
+        {prizeUnitSymbol}
+        {prize.toLocaleString()}
       </span>
-      {prizeUnitSymbol}
-      {prize.toLocaleString()}
     </div>
   );
 }

src/shared/components/challenge-listing/ChallengeCard/Prize/Tip/Prize/index.jsx

@@ -2,6 +2,12 @@ import PT from 'prop-types';
 import React from 'react';
 import './style.scss';
 
+const suffixes = ['th', 'st', 'nd', 'rd'];
+const getOrdinalSuffix = (n) => {
+  const v = n % 100;
+  return suffixes[(v - 20) % 10] || suffixes[v] || suffixes[0];
+};
+
 /**
  * A single prise component.
  * It renders a round-shaped medal with the specified place number inside it,
@@ -15,12 +21,14 @@ export default function Prize({
   let medalStyleName = 'medal';
   if (place <= 3) medalStyleName += ` place-${place}`;
   return (
-    <div styleName="prize">
-      <span styleName={medalStyleName}>
-        {place}
+    <div styleName="prize" aria-label={`${place}${getOrdinalSuffix(place)} prize is ${prizeUnitSymbol}${prize.toLocaleString()}`}>
+      <span aria-hidden="true">
+        <span styleName={medalStyleName}>
+          {place}
+        </span>
+        {prizeUnitSymbol}
+        {prize.toLocaleString()}
       </span>
-      {prizeUnitSymbol}
-      {prize.toLocaleString()}
     </div>
   );
 }