WSTEAMA-1454 - Related Content focus indicator

bbc · Nov 14, 2024 · 48630dd · 48630dd
1 parent 60b16e9
commit 48630dd
Show file tree

Hide file tree

Showing 12 changed files with 289 additions and 1 deletion.
diff --git a/src/app/components/MostRead/Label/__snapshots__/index.test.tsx.snap b/src/app/components/MostRead/Label/__snapshots__/index.test.tsx.snap
@@ -31,6 +31,12 @@ exports[`MostReadSectionLabel assertion should render most-read section label wi
   padding: 0;
 }
 
+.emotion-2:focus-visible {
+  outline: 0.1875rem solid #000000;
+  box-shadow: 0 0 0 0.1875rem #FFFFFF;
+  outline-offset: 0.1875rem;
+}
+
 .emotion-4 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -120,6 +126,7 @@ exports[`MostReadSectionLabel assertion should render most-read section label wi
   >
     <h2
       class="emotion-2 emotion-3"
+      id="section-label-heading-Most-Read"
     >
       <span
         class="emotion-4 emotion-5"

diff --git a/src/app/legacy/containers/CpsOnwardJourney/__snapshots__/index.test.jsx.snap b/src/app/legacy/containers/CpsOnwardJourney/__snapshots__/index.test.jsx.snap
@@ -714,6 +714,12 @@ exports[`CpsOnwardJourney renders section label with element as strong 1`] = `
   padding: 0;
 }
 
+.emotion-9:focus-visible {
+  outline: 0.1875rem solid #000000;
+  box-shadow: 0 0 0 0.1875rem #FFFFFF;
+  outline-offset: 0.1875rem;
+}
+
 .emotion-11 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -1088,6 +1094,12 @@ exports[`CpsOnwardJourney renders section label with with alternative background
   padding: 0;
 }
 
+.emotion-9:focus-visible {
+  outline: 0.1875rem solid #000000;
+  box-shadow: 0 0 0 0.1875rem #FFFFFF;
+  outline-offset: 0.1875rem;
+}
+
 .emotion-11 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -1188,6 +1200,7 @@ exports[`CpsOnwardJourney renders section label with with alternative background
       >
         <h2
           class="emotion-9 emotion-10"
+          id="section-label-heading-heading-label"
         >
           <span
             class="emotion-11 emotion-12"
@@ -1462,6 +1475,12 @@ exports[`CpsOnwardJourney renders section label with without bar under section l
   padding: 0;
 }
 
+.emotion-9:focus-visible {
+  outline: 0.1875rem solid #000000;
+  box-shadow: 0 0 0 0.1875rem #FFFFFF;
+  outline-offset: 0.1875rem;
+}
+
 .emotion-11 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -1562,6 +1581,7 @@ exports[`CpsOnwardJourney renders section label with without bar under section l
       >
         <h2
           class="emotion-9 emotion-10"
+          id="section-label-heading-heading-label"
         >
           <span
             class="emotion-11 emotion-12"
@@ -1883,6 +1903,12 @@ exports[`CpsOnwardJourney renders skip link with multiple promos 1`] = `
   padding: 0;
 }
 
+.emotion-13:focus-visible {
+  outline: 0.1875rem solid #000000;
+  box-shadow: 0 0 0 0.1875rem #FFFFFF;
+  outline-offset: 0.1875rem;
+}
+
 .emotion-15 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -2003,6 +2029,7 @@ exports[`CpsOnwardJourney renders skip link with multiple promos 1`] = `
         >
           <h2
             class="emotion-13 emotion-14"
+            id="section-label-heading-heading-label"
           >
             <span
               class="emotion-15 emotion-16"
@@ -2348,6 +2375,12 @@ exports[`CpsOnwardJourney renders skip link with single promo 1`] = `
   padding: 0;
 }
 
+.emotion-13:focus-visible {
+  outline: 0.1875rem solid #000000;
+  box-shadow: 0 0 0 0.1875rem #FFFFFF;
+  outline-offset: 0.1875rem;
+}
+
 .emotion-15 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -2468,6 +2501,7 @@ exports[`CpsOnwardJourney renders skip link with single promo 1`] = `
         >
           <h2
             class="emotion-13 emotion-14"
+            id="section-label-heading-heading-label"
           >
             <span
               class="emotion-15 emotion-16"

diff --git a/src/app/legacy/containers/CpsRecommendations/__snapshots__/index.test.jsx.snap b/src/app/legacy/containers/CpsRecommendations/__snapshots__/index.test.jsx.snap
@@ -198,6 +198,12 @@ exports[`CpsRecommendations should render when cpsRecommendations toggle is enab
   padding: 0;
 }
 
+.emotion-11:focus-visible {
+  outline: 0.1875rem solid #000000;
+  box-shadow: 0 0 0 0.1875rem #FFFFFF;
+  outline-offset: 0.1875rem;
+}
+
 .emotion-13 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -775,6 +781,12 @@ exports[`CpsRecommendations should render when cpsRecommendations toggle is enab
   padding: 0;
 }
 
+.emotion-11:focus-visible {
+  outline: 0.1875rem solid #000000;
+  box-shadow: 0 0 0 0.1875rem #FFFFFF;
+  outline-offset: 0.1875rem;
+}
+
 .emotion-13 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -1622,6 +1634,12 @@ exports[`CpsRecommendations should render when cpsRecommendations toggle is enab
   padding: 0;
 }
 
+.emotion-11:focus-visible {
+  outline: 0.1875rem solid #000000;
+  box-shadow: 0 0 0 0.1875rem #FFFFFF;
+  outline-offset: 0.1875rem;
+}
+
 .emotion-13 {
   display: -webkit-box;
   display: -webkit-flex;

diff --git a/src/app/legacy/containers/EpisodeList/RecentAudioEpisodes/__snapshots__/index.test.jsx.snap b/src/app/legacy/containers/EpisodeList/RecentAudioEpisodes/__snapshots__/index.test.jsx.snap
@@ -43,6 +43,12 @@ exports[`RecentAudioEpisodes should render audio episodes correctly 1`] = `
   padding: 0;
 }
 
+.emotion-5:focus-visible {
+  outline: 0.1875rem solid #000000;
+  box-shadow: 0 0 0 0.1875rem #FFFFFF;
+  outline-offset: 0.1875rem;
+}
+
 .emotion-7 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -361,6 +367,7 @@ exports[`RecentAudioEpisodes should render audio episodes correctly 1`] = `
     >
       <h2
         class="emotion-5 emotion-6"
+        id="section-label-heading-recent-episodes"
       >
         <span
           class="emotion-7 emotion-8"

diff --git a/src/app/legacy/containers/EpisodeList/RecentVideoEpisodes/__snapshots__/index.test.jsx.snap b/src/app/legacy/containers/EpisodeList/RecentVideoEpisodes/__snapshots__/index.test.jsx.snap
@@ -39,6 +39,12 @@ exports[`Recent Video Episodes should render video episodes correctly 1`] = `
   padding: 0;
 }
 
+.emotion-3:focus-visible {
+  outline: 0.1875rem solid #000000;
+  box-shadow: 0 0 0 0.1875rem #FFFFFF;
+  outline-offset: 0.1875rem;
+}
+
 .emotion-5 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -451,6 +457,7 @@ exports[`Recent Video Episodes should render video episodes correctly 1`] = `
     >
       <h2
         class="emotion-3 emotion-4"
+        id="section-label-heading-recent-episodes"
       >
         <span
           class="emotion-5 emotion-6"

diff --git a/src/app/legacy/containers/IndexPageSection/__snapshots__/index.test.jsx.snap b/src/app/legacy/containers/IndexPageSection/__snapshots__/index.test.jsx.snap
@@ -46,6 +46,12 @@ HTMLCollection [
   padding: 0;
 }
 
+.emotion-4:focus-visible {
+  outline: 0.1875rem solid #000000;
+  box-shadow: 0 0 0 0.1875rem #FFFFFF;
+  outline-offset: 0.1875rem;
+}
+
 .emotion-6 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -922,6 +928,7 @@ HTMLCollection [
     >
       <h2
         class="emotion-4 emotion-5"
+        id="section-label-heading-Top-Stories"
       >
         <span
           class="emotion-6 emotion-7"
@@ -1336,6 +1343,12 @@ exports[`IndexPageSection Container snapshots should render correctly for canoni
   padding: 0;
 }
 
+.emotion-4:focus-visible {
+  outline: 0.1875rem solid #000000;
+  box-shadow: 0 0 0 0.1875rem #FFFFFF;
+  outline-offset: 0.1875rem;
+}
+
 .emotion-6 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -2213,6 +2226,7 @@ exports[`IndexPageSection Container snapshots should render correctly for canoni
     >
       <h2
         class="emotion-4 emotion-5"
+        id="section-label-heading-Top-Stories"
       >
         <span
           class="emotion-6 emotion-7"
@@ -2620,6 +2634,12 @@ exports[`IndexPageSection Container snapshots should render correctly with a lin
   padding: 0;
 }
 
+.emotion-4:focus-visible {
+  outline: 0.1875rem solid #000000;
+  box-shadow: 0 0 0 0.1875rem #FFFFFF;
+  outline-offset: 0.1875rem;
+}
+
 .emotion-6 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -3468,6 +3488,7 @@ exports[`IndexPageSection Container snapshots should render correctly with a lin
     >
       <h2
         class="emotion-4 emotion-5"
+        id="section-label-heading-Top-Stories"
       >
         <span
           class="emotion-6 emotion-7"
@@ -3675,6 +3696,12 @@ exports[`IndexPageSection Container snapshots should render with only one item 1
   padding: 0;
 }
 
+.emotion-4:focus-visible {
+  outline: 0.1875rem solid #000000;
+  box-shadow: 0 0 0 0.1875rem #FFFFFF;
+  outline-offset: 0.1875rem;
+}
+
 .emotion-6 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -4037,6 +4064,7 @@ exports[`IndexPageSection Container snapshots should render with only one item 1
     >
       <h2
         class="emotion-4 emotion-5"
+        id="section-label-heading-Top-Stories"
       >
         <span
           class="emotion-6 emotion-7"
@@ -4161,6 +4189,12 @@ exports[`IndexPageSection Container snapshots should render without a bar 1`] =
   padding: 0;
 }
 
+.emotion-4:focus-visible {
+  outline: 0.1875rem solid #000000;
+  box-shadow: 0 0 0 0.1875rem #FFFFFF;
+  outline-offset: 0.1875rem;
+}
+
 .emotion-6 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -5026,6 +5060,7 @@ exports[`IndexPageSection Container snapshots should render without a bar 1`] =
     >
       <h2
         class="emotion-4 emotion-5"
+        id="section-label-heading-Top-Stories"
       >
         <span
           class="emotion-6 emotion-7"

diff --git a/src/app/legacy/containers/RadioSchedule/Canonical/__snapshots__/index.test.jsx.snap b/src/app/legacy/containers/RadioSchedule/Canonical/__snapshots__/index.test.jsx.snap
@@ -73,6 +73,12 @@ exports[`Canonical RadioSchedule With initial data renders correctly for a servi
   padding: 0;
 }
 
+.emotion-5:focus-visible {
+  outline: 0.1875rem solid #000000;
+  box-shadow: 0 0 0 0.1875rem #FFFFFF;
+  outline-offset: 0.1875rem;
+}
+
 .emotion-7 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -882,6 +888,7 @@ exports[`Canonical RadioSchedule With initial data renders correctly for a servi
     >
       <h2
         class="emotion-5 emotion-6"
+        id="section-label-heading-Radio-Schedule"
       >
         <span
           class="emotion-7 emotion-8"
@@ -1515,6 +1522,12 @@ exports[`Canonical RadioSchedule Without initial data renders correctly for a se
   padding: 0;
 }
 
+.emotion-5:focus-visible {
+  outline: 0.1875rem solid #000000;
+  box-shadow: 0 0 0 0.1875rem #FFFFFF;
+  outline-offset: 0.1875rem;
+}
+
 .emotion-7 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -2324,6 +2337,7 @@ exports[`Canonical RadioSchedule Without initial data renders correctly for a se
     >
       <h2
         class="emotion-5 emotion-6"
+        id="section-label-heading-Radio-Schedule"
       >
         <span
           class="emotion-7 emotion-8"

diff --git a/src/app/legacy/containers/RelatedTopics/__snapshots__/index.test.jsx.snap b/src/app/legacy/containers/RelatedTopics/__snapshots__/index.test.jsx.snap
@@ -36,6 +36,12 @@ exports[`Expected use should render correctly with a single tag 1`] = `
   padding: 0;
 }
 
+.emotion-5:focus-visible {
+  outline: 0.1875rem solid #000000;
+  box-shadow: 0 0 0 0.1875rem #FFFFFF;
+  outline-offset: 0.1875rem;
+}
+
 .emotion-7 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -200,6 +206,7 @@ exports[`Expected use should render correctly with a single tag 1`] = `
     >
       <h2
         class="emotion-5 emotion-6"
+        id="section-label-heading-related-topics"
       >
         <span
           class="emotion-7 emotion-8"
@@ -271,6 +278,12 @@ exports[`Expected use should render correctly with multiple tags 1`] = `
   padding: 0;
 }
 
+.emotion-5:focus-visible {
+  outline: 0.1875rem solid #000000;
+  box-shadow: 0 0 0 0.1875rem #FFFFFF;
+  outline-offset: 0.1875rem;
+}
+
 .emotion-7 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -436,6 +449,7 @@ exports[`Expected use should render correctly with multiple tags 1`] = `
     >
       <h2
         class="emotion-5 emotion-6"
+        id="section-label-heading-related-topics"
       >
         <span
           class="emotion-7 emotion-8"