WSTEAMA-1115 - A11y | Fix focus indicator VoiceOver bug on Homepage promos

src/app/components/Billboard/index.styles.ts

@@ -5,6 +5,7 @@ export default {
   link: ({ palette }: Theme) =>
     css({
       textDecoration: 'none',
+      display: 'block',
       color: palette.WHITE,
       cursor: 'pointer',
       '&:hover, &:focus': {

src/app/components/Billboard/index.tsx

@@ -53,12 +53,7 @@ const Billboard = forwardRef(
             />
             <div css={styles.textContainer}>
               <Heading level={2} size="paragon" css={styles.heading} id={id}>
-                <a
-                  href={link}
-                  css={styles.link}
-                  className="focusIndicatorDisplayBlock"
-                  onClick={clickTrackerHandler}
-                >
+                <a href={link} css={styles.link} onClick={clickTrackerHandler}>
                   {showLiveLabel ? (
                     <div data-testid="billboard-live-label">
                       <LivePulse

src/app/components/Curation/CurationPromo/index.tsx

@@ -55,11 +55,7 @@ const CurationPromo = ({
       </Promo.Image>
       <Promo.Heading as={`h${headingLevel}`}>
         {isMedia ? (
-          <Promo.A
-            href={link}
-            aria-labelledby={id}
-            className="focusIndicatorDisplayBlock"
-          >
+          <Promo.A href={link} aria-labelledby={id}>
             <span id={id} role="text">
               <VisuallyHiddenText data-testid="visually-hidden-text">
                 {typeTranslated}
@@ -71,7 +67,7 @@ const CurationPromo = ({
             </span>
           </Promo.A>
         ) : (
-          <Promo.A href={link} className="focusIndicatorDisplayBlock">
+          <Promo.A href={link}>
             {isLive ? <LiveLabel>{title}</LiveLabel> : title}
           </Promo.A>
         )}

src/app/components/Curation/HierarchicalGrid/index.tsx

@@ -107,11 +107,7 @@ const HiearchicalGrid = ({
                   })}
                 >
                   {isMedia ? (
-                    <Promo.A
-                      href={promo.link}
-                      aria-labelledby={promo.id}
-                      className="focusIndicatorDisplayBlock"
-                    >
+                    <Promo.A href={promo.link} aria-labelledby={promo.id}>
                       <span id={promo.id} role="text">
                         <VisuallyHiddenText data-testid="visually-hidden-text">
                           {typeTranslated}
@@ -125,10 +121,7 @@ const HiearchicalGrid = ({
                       </span>
                     </Promo.A>
                   ) : (
-                    <Promo.A
-                      href={promo.link}
-                      className="focusIndicatorDisplayBlock"
-                    >
+                    <Promo.A href={promo.link}>
                       {isLive ? (
                         <LiveLabel
                           {...(isFirstPromo && {

src/app/components/MostRead/Amp/__snapshots__/index.test.tsx.snap

@@ -165,6 +165,7 @@ exports[`AmpMostRead should render as expected 1`] = `
   -webkit-text-decoration: none;
   text-decoration: none;
   margin-bottom: 0.5rem;
+  display: table-cell;
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
@@ -265,7 +266,7 @@ exports[`AmpMostRead should render as expected 1`] = `
               dir="ltr"
             >
               <a
-                class="focusIndicatorDisplayTableCell emotion-7"
+                class="emotion-7"
                 href="{{href}}"
               >
                 {{title}}

src/app/components/MostRead/Canonical/Item/__snapshots__/index.test.tsx.snap

@@ -209,6 +209,7 @@ exports[`MostReadItemWrapper should render ltr correctly with 10 items 1`] = `
   -webkit-text-decoration: none;
   text-decoration: none;
   margin-bottom: 0.5rem;
+  display: table-cell;
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
@@ -508,7 +509,7 @@ exports[`MostReadItemWrapper should render ltr correctly with 10 items 1`] = `
         dir="ltr"
       >
         <a
-          class="focusIndicatorDisplayTableCell emotion-6"
+          class="emotion-6"
           href="https://www.bbc.com/pidgin/articles/cwl08rd38l6o"
         >
           Tins you need to know about Babcock University
@@ -539,7 +540,7 @@ exports[`MostReadItemWrapper should render ltr correctly with 10 items 1`] = `
         dir="ltr"
       >
         <a
-          class="focusIndicatorDisplayTableCell emotion-6"
+          class="emotion-6"
           href="https://www.bbc.com/pidgin/articles/cwl08rd38l6o"
         >
           Tins you need to know about Babcock University
@@ -570,7 +571,7 @@ exports[`MostReadItemWrapper should render ltr correctly with 10 items 1`] = `
         dir="ltr"
       >
         <a
-          class="focusIndicatorDisplayTableCell emotion-6"
+          class="emotion-6"
           href="https://www.bbc.com/pidgin/articles/cwl08rd38l6o"
         >
           Tins you need to know about Babcock University
@@ -601,7 +602,7 @@ exports[`MostReadItemWrapper should render ltr correctly with 10 items 1`] = `
         dir="ltr"
       >
         <a
-          class="focusIndicatorDisplayTableCell emotion-6"
+          class="emotion-6"
           href="https://www.bbc.com/pidgin/articles/cwl08rd38l6o"
         >
           Tins you need to know about Babcock University
@@ -632,7 +633,7 @@ exports[`MostReadItemWrapper should render ltr correctly with 10 items 1`] = `
         dir="ltr"
       >
         <a
-          class="focusIndicatorDisplayTableCell emotion-6"
+          class="emotion-6"
           href="https://www.bbc.com/pidgin/articles/cwl08rd38l6o"
         >
           Tins you need to know about Babcock University
@@ -663,7 +664,7 @@ exports[`MostReadItemWrapper should render ltr correctly with 10 items 1`] = `
         dir="ltr"
       >
         <a
-          class="focusIndicatorDisplayTableCell emotion-6"
+          class="emotion-6"
           href="https://www.bbc.com/pidgin/articles/cwl08rd38l6o"
         >
           Tins you need to know about Babcock University
@@ -694,7 +695,7 @@ exports[`MostReadItemWrapper should render ltr correctly with 10 items 1`] = `
         dir="ltr"
       >
         <a
-          class="focusIndicatorDisplayTableCell emotion-6"
+          class="emotion-6"
           href="https://www.bbc.com/pidgin/articles/cwl08rd38l6o"
         >
           Tins you need to know about Babcock University
@@ -725,7 +726,7 @@ exports[`MostReadItemWrapper should render ltr correctly with 10 items 1`] = `
         dir="ltr"
       >
         <a
-          class="focusIndicatorDisplayTableCell emotion-6"
+          class="emotion-6"
           href="https://www.bbc.com/pidgin/articles/cwl08rd38l6o"
         >
           Tins you need to know about Babcock University
@@ -756,7 +757,7 @@ exports[`MostReadItemWrapper should render ltr correctly with 10 items 1`] = `
         dir="ltr"
       >
         <a
-          class="focusIndicatorDisplayTableCell emotion-6"
+          class="emotion-6"
           href="https://www.bbc.com/pidgin/articles/cwl08rd38l6o"
         >
           Tins you need to know about Babcock University
@@ -787,7 +788,7 @@ exports[`MostReadItemWrapper should render ltr correctly with 10 items 1`] = `
         dir="ltr"
       >
         <a
-          class="focusIndicatorDisplayTableCell emotion-6"
+          class="emotion-6"
           href="https://www.bbc.com/pidgin/articles/cwl08rd38l6o"
         >
           Tins you need to know about Babcock University
@@ -1007,6 +1008,7 @@ exports[`MostReadItemWrapper should render rtl correctly with 10 items 1`] = `
   -webkit-text-decoration: none;
   text-decoration: none;
   margin-bottom: 0.5rem;
+  display: table-cell;
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
@@ -1306,7 +1308,7 @@ exports[`MostReadItemWrapper should render rtl correctly with 10 items 1`] = `
         dir="rtl"
       >
         <a
-          class="focusIndicatorDisplayTableCell emotion-6"
+          class="emotion-6"
           href="https://www.bbc.com/persian/articles/cej3lzd5e0go"
         >
           در این جشنواره برای نخستین بار از کارگران افغانستان در شهر تهران تقدیر شد
@@ -1337,7 +1339,7 @@ exports[`MostReadItemWrapper should render rtl correctly with 10 items 1`] = `
         dir="rtl"
       >
         <a
-          class="focusIndicatorDisplayTableCell emotion-6"
+          class="emotion-6"
           href="https://www.bbc.com/persian/articles/cej3lzd5e0go"
         >
           در این جشنواره برای نخستین بار از کارگران افغانستان در شهر تهران تقدیر شد
@@ -1368,7 +1370,7 @@ exports[`MostReadItemWrapper should render rtl correctly with 10 items 1`] = `
         dir="rtl"
       >
         <a
-          class="focusIndicatorDisplayTableCell emotion-6"
+          class="emotion-6"
           href="https://www.bbc.com/persian/articles/cej3lzd5e0go"
         >
           در این جشنواره برای نخستین بار از کارگران افغانستان در شهر تهران تقدیر شد
@@ -1399,7 +1401,7 @@ exports[`MostReadItemWrapper should render rtl correctly with 10 items 1`] = `
         dir="rtl"
       >
         <a
-          class="focusIndicatorDisplayTableCell emotion-6"
+          class="emotion-6"
           href="https://www.bbc.com/persian/articles/cej3lzd5e0go"
         >
           در این جشنواره برای نخستین بار از کارگران افغانستان در شهر تهران تقدیر شد
@@ -1430,7 +1432,7 @@ exports[`MostReadItemWrapper should render rtl correctly with 10 items 1`] = `
         dir="rtl"
       >
         <a
-          class="focusIndicatorDisplayTableCell emotion-6"
+          class="emotion-6"
           href="https://www.bbc.com/persian/articles/cej3lzd5e0go"
         >
           در این جشنواره برای نخستین بار از کارگران افغانستان در شهر تهران تقدیر شد
@@ -1461,7 +1463,7 @@ exports[`MostReadItemWrapper should render rtl correctly with 10 items 1`] = `
         dir="rtl"
       >
         <a
-          class="focusIndicatorDisplayTableCell emotion-6"
+          class="emotion-6"
           href="https://www.bbc.com/persian/articles/cej3lzd5e0go"
         >
           در این جشنواره برای نخستین بار از کارگران افغانستان در شهر تهران تقدیر شد
@@ -1492,7 +1494,7 @@ exports[`MostReadItemWrapper should render rtl correctly with 10 items 1`] = `
         dir="rtl"
       >
         <a
-          class="focusIndicatorDisplayTableCell emotion-6"
+          class="emotion-6"
           href="https://www.bbc.com/persian/articles/cej3lzd5e0go"
         >
           در این جشنواره برای نخستین بار از کارگران افغانستان در شهر تهران تقدیر شد
@@ -1523,7 +1525,7 @@ exports[`MostReadItemWrapper should render rtl correctly with 10 items 1`] = `
         dir="rtl"
       >
         <a
-          class="focusIndicatorDisplayTableCell emotion-6"
+          class="emotion-6"
           href="https://www.bbc.com/persian/articles/cej3lzd5e0go"
         >
           در این جشنواره برای نخستین بار از کارگران افغانستان در شهر تهران تقدیر شد
@@ -1554,7 +1556,7 @@ exports[`MostReadItemWrapper should render rtl correctly with 10 items 1`] = `
         dir="rtl"
       >
         <a
-          class="focusIndicatorDisplayTableCell emotion-6"
+          class="emotion-6"
           href="https://www.bbc.com/persian/articles/cej3lzd5e0go"
         >
           در این جشنواره برای نخستین بار از کارگران افغانستان در شهر تهران تقدیر شد
@@ -1585,7 +1587,7 @@ exports[`MostReadItemWrapper should render rtl correctly with 10 items 1`] = `
         dir="rtl"
       >
         <a
-          class="focusIndicatorDisplayTableCell emotion-6"
+          class="emotion-6"
           href="https://www.bbc.com/persian/articles/cej3lzd5e0go"
         >
           در این جشنواره برای نخستین بار از کارگران افغانستان در شهر تهران تقدیر شد
@@ -1620,6 +1622,7 @@ exports[`MostReadLink should render ltr correctly 1`] = `
   -webkit-text-decoration: none;
   text-decoration: none;
   margin-bottom: 0.5rem;
+  display: table-cell;
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
@@ -1681,7 +1684,7 @@ exports[`MostReadLink should render ltr correctly 1`] = `
     dir="ltr"
   >
     <a
-      class="focusIndicatorDisplayTableCell emotion-1"
+      class="emotion-1"
       href="https://www.bbc.com/pidgin/articles/cwl08rd38l6o"
     >
       Tins you need to know about Babcock University
@@ -1714,6 +1717,7 @@ exports[`MostReadLink should render rtl correctly 1`] = `
   -webkit-text-decoration: none;
   text-decoration: none;
   margin-bottom: 0.5rem;
+  display: table-cell;
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
@@ -1775,7 +1779,7 @@ exports[`MostReadLink should render rtl correctly 1`] = `
     dir="rtl"
   >
     <a
-      class="focusIndicatorDisplayTableCell emotion-1"
+      class="emotion-1"
       href="https://www.bbc.com/persian/articles/cej3lzd5e0go"
     >
       در این جشنواره برای نخستین بار از کارگران افغانستان در شهر تهران تقدیر شد
@@ -1808,6 +1812,7 @@ exports[`MostReadLink should render with last updated date correctly 1`] = `
   -webkit-text-decoration: none;
   text-decoration: none;
   margin-bottom: 0.5rem;
+  display: table-cell;
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
@@ -1897,7 +1902,7 @@ exports[`MostReadLink should render with last updated date correctly 1`] = `
     dir="ltr"
   >
     <a
-      class="focusIndicatorDisplayTableCell emotion-1"
+      class="emotion-1"
       href="https://www.bbc.com/pidgin/articles/cwl08rd38l6o"
     >
       Tins you need to know about Babcock University

src/app/components/MostRead/Canonical/Item/index.styles.ts

@@ -11,6 +11,7 @@ const styles = {
       color: palette.EBON,
       textDecoration: 'none',
       marginBottom: `${spacings.FULL}rem`,
+      display: 'table-cell',
 
       '&:hover, &:focus': {
         textDecoration: 'underline',

src/app/components/MostRead/Canonical/Item/index.tsx

@@ -54,7 +54,6 @@ export const MostReadLink = ({
         css={[styles.link, size === 'default' && styles.defaultLink]}
         href={href}
         onClick={clickTrackerHandler}
-        className="focusIndicatorDisplayTableCell"
       >
         {title}
       </a>