Merge pull request #11356 from bbc/A11y-bug-fix-extra-space-live-label

WSTEAM1-A11y-Bug-Fix: Remove extra space from live label
bbc · Mar 5, 2024 · c9005db · c9005db
2 parents 9e4c4ec + e13427b
commit c9005db
Show file tree

Hide file tree

Showing 11 changed files with 47 additions and 47 deletions.
diff --git a/src/app/components/LiveLabel/Text/index.tsx b/src/app/components/LiveLabel/Text/index.tsx
@@ -31,11 +31,11 @@ const Text = ({
   }
   // If offscreenText has been provided as a prop to the LiveLabel component then we want to include a pause after the offscreen text (hence the addition of a comma and a space to the text)
   if (offScreenText) {
-    screenReaderText = `${offScreenText}`;
+    screenReaderText = ` ${offScreenText}`;
     ariaHidden = true;
     // If the translated phrase for "LIVE" is English (and offscreen text has not already been provided), then the screenreader text should be the word "Live" followed by a comma and a space (to tell the screenreader to pause) - "Live" will be read out correctly (i.e. rhymes with "hive" and not "give")
   } else if (liveLabelIsEnglish) {
-    screenReaderText = 'Live';
+    screenReaderText = ' Live';
   }
   // comma is added to screenReaderText in the cases of there being children, only time we do not want a comma is if live label is alone (rare)
   if (children) {
@@ -56,7 +56,7 @@ const Text = ({
         dir={dir}
         {...(ariaHidden && { 'aria-hidden': 'true' })}
       >
-        {`${liveLabel} `}
+        {`${liveLabel}`}
       </span>
       {screenReaderText && (
         <VisuallyHiddenText lang={lang}>{screenReaderText}</VisuallyHiddenText>

diff --git a/src/app/components/LiveLabel/__snapshots__/index.test.tsx.snap b/src/app/components/LiveLabel/__snapshots__/index.test.tsx.snap
@@ -77,7 +77,7 @@ exports[`LiveLabel should correctly render for RTL service 1`] = `
       class="emotion-2"
       dir="rtl"
     >
-      مباشر 
+      مباشر
     </span>
   </span>
 </div>
@@ -172,13 +172,13 @@ exports[`LiveLabel should render correctly with English live text 1`] = `
       class="emotion-2"
       dir="ltr"
     >
-      LIVE 
+      LIVE
     </span>
     <span
       class="emotion-3"
       lang="en-GB"
     >
-      Live
+       Live
     </span>
   </span>
 </div>
@@ -273,13 +273,13 @@ exports[`LiveLabel should render correctly with English live text and children 1
       class="emotion-2"
       dir="ltr"
     >
-      LIVE 
+      LIVE
     </span>
     <span
       class="emotion-3"
       lang="en-GB"
     >
-      Live, 
+       Live, 
     </span>
      this is a headline 
   </span>
@@ -375,13 +375,13 @@ exports[`LiveLabel should render correctly with custom offscreen text 1`] = `
       class="emotion-2"
       dir="ltr"
     >
-      LIVE 
+      LIVE
     </span>
     <span
       class="emotion-3"
       lang="en-GB"
     >
-      Watch Live
+       Watch Live
     </span>
   </span>
 </div>
@@ -464,7 +464,7 @@ exports[`LiveLabel should render correctly with localised live text 1`] = `
       class="emotion-2"
       dir="ltr"
     >
-      As E Dey Happen 
+      As E Dey Happen
     </span>
   </span>
 </div>

diff --git a/src/app/components/LiveLabel/index.test.tsx b/src/app/components/LiveLabel/index.test.tsx
@@ -39,14 +39,14 @@ describe('LiveLabel', () => {
   describe('Screenreader Text', () => {
     it.each`
       service      | offScreenText               | children                                | expectedAriaHiddenText | expectedScreenReaderText
-      ${'pidgin'}  | ${undefined}                | ${undefined}                            | ${undefined}           | ${'As E Dey Happen '}
-      ${'pidgin'}  | ${'Pidgin Offscreen Text'}  | ${undefined}                            | ${'As E Dey Happen '}  | ${'Pidgin Offscreen Text'}
-      ${'pidgin'}  | ${undefined}                | ${(<p>Pidgin Live Promo Headline</p>)}  | ${undefined}           | ${'As E Dey Happen , Pidgin Live Promo Headline'}
-      ${'pidgin'}  | ${'Pidgin Offscreen Text'}  | ${(<p>Pidgin Live Promo Headline</p>)}  | ${'As E Dey Happen '}  | ${'Pidgin Offscreen Text, Pidgin Live Promo Headline'}
-      ${'russian'} | ${undefined}                | ${undefined}                            | ${'LIVE '}             | ${'Live'}
-      ${'russian'} | ${'Russian Offscreen Text'} | ${undefined}                            | ${'LIVE '}             | ${'Russian Offscreen Text'}
-      ${'russian'} | ${undefined}                | ${(<p>Russian Live Promo Headline</p>)} | ${'LIVE '}             | ${'Live, Russian Live Promo Headline'}
-      ${'russian'} | ${'Russian Offscreen Text'} | ${(<p>Russian Live Promo Headline</p>)} | ${'LIVE '}             | ${'Russian Offscreen Text, Russian Live Promo Headline'}
+      ${'pidgin'}  | ${undefined}                | ${undefined}                            | ${undefined}           | ${'As E Dey Happen'}
+      ${'pidgin'}  | ${'Pidgin Offscreen Text'}  | ${undefined}                            | ${'As E Dey Happen'}   | ${' Pidgin Offscreen Text'}
+      ${'pidgin'}  | ${undefined}                | ${(<p>Pidgin Live Promo Headline</p>)}  | ${undefined}           | ${'As E Dey Happen, Pidgin Live Promo Headline'}
+      ${'pidgin'}  | ${'Pidgin Offscreen Text'}  | ${(<p>Pidgin Live Promo Headline</p>)}  | ${'As E Dey Happen'}   | ${' Pidgin Offscreen Text, Pidgin Live Promo Headline'}
+      ${'russian'} | ${undefined}                | ${undefined}                            | ${'LIVE'}              | ${' Live'}
+      ${'russian'} | ${'Russian Offscreen Text'} | ${undefined}                            | ${'LIVE'}              | ${' Russian Offscreen Text'}
+      ${'russian'} | ${undefined}                | ${(<p>Russian Live Promo Headline</p>)} | ${'LIVE'}              | ${' Live, Russian Live Promo Headline'}
+      ${'russian'} | ${'Russian Offscreen Text'} | ${(<p>Russian Live Promo Headline</p>)} | ${'LIVE'}              | ${' Russian Offscreen Text, Russian Live Promo Headline'}
     `(
       'should be |$expectedScreenReaderText| for $service service when offScreenText = $offScreenText and children = $children',
       ({

diff --git a/src/app/legacy/components/RadioSchedule/ProgramCard/__snapshots__/index.test.jsx.snap b/src/app/legacy/components/RadioSchedule/ProgramCard/__snapshots__/index.test.jsx.snap
@@ -306,13 +306,13 @@ exports[`ProgramCard should render correctly for live 1`] = `
                 class="emotion-10"
                 dir="ltr"
               >
-                LIVE 
+                LIVE
               </span>
               <span
                 class="emotion-11"
                 lang="en-GB"
               >
-                Listen Live, 
+                 Listen Live, 
               </span>
             </span>
             Could a computer ever create better art than a human?
@@ -1537,13 +1537,13 @@ exports[`ProgramCard should render correctly without summary 1`] = `
                 class="emotion-10"
                 dir="ltr"
               >
-                LIVE 
+                LIVE
               </span>
               <span
                 class="emotion-11"
                 lang="en-GB"
               >
-                Listen Live, 
+                 Listen Live, 
               </span>
             </span>
             Could a computer ever create better art than a human?

diff --git a/src/app/legacy/components/RadioSchedule/__snapshots__/index.test.jsx.snap b/src/app/legacy/components/RadioSchedule/__snapshots__/index.test.jsx.snap
@@ -840,13 +840,13 @@ exports[`RadioSchedule should render ltr radio schedules correctly 1`] = `
                     class="emotion-28"
                     dir="ltr"
                   >
-                    LIVE 
+                    LIVE
                   </span>
                   <span
                     class="emotion-29"
                     lang="en-GB"
                   >
-                    Listen Live, 
+                     Listen Live, 
                   </span>
                 </span>
                 Could a computer ever create better art than a human?
@@ -2145,13 +2145,13 @@ exports[`RadioSchedule should render rtl radio schedules correctly 1`] = `
                     class="emotion-28"
                     dir="rtl"
                   >
-                    مباشر 
+                    مباشر
                   </span>
                   <span
                     class="emotion-29"
                     lang="en-GB"
                   >
-                    استمع للبث المباشر, 
+                     استمع للبث المباشر, 
                   </span>
                 </span>
                 لماذا يخجل البعض من اسم قريته في مصر؟

diff --git a/src/app/legacy/containers/Bulletin/__snapshots__/index.test.jsx.snap b/src/app/legacy/containers/Bulletin/__snapshots__/index.test.jsx.snap
@@ -391,13 +391,13 @@ exports[`Bulletin Container snapshots should render a Live Radio bulletin correc
               class="emotion-14"
               dir="ltr"
             >
-              NA EME UGBU A 
+              NA EME UGBU A
             </span>
             <span
               class="emotion-15"
               lang="en-GB"
             >
-              Gee ntị Live, 
+               Gee ntị Live, 
             </span>
             Test Radio Bulletin promo
           </span>
@@ -835,13 +835,13 @@ exports[`Bulletin Container snapshots should render a Live TV bulletin correctly
               class="emotion-14"
               dir="ltr"
             >
-              NA EME UGBU A 
+              NA EME UGBU A
             </span>
             <span
               class="emotion-15"
               lang="en-GB"
             >
-              Lee Live, 
+               Lee Live, 
             </span>
             Test TV Bulletin promo
           </span>

diff --git a/src/app/legacy/containers/Bulletin/index.test.jsx b/src/app/legacy/containers/Bulletin/index.test.jsx
@@ -59,7 +59,7 @@ describe('Bulletin Container', () => {
       );
       const span = container.getElementsByTagName('span')[1];
 
-      expect(span.textContent).toEqual('NA EME UGBU A ');
+      expect(span.textContent).toEqual('NA EME UGBU A');
     });
 
     it('should render the Live Radio offscreen text', () => {
@@ -70,7 +70,7 @@ describe('Bulletin Container', () => {
 
       const span = container.getElementsByTagName('span')[1];
 
-      expect(span.textContent).toEqual('NA EME UGBU A ');
+      expect(span.textContent).toEqual('NA EME UGBU A');
     });
 
     it('should render the LIVE label', () => {
@@ -82,7 +82,7 @@ describe('Bulletin Container', () => {
 
       expect(span.getAttribute('aria-hidden')).toBeDefined();
       expect(span.getAttribute('aria-hidden')).toEqual('true');
-      expect(span.textContent).toEqual('NA EME UGBU A ');
+      expect(span.textContent).toEqual('NA EME UGBU A');
     });
   });
 });
diff --git a/src/app/legacy/containers/StoryPromo/__snapshots__/index.test.jsx.snap b/src/app/legacy/containers/StoryPromo/__snapshots__/index.test.jsx.snap
@@ -7015,7 +7015,7 @@ exports[`StoryPromo Container should render live correctly for amp 1`] = `
               class="emotion-17"
               dir="ltr"
             >
-              NA EME UGBU A 
+              NA EME UGBU A
             </span>
             <span
               class="emotion-18"
@@ -7406,7 +7406,7 @@ exports[`StoryPromo Container should render live correctly for canonical 1`] = `
               class="emotion-18"
               dir="ltr"
             >
-              NA EME UGBU A 
+              NA EME UGBU A
             </span>
             <span
               class="emotion-19"
@@ -7800,7 +7800,7 @@ exports[`StoryPromo Container should render live promoType leading on amp 1`] =
               class="emotion-10"
               dir="ltr"
             >
-              NA EME UGBU A 
+              NA EME UGBU A
             </span>
             <span
               class="emotion-11"
@@ -8230,7 +8230,7 @@ exports[`StoryPromo Container should render live promoType top on amp 1`] = `
               class="emotion-17"
               dir="ltr"
             >
-              NA EME UGBU A 
+              NA EME UGBU A
             </span>
             <span
               class="emotion-18"

diff --git a/src/app/legacy/psammead/psammead-bulletin/src/__snapshots__/index.test.jsx.snap b/src/app/legacy/psammead/psammead-bulletin/src/__snapshots__/index.test.jsx.snap
@@ -1036,13 +1036,13 @@ exports[`Bulletin should render live audio correctly 1`] = `
               class="emotion-14"
               dir="ltr"
             >
-              LIVE 
+              LIVE
             </span>
             <span
               class="emotion-15"
               lang="en-GB"
             >
-              Listen LIVE, 
+               Listen LIVE, 
             </span>
             This is the headline
           </span>
@@ -1450,13 +1450,13 @@ exports[`Bulletin should render live video correctly 1`] = `
               class="emotion-14"
               dir="ltr"
             >
-              LIVE 
+              LIVE
             </span>
             <span
               class="emotion-15"
               lang="en-GB"
             >
-              Watch LIVE, 
+               Watch LIVE, 
             </span>
             This is the headline
           </span>

diff --git a/src/app/legacy/psammead/psammead-story-promo/src/__snapshots__/index.test.jsx.snap b/src/app/legacy/psammead/psammead-story-promo/src/__snapshots__/index.test.jsx.snap
@@ -2325,13 +2325,13 @@ exports[`StoryPromo should render Live promo correctly 1`] = `
               class="emotion-14"
               dir="ltr"
             >
-              LIVE 
+              LIVE
             </span>
             <span
               class="emotion-15"
               lang="en-GB"
             >
-              Live, 
+               Live, 
             </span>
             The live promo headline
           </span>
@@ -2646,13 +2646,13 @@ exports[`StoryPromo should render a RTL Live promo correctly 1`] = `
               class="emotion-14"
               dir="rtl"
             >
-              مباشر 
+              مباشر
             </span>
             <span
               class="emotion-15"
               lang="en-GB"
             >
-              Live, 
+               Live, 
             </span>
             The live promo headline
           </span>

diff --git a/ws-nextjs-app/pages/[service]/live/[id]/__snapshots__/live.test.tsx.snap b/ws-nextjs-app/pages/[service]/live/[id]/__snapshots__/live.test.tsx.snap
@@ -1333,7 +1333,7 @@ exports[`Live Page creates snapshot of the live page 1`] = `
                   class="emotion-9"
                   dir="ltr"
                 >
-                  As E Dey Happen 
+                  As E Dey Happen
                 </span>
                 <span
                   class="emotion-10"