Merge pull request #9676 from bbc/fix-video-episodes-comma-bug

fix TalkBack reading comma
bbc · Nov 17, 2021 · 5f63697 · 5f63697
2 parents 2293d16 + 47b56c6
commit 5f63697
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 29 deletions.
diff --git a/src/app/containers/EpisodeList/RecentVideoEpisodes/__snapshots__/index.test.jsx.snap b/src/app/containers/EpisodeList/RecentVideoEpisodes/__snapshots__/index.test.jsx.snap
@@ -424,11 +424,11 @@ exports[`Recent Video Episodes should render video episodes correctly 1`] = `
   }
 }
 
-.emotion-113 {
+.emotion-107 {
   display: inline;
 }
 
-.emotion-116 {
+.emotion-110 {
   font-size: 0.875rem;
   line-height: 1.125rem;
   color: #6E6E73;
@@ -445,28 +445,28 @@ exports[`Recent Video Episodes should render video episodes correctly 1`] = `
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
-  .emotion-116 {
+  .emotion-110 {
     font-size: 0.875rem;
     line-height: 1.125rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-116 {
+  .emotion-110 {
     font-size: 0.8125rem;
     line-height: 1rem;
   }
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
-  .emotion-116 {
+  .emotion-110 {
     font-size: 0.875rem;
     line-height: 1.125rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-116 {
+  .emotion-110 {
     font-size: 0.8125rem;
     line-height: 1rem;
   }
@@ -595,12 +595,7 @@ exports[`Recent Video Episodes should render video episodes correctly 1`] = `
                 <span
                   class="emotion-37 emotion-38"
                 >
-                  , 
-                </span>
-                <span
-                  class="emotion-37 emotion-38"
-                >
-                  Durée 15,00 
+                  , Durée 15,00 
                 </span>
               </span>
             </a>
@@ -691,12 +686,7 @@ exports[`Recent Video Episodes should render video episodes correctly 1`] = `
                 <span
                   class="emotion-37 emotion-38"
                 >
-                  , 
-                </span>
-                <span
-                  class="emotion-37 emotion-38"
-                >
-                  Durée 15,00 
+                  , Durée 15,00 
                 </span>
               </span>
             </a>
@@ -787,20 +777,15 @@ exports[`Recent Video Episodes should render video episodes correctly 1`] = `
                 <span
                   class="emotion-37 emotion-38"
                 >
-                  , 
-                </span>
-                <span
-                  class="emotion-37 emotion-38"
-                >
-                  Durée 15,00 
+                  , Durée 15,00 
                 </span>
               </span>
             </a>
             <div
-              class="emotion-113 emotion-114"
+              class="emotion-107 emotion-108"
             >
               <time
-                class="emotion-115 emotion-116 emotion-117"
+                class="emotion-109 emotion-110 emotion-111"
                 datetime="2020-11-11"
               >
                 11 novembre 2020

diff --git a/src/app/containers/EpisodeList/RecentVideoEpisodes/index.jsx b/src/app/containers/EpisodeList/RecentVideoEpisodes/index.jsx
@@ -121,9 +121,8 @@ const RecentVideoEpisodes = ({ masterBrand, episodes }) => {
               <EpisodeList.Description className="episode-list__description--hover episode-list__description--visited">
                 {episode.episodeTitle || formatDate(episode.timestamp)}
               </EpisodeList.Description>
-              <VisuallyHiddenText>, </VisuallyHiddenText>
               <VisuallyHiddenText>
-                {`${durationLabel} ${formatDuration({
+                {`, ${durationLabel} ${formatDuration({
                   duration: episode.duration,
                   format: episode.duration.includes('H') ? 'h,mm,ss' : 'mm,ss',
                   locale: datetimeLocale,

diff --git a/src/app/containers/EpisodeList/RecentVideoEpisodes/index.test.jsx b/src/app/containers/EpisodeList/RecentVideoEpisodes/index.test.jsx
@@ -89,7 +89,7 @@ describe('Recent Video Episodes', () => {
     );
 
     const visuallyHiddenAudioLabel = getAllByText('Vidéo,');
-    const visuallyHiddenDate = getAllByText('Durée 15,00');
+    const visuallyHiddenDate = getAllByText(', Durée 15,00');
     expect(visuallyHiddenAudioLabel[0]).toBeInTheDocument();
     expect(visuallyHiddenDate[0]).toBeInTheDocument();
   });