Add focus-indicator to SubHeadline component (#12162)

bbc · Nov 12, 2024 · 4c6bb92 · 4c6bb92
1 parent 6e65b20
commit 4c6bb92
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 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
@@ -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
@@ -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
@@ -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
@@ -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;