Merge pull request #12285 from bbc/WSTEAMA-1115-ally-fix-focus-indica…

…tor-on-homepage-promos WSTEAMA-1115 - A11y | Fix focus indicator VoiceOver bug on Homepage promos
bbc · Jan 21, 2025 · 5866586 · 5866586
2 parents 3b94cf0 + 9a5772b
commit 5866586
Show file tree

Hide file tree

Showing 12 changed files with 156 additions and 171 deletions.
diff --git a/src/app/components/Billboard/index.styles.ts b/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': {

diff --git a/src/app/components/Billboard/index.tsx b/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

diff --git a/src/app/components/Curation/CurationPromo/index.tsx b/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>
         )}

diff --git a/src/app/components/Curation/HierarchicalGrid/index.tsx b/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 && {

diff --git a/src/app/components/MostRead/Amp/__snapshots__/index.test.tsx.snap b/src/app/components/MostRead/Amp/__snapshots__/index.test.tsx.snap
@@ -164,7 +164,7 @@ exports[`AmpMostRead should render as expected 1`] = `
   color: #222222;
   -webkit-text-decoration: none;
   text-decoration: none;
-  margin-bottom: 0.5rem;
+  display: inline-block;
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
@@ -265,7 +265,7 @@ exports[`AmpMostRead should render as expected 1`] = `
               dir="ltr"
             >
               <a
-                class="focusIndicatorDisplayTableCell emotion-7"
+                class="emotion-7"
                 href="{{href}}"
               >
                 {{title}}

diff --git a/src/app/components/MostRead/Canonical/Item/__snapshots__/index.test.tsx.snap b/src/app/components/MostRead/Canonical/Item/__snapshots__/index.test.tsx.snap
@@ -208,7 +208,7 @@ exports[`MostReadItemWrapper should render ltr correctly with 10 items 1`] = `
   color: #222222;
   -webkit-text-decoration: none;
   text-decoration: none;
-  margin-bottom: 0.5rem;
+  display: inline-block;
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
@@ -508,7 +508,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 +539,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 +570,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 +601,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 +632,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 +663,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 +694,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 +725,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 +756,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 +787,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
@@ -1006,7 +1006,7 @@ exports[`MostReadItemWrapper should render rtl correctly with 10 items 1`] = `
   color: #222222;
   -webkit-text-decoration: none;
   text-decoration: none;
-  margin-bottom: 0.5rem;
+  display: inline-block;
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
@@ -1306,7 +1306,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 +1337,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 +1368,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 +1399,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 +1430,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 +1461,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 +1492,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 +1523,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 +1554,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 +1585,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"
         >
           در این جشنواره برای نخستین بار از کارگران افغانستان در شهر تهران تقدیر شد
@@ -1619,7 +1619,7 @@ exports[`MostReadLink should render ltr correctly 1`] = `
   color: #222222;
   -webkit-text-decoration: none;
   text-decoration: none;
-  margin-bottom: 0.5rem;
+  display: inline-block;
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
@@ -1681,7 +1681,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
@@ -1713,7 +1713,7 @@ exports[`MostReadLink should render rtl correctly 1`] = `
   color: #222222;
   -webkit-text-decoration: none;
   text-decoration: none;
-  margin-bottom: 0.5rem;
+  display: inline-block;
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
@@ -1775,7 +1775,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"
     >
       در این جشنواره برای نخستین بار از کارگران افغانستان در شهر تهران تقدیر شد
@@ -1807,7 +1807,7 @@ exports[`MostReadLink should render with last updated date correctly 1`] = `
   color: #222222;
   -webkit-text-decoration: none;
   text-decoration: none;
-  margin-bottom: 0.5rem;
+  display: inline-block;
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
@@ -1897,7 +1897,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

diff --git a/src/app/components/MostRead/Canonical/Item/index.styles.ts b/src/app/components/MostRead/Canonical/Item/index.styles.ts
@@ -2,15 +2,15 @@ import { css, Theme } from '@emotion/react';
 import { grid } from '../../../../legacy/psammead/psammead-styles/src/detection';
 
 const styles = {
-  link: ({ spacings, palette, fontSizes, fontVariants }: Theme) =>
+  link: ({ palette, fontSizes, fontVariants }: Theme) =>
     css({
       ...fontSizes.pica,
       ...fontVariants.serifMedium,
 
       position: 'static',
       color: palette.EBON,
       textDecoration: 'none',
-      marginBottom: `${spacings.FULL}rem`,
+      display: 'inline-block',
 
       '&:hover, &:focus': {
         textDecoration: 'underline',

diff --git a/src/app/components/MostRead/Canonical/Item/index.tsx b/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>