From 48630dd7e24c8e49a87691a8158ff308eebc2fd2 Mon Sep 17 00:00:00 2001
From: Aaron Moore <aaron.moore@bbc.co.uk>
Date: Thu, 14 Nov 2024 15:45:31 +0000
Subject: [PATCH] WSTEAMA-1454 - Related Content focus indicator

---
 .../Label/__snapshots__/index.test.tsx.snap   |   7 ++
 .../__snapshots__/index.test.jsx.snap         |  34 ++++++
 .../__snapshots__/index.test.jsx.snap         |  18 +++
 .../__snapshots__/index.test.jsx.snap         |   7 ++
 .../__snapshots__/index.test.jsx.snap         |   7 ++
 .../__snapshots__/index.test.jsx.snap         |  35 ++++++
 .../__snapshots__/index.test.jsx.snap         |  14 +++
 .../__snapshots__/index.test.jsx.snap         |  14 +++
 .../src/__snapshots__/index.test.jsx.snap     | 111 ++++++++++++++++++
 .../psammead-section-label/src/index.jsx      |  15 ++-
 .../__snapshots__/index.test.tsx.snap         |  21 ++++
 .../__snapshots__/index.test.tsx.snap         |   7 ++
 12 files changed, 289 insertions(+), 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
index 5ac8dd150da..684ca64e223 100644
--- 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
index 01ccb09488a..6252ada2d2a 100644
--- 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
index 1cce4eaed24..c499550e129 100644
--- 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
index 108338e9ef3..e8c6970f085 100644
--- 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
index 4daf91174c1..ac7d749897a 100644
--- 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
index 8a2c5cad62d..8f3381577fc 100644
--- 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
index bd62a1955f0..9d6b1cfc2e6 100644
--- 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
index 3206ea99708..a61d168d4c5 100644
--- 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"
diff --git a/src/app/legacy/psammead/psammead-section-label/src/__snapshots__/index.test.jsx.snap b/src/app/legacy/psammead/psammead-section-label/src/__snapshots__/index.test.jsx.snap
index f481ce78b4b..947bf0e7342 100644
--- a/src/app/legacy/psammead/psammead-section-label/src/__snapshots__/index.test.jsx.snap
+++ b/src/app/legacy/psammead/psammead-section-label/src/__snapshots__/index.test.jsx.snap
@@ -32,6 +32,12 @@ exports[`SectionLabel With bar When hideSectionHeader is true should add styling
   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;
@@ -121,6 +127,7 @@ exports[`SectionLabel With bar When hideSectionHeader is true should add styling
   >
     <h2
       class="emotion-2 emotion-3"
+      id="section-label-heading-test-section-label"
     >
       <span
         class="emotion-4 emotion-5"
@@ -167,6 +174,12 @@ exports[`SectionLabel With bar With heading overriden should render a span eleme
   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;
@@ -302,6 +315,12 @@ exports[`SectionLabel With bar With linking title should render correctly 1`] =
   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 {
   color: #222222;
   -webkit-text-decoration: none;
@@ -444,6 +463,7 @@ exports[`SectionLabel With bar With linking title should render correctly 1`] =
   >
     <h2
       class="emotion-2 emotion-3"
+      id="section-label-heading-test-section-label"
     >
       <a
         class="focusIndicatorDisplayBlock emotion-4 emotion-5"
@@ -503,6 +523,12 @@ exports[`SectionLabel With bar With linking title should render correctly with a
   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 {
   color: #222222;
   -webkit-text-decoration: none;
@@ -645,6 +671,7 @@ exports[`SectionLabel With bar With linking title should render correctly with a
   >
     <h2
       class="emotion-2 emotion-3"
+      id="section-label-heading-test-section-label"
     >
       <a
         class="focusIndicatorDisplayBlock emotion-4 emotion-5"
@@ -704,6 +731,12 @@ exports[`SectionLabel With bar With linking title should render correctly with e
   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 {
   color: #222222;
   -webkit-text-decoration: none;
@@ -846,6 +879,7 @@ exports[`SectionLabel With bar With linking title should render correctly with e
   >
     <h2
       class="emotion-2 emotion-3"
+      id="section-label-heading-test-section-label"
     >
       <a
         class="focusIndicatorDisplayBlock emotion-4 emotion-5"
@@ -905,6 +939,12 @@ exports[`SectionLabel With bar With linking title should render correctly with e
   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 {
   color: #222222;
   -webkit-text-decoration: none;
@@ -1047,6 +1087,7 @@ exports[`SectionLabel With bar With linking title should render correctly with e
   >
     <h2
       class="emotion-2 emotion-3"
+      id="section-label-heading-test-section-label"
     >
       <a
         class="focusIndicatorDisplayBlock emotion-4 emotion-5"
@@ -1112,6 +1153,12 @@ exports[`SectionLabel With bar With plain title should render correctly with ara
   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;
@@ -1201,6 +1248,7 @@ exports[`SectionLabel With bar With plain title should render correctly with ara
   >
     <h2
       class="emotion-2 emotion-3"
+      id="section-label-heading-test-section-label"
     >
       <span
         class="emotion-4 emotion-5"
@@ -1247,6 +1295,12 @@ exports[`SectionLabel With bar With plain title should render correctly with exp
   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;
@@ -1336,6 +1390,7 @@ exports[`SectionLabel With bar With plain title should render correctly with exp
   >
     <h2
       class="emotion-2 emotion-3"
+      id="section-label-heading-test-section-label"
     >
       <span
         class="emotion-4 emotion-5"
@@ -1382,6 +1437,12 @@ exports[`SectionLabel With bar With plain title should render correctly with exp
   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;
@@ -1471,6 +1532,7 @@ exports[`SectionLabel With bar With plain title should render correctly with exp
   >
     <h2
       class="emotion-2 emotion-3"
+      id="section-label-heading-test-section-label"
     >
       <span
         class="emotion-4 emotion-5"
@@ -1517,6 +1579,12 @@ exports[`SectionLabel With bar With plain title should render correctly with mob
   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;
@@ -1606,6 +1674,7 @@ exports[`SectionLabel With bar With plain title should render correctly with mob
   >
     <h2
       class="emotion-2 emotion-3"
+      id="section-label-heading-test-section-label"
     >
       <span
         class="emotion-4 emotion-5"
@@ -1652,6 +1721,12 @@ exports[`SectionLabel With bar Without bar With linking title should render corr
   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 {
   color: #222222;
   -webkit-text-decoration: none;
@@ -1794,6 +1869,7 @@ exports[`SectionLabel With bar Without bar With linking title should render corr
   >
     <h2
       class="emotion-2 emotion-3"
+      id="section-label-heading-test-section-label"
     >
       <a
         class="focusIndicatorDisplayBlock emotion-4 emotion-5"
@@ -1853,6 +1929,12 @@ exports[`SectionLabel With bar Without bar With linking title should render corr
   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 {
   color: #222222;
   -webkit-text-decoration: none;
@@ -1995,6 +2077,7 @@ exports[`SectionLabel With bar Without bar With linking title should render corr
   >
     <h2
       class="emotion-2 emotion-3"
+      id="section-label-heading-test-section-label"
     >
       <a
         class="focusIndicatorDisplayBlock emotion-4 emotion-5"
@@ -2054,6 +2137,12 @@ exports[`SectionLabel With bar Without bar With linking title should render corr
   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 {
   color: #222222;
   -webkit-text-decoration: none;
@@ -2196,6 +2285,7 @@ exports[`SectionLabel With bar Without bar With linking title should render corr
   >
     <h2
       class="emotion-2 emotion-3"
+      id="section-label-heading-test-section-label"
     >
       <a
         class="focusIndicatorDisplayBlock emotion-4 emotion-5"
@@ -2255,6 +2345,12 @@ exports[`SectionLabel With bar Without bar With plain title should render correc
   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;
@@ -2344,6 +2440,7 @@ exports[`SectionLabel With bar Without bar With plain title should render correc
   >
     <h2
       class="emotion-2 emotion-3"
+      id="section-label-heading-test-section-label"
     >
       <span
         class="emotion-4 emotion-5"
@@ -2390,6 +2487,12 @@ exports[`SectionLabel With bar Without bar With plain title should render correc
   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;
@@ -2479,6 +2582,7 @@ exports[`SectionLabel With bar Without bar With plain title should render correc
   >
     <h2
       class="emotion-2 emotion-3"
+      id="section-label-heading-test-section-label"
     >
       <span
         class="emotion-4 emotion-5"
@@ -2525,6 +2629,12 @@ exports[`SectionLabel With bar Without bar With plain title should render correc
   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;
@@ -2614,6 +2724,7 @@ exports[`SectionLabel With bar Without bar With plain title should render correc
   >
     <h2
       class="emotion-2 emotion-3"
+      id="section-label-heading-test-section-label"
     >
       <span
         class="emotion-4 emotion-5"
diff --git a/src/app/legacy/psammead/psammead-section-label/src/index.jsx b/src/app/legacy/psammead/psammead-section-label/src/index.jsx
index 6a7e1902247..946e796aef5 100644
--- a/src/app/legacy/psammead/psammead-section-label/src/index.jsx
+++ b/src/app/legacy/psammead/psammead-section-label/src/index.jsx
@@ -9,6 +9,7 @@ import {
   GEL_SPACING_QUAD,
 } from '#psammead/gel-foundations/src/spacings';
 import { GHOST } from '#app/components/ThemeProvider/palette';
+import { focusIndicatorThickness } from '#app/components/ThemeProvider/focusIndicator';
 import { PlainTitle, LinkTitle } from './titles';
 
 const SectionLabelWrapper = styled.div`
@@ -42,6 +43,14 @@ export const Heading = styled.h2`
   /* reset default margins */
   margin: 0;
   padding: 0;
+
+  :focus-visible {
+    outline: ${({ theme: { palette } }) =>
+      `${focusIndicatorThickness} solid ${palette.BLACK}`};
+    box-shadow: ${({ theme: { palette } }) =>
+      `0 0 0 ${focusIndicatorThickness} ${palette.WHITE}`};
+    outline-offset: ${focusIndicatorThickness};
+  }
 `;
 
 const SectionLabel = ({
@@ -58,7 +67,11 @@ const SectionLabel = ({
   ...props
 }) => (
   <SectionLabelWrapper visuallyHidden={visuallyHidden} {...props}>
-    <Heading as={overrideHeadingAs}>
+    <Heading
+      as={overrideHeadingAs}
+      {...(labelId &&
+        !overrideHeadingAs && { id: `section-label-heading-${labelId}` })}
+    >
       {linkText && href ? (
         <LinkTitle
           dir={dir}
diff --git a/src/app/pages/ArticlePage/__snapshots__/index.test.tsx.snap b/src/app/pages/ArticlePage/__snapshots__/index.test.tsx.snap
index 44e7c2fc1fe..85c7c370134 100644
--- a/src/app/pages/ArticlePage/__snapshots__/index.test.tsx.snap
+++ b/src/app/pages/ArticlePage/__snapshots__/index.test.tsx.snap
@@ -364,6 +364,12 @@ exports[`Article Page should render a ltr article (pidgin) with most read correc
   padding: 0;
 }
 
+.emotion-15:focus-visible {
+  outline: 0.1875rem solid #000000;
+  box-shadow: 0 0 0 0.1875rem #FFFFFF;
+  outline-offset: 0.1875rem;
+}
+
 .emotion-17 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -871,6 +877,7 @@ exports[`Article Page should render a ltr article (pidgin) with most read correc
       >
         <h2
           class="emotion-15 emotion-16"
+          id="section-label-heading-Most-Read"
         >
           <span
             class="emotion-17 emotion-18"
@@ -1528,6 +1535,12 @@ exports[`Article Page should render a news article correctly 1`] = `
   padding: 0;
 }
 
+.emotion-19:focus-visible {
+  outline: 0.1875rem solid #000000;
+  box-shadow: 0 0 0 0.1875rem #FFFFFF;
+  outline-offset: 0.1875rem;
+}
+
 .emotion-21 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -2299,6 +2312,7 @@ exports[`Article Page should render a news article correctly 1`] = `
       >
         <h2
           class="emotion-19 emotion-20"
+          id="section-label-heading-Most-Read"
         >
           <span
             class="emotion-21 emotion-22"
@@ -3700,6 +3714,12 @@ exports[`Article Page should render a rtl article (persian) with most read corre
   padding: 0;
 }
 
+.emotion-15:focus-visible {
+  outline: 0.1875rem solid #000000;
+  box-shadow: 0 0 0 0.1875rem #FFFFFF;
+  outline-offset: 0.1875rem;
+}
+
 .emotion-17 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -4427,6 +4447,7 @@ exports[`Article Page should render a rtl article (persian) with most read corre
       >
         <h2
           class="emotion-15 emotion-16"
+          id="section-label-heading-Most-Read"
         >
           <span
             class="emotion-17 emotion-18"
diff --git a/src/app/pages/LiveRadioPage/__snapshots__/index.test.tsx.snap b/src/app/pages/LiveRadioPage/__snapshots__/index.test.tsx.snap
index 3418a415bad..8f5dc1d8568 100644
--- a/src/app/pages/LiveRadioPage/__snapshots__/index.test.tsx.snap
+++ b/src/app/pages/LiveRadioPage/__snapshots__/index.test.tsx.snap
@@ -305,6 +305,12 @@ exports[`Radio Page Main should match snapshot for Canonical 1`] = `
   padding: 0;
 }
 
+.emotion-14:focus-visible {
+  outline: 0.1875rem solid #000000;
+  box-shadow: 0 0 0 0.1875rem #FFFFFF;
+  outline-offset: 0.1875rem;
+}
+
 .emotion-16 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -1106,6 +1112,7 @@ exports[`Radio Page Main should match snapshot for Canonical 1`] = `
     >
       <h2
         class="emotion-14 emotion-15"
+        id="section-label-heading-Radio-Schedule"
       >
         <span
           class="emotion-16 emotion-17"