From 4c6bb924fdea222935f46e1f37ea059cb78d2314 Mon Sep 17 00:00:00 2001
From: Aaron Moore <aaron.moore@bbc.co.uk>
Date: Tue, 12 Nov 2024 11:21:36 +0000
Subject: [PATCH] Add focus-indicator to SubHeadline component (#12162)

---
 .../__snapshots__/index.test.jsx.snap         | 22 +++++++---
 .../src/__snapshots__/index.test.jsx.snap     | 44 ++++++++++++++-----
 .../psammead/psammead-headings/src/index.jsx  | 14 ++++--
 .../__snapshots__/index.test.tsx.snap         | 11 +++--
 4 files changed, 67 insertions(+), 24 deletions(-)

diff --git a/src/app/legacy/containers/Headings/__snapshots__/index.test.jsx.snap b/src/app/legacy/containers/Headings/__snapshots__/index.test.jsx.snap
index 000e4f5d1eb..748b8eaa6e8 100644
--- a/src/app/legacy/containers/Headings/__snapshots__/index.test.jsx.snap
+++ b/src/app/legacy/containers/Headings/__snapshots__/index.test.jsx.snap
@@ -568,8 +568,7 @@ exports[`Headings with plain text subheadline should render h2 containing correc
   font-weight: 700;
   font-style: normal;
   color: #141414;
-  margin: 0;
-  padding: 1.5rem 0;
+  margin: 1.5rem 0;
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
@@ -588,10 +587,16 @@ exports[`Headings with plain text subheadline should render h2 containing correc
 
 @media (min-width: 37.5rem) {
   .emotion-2 {
-    padding-top: 2rem;
+    margin-top: 2rem;
   }
 }
 
+.emotion-2:focus-visible {
+  outline: 0.1875rem solid #000000;
+  box-shadow: 0 0 0 0.1875rem #FFFFFF;
+  outline-offset: 0.1875rem;
+}
+
 <div>
   <div
     class="emotion-0 emotion-1"
@@ -1542,8 +1547,7 @@ exports[`Headings with subheadline data should render correctly 1`] = `
   font-weight: 700;
   font-style: normal;
   color: #141414;
-  margin: 0;
-  padding: 1.5rem 0;
+  margin: 1.5rem 0;
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
@@ -1562,10 +1566,16 @@ exports[`Headings with subheadline data should render correctly 1`] = `
 
 @media (min-width: 37.5rem) {
   .emotion-2 {
-    padding-top: 2rem;
+    margin-top: 2rem;
   }
 }
 
+.emotion-2:focus-visible {
+  outline: 0.1875rem solid #000000;
+  box-shadow: 0 0 0 0.1875rem #FFFFFF;
+  outline-offset: 0.1875rem;
+}
+
 <div>
   <div
     class="emotion-0 emotion-1"
diff --git a/src/app/legacy/psammead/psammead-headings/src/__snapshots__/index.test.jsx.snap b/src/app/legacy/psammead/psammead-headings/src/__snapshots__/index.test.jsx.snap
index e52cdce6482..20a152437a1 100644
--- a/src/app/legacy/psammead/psammead-headings/src/__snapshots__/index.test.jsx.snap
+++ b/src/app/legacy/psammead/psammead-headings/src/__snapshots__/index.test.jsx.snap
@@ -134,8 +134,7 @@ exports[`SubHeading component should render correctly 1`] = `
   font-weight: 700;
   font-style: normal;
   color: #141414;
-  margin: 0;
-  padding: 1.5rem 0;
+  margin: 1.5rem 0;
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
@@ -154,10 +153,16 @@ exports[`SubHeading component should render correctly 1`] = `
 
 @media (min-width: 37.5rem) {
   .emotion-0 {
-    padding-top: 2rem;
+    margin-top: 2rem;
   }
 }
 
+.emotion-0:focus-visible {
+  outline: 0.1875rem solid #000000;
+  box-shadow: 0 0 0 0.1875rem #FFFFFF;
+  outline-offset: 0.1875rem;
+}
+
 <div>
   <h2
     class="emotion-0 emotion-1"
@@ -176,8 +181,7 @@ exports[`SubHeading component should render correctly on page types that support
   font-weight: 700;
   font-style: normal;
   color: #F6F6F6;
-  margin: 0;
-  padding: 1.5rem 0;
+  margin: 1.5rem 0;
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
@@ -196,10 +200,16 @@ exports[`SubHeading component should render correctly on page types that support
 
 @media (min-width: 37.5rem) {
   .emotion-0 {
-    padding-top: 2rem;
+    margin-top: 2rem;
   }
 }
 
+.emotion-0:focus-visible {
+  outline: 0.1875rem solid #000000;
+  box-shadow: 0 0 0 0.1875rem #FFFFFF;
+  outline-offset: 0.1875rem;
+}
+
 <div>
   <h2
     class="emotion-0 emotion-1"
@@ -218,8 +228,7 @@ exports[`SubHeading component should render correctly with an ID 1`] = `
   font-weight: 700;
   font-style: normal;
   color: #141414;
-  margin: 0;
-  padding: 1.5rem 0;
+  margin: 1.5rem 0;
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
@@ -238,10 +247,16 @@ exports[`SubHeading component should render correctly with an ID 1`] = `
 
 @media (min-width: 37.5rem) {
   .emotion-0 {
-    padding-top: 2rem;
+    margin-top: 2rem;
   }
 }
 
+.emotion-0:focus-visible {
+  outline: 0.1875rem solid #000000;
+  box-shadow: 0 0 0 0.1875rem #FFFFFF;
+  outline-offset: 0.1875rem;
+}
+
 <div>
   <h2
     class="emotion-0 emotion-1"
@@ -261,8 +276,7 @@ exports[`SubHeading component should render correctly with arabic script typogra
   font-weight: 700;
   font-style: normal;
   color: #141414;
-  margin: 0;
-  padding: 1.5rem 0;
+  margin: 1.5rem 0;
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
@@ -281,10 +295,16 @@ exports[`SubHeading component should render correctly with arabic script typogra
 
 @media (min-width: 37.5rem) {
   .emotion-0 {
-    padding-top: 2rem;
+    margin-top: 2rem;
   }
 }
 
+.emotion-0:focus-visible {
+  outline: 0.1875rem solid #000000;
+  box-shadow: 0 0 0 0.1875rem #FFFFFF;
+  outline-offset: 0.1875rem;
+}
+
 <div>
   <h2
     class="emotion-0 emotion-1"
diff --git a/src/app/legacy/psammead/psammead-headings/src/index.jsx b/src/app/legacy/psammead/psammead-headings/src/index.jsx
index 0db2a5606b5..65c3c680816 100644
--- a/src/app/legacy/psammead/psammead-headings/src/index.jsx
+++ b/src/app/legacy/psammead/psammead-headings/src/index.jsx
@@ -13,6 +13,7 @@ import {
   getSansBold,
   getSerifMedium,
 } from '#psammead/psammead-styles/src/font-styles';
+import { focusIndicatorThickness } from '#app/components/ThemeProvider/focusIndicator';
 
 export const Headline = styled.h1`
   ${({ script }) => script && getCanon(script)};
@@ -32,10 +33,17 @@ export const SubHeading = styled.h2`
   ${({ service }) => getSansBold(service)}
   color: ${({ theme }) =>
     theme.isDarkUi ? theme.palette.GREY_2 : theme.palette.GREY_10};
-  margin: 0; /* Reset */
-  padding: ${GEL_SPACING_TRPL} 0;
+  margin: ${GEL_SPACING_TRPL} 0;
   ${MEDIA_QUERY_TYPOGRAPHY.LAPTOP_AND_LARGER} {
-    padding-top: ${GEL_SPACING_QUAD};
+    margin-top: ${GEL_SPACING_QUAD};
+  }
+
+  :focus-visible {
+    outline: ${({ theme: { palette } }) =>
+      `${focusIndicatorThickness} solid ${palette.BLACK}`};
+    box-shadow: ${({ theme: { palette } }) =>
+      `0 0 0 ${focusIndicatorThickness} ${palette.WHITE}`};
+    outline-offset: ${focusIndicatorThickness};
   }
 `;
 
diff --git a/src/app/pages/MediaArticlePage/__snapshots__/index.test.tsx.snap b/src/app/pages/MediaArticlePage/__snapshots__/index.test.tsx.snap
index 0d829bbe39c..af9365a08a5 100644
--- a/src/app/pages/MediaArticlePage/__snapshots__/index.test.tsx.snap
+++ b/src/app/pages/MediaArticlePage/__snapshots__/index.test.tsx.snap
@@ -635,8 +635,7 @@ exports[`MediaArticlePage should render a news article correctly 1`] = `
   font-weight: 700;
   font-style: normal;
   color: #141414;
-  margin: 0;
-  padding: 1.5rem 0;
+  margin: 1.5rem 0;
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
@@ -655,10 +654,16 @@ exports[`MediaArticlePage should render a news article correctly 1`] = `
 
 @media (min-width: 37.5rem) {
   .emotion-31 {
-    padding-top: 2rem;
+    margin-top: 2rem;
   }
 }
 
+.emotion-31:focus-visible {
+  outline: 0.1875rem solid #000000;
+  box-shadow: 0 0 0 0.1875rem #FFFFFF;
+  outline-offset: 0.1875rem;
+}
+
 .emotion-35 {
   font-size: 0.9375rem;
   line-height: 1.25rem;