From 220ad2d2a2e2342a6b7e4e7bfadfec9357aa8eda Mon Sep 17 00:00:00 2001 From: Aaron Moore Date: Fri, 15 Nov 2024 13:47:46 +0000 Subject: [PATCH] WSTEAMA-1454 - Related content header focus spacing (#12179) --- .../Label/__snapshots__/index.test.tsx.snap | 1 + .../__snapshots__/index.test.jsx.snap | 5 +++++ .../__snapshots__/index.test.jsx.snap | 3 +++ .../__snapshots__/index.test.jsx.snap | 1 + .../__snapshots__/index.test.jsx.snap | 1 + .../__snapshots__/index.test.jsx.snap | 5 +++++ .../Canonical/__snapshots__/index.test.jsx.snap | 2 ++ .../__snapshots__/index.test.jsx.snap | 2 ++ .../src/__snapshots__/index.test.jsx.snap | 16 ++++++++++++++++ .../psammead-section-label/src/index.jsx | 2 ++ .../__snapshots__/index.test.tsx.snap | 3 +++ .../__snapshots__/index.test.tsx.snap | 1 + 12 files changed, 42 insertions(+) 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 e3721f1c9d8..7918291c0b1 100644 --- a/src/app/components/MostRead/Label/__snapshots__/index.test.tsx.snap +++ b/src/app/components/MostRead/Label/__snapshots__/index.test.tsx.snap @@ -29,6 +29,7 @@ exports[`MostReadSectionLabel assertion should render most-read section label wi .emotion-2 { margin: 0; padding: 0; + scroll-margin-top: 1rem; } .emotion-2:focus-visible { 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 d3752ff09a6..994d2192715 100644 --- a/src/app/legacy/containers/CpsOnwardJourney/__snapshots__/index.test.jsx.snap +++ b/src/app/legacy/containers/CpsOnwardJourney/__snapshots__/index.test.jsx.snap @@ -712,6 +712,7 @@ exports[`CpsOnwardJourney renders section label with element as strong 1`] = ` .emotion-9 { margin: 0; padding: 0; + scroll-margin-top: 1rem; } .emotion-9:focus-visible { @@ -1092,6 +1093,7 @@ exports[`CpsOnwardJourney renders section label with with alternative background .emotion-9 { margin: 0; padding: 0; + scroll-margin-top: 1rem; } .emotion-9:focus-visible { @@ -1474,6 +1476,7 @@ exports[`CpsOnwardJourney renders section label with without bar under section l .emotion-9 { margin: 0; padding: 0; + scroll-margin-top: 1rem; } .emotion-9:focus-visible { @@ -1903,6 +1906,7 @@ exports[`CpsOnwardJourney renders skip link with multiple promos 1`] = ` .emotion-13 { margin: 0; padding: 0; + scroll-margin-top: 1rem; } .emotion-13:focus-visible { @@ -2376,6 +2380,7 @@ exports[`CpsOnwardJourney renders skip link with single promo 1`] = ` .emotion-13 { margin: 0; padding: 0; + scroll-margin-top: 1rem; } .emotion-13:focus-visible { 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 c499550e129..6c519d54257 100644 --- a/src/app/legacy/containers/CpsRecommendations/__snapshots__/index.test.jsx.snap +++ b/src/app/legacy/containers/CpsRecommendations/__snapshots__/index.test.jsx.snap @@ -196,6 +196,7 @@ exports[`CpsRecommendations should render when cpsRecommendations toggle is enab .emotion-11 { margin: 0; padding: 0; + scroll-margin-top: 1rem; } .emotion-11:focus-visible { @@ -779,6 +780,7 @@ exports[`CpsRecommendations should render when cpsRecommendations toggle is enab .emotion-11 { margin: 0; padding: 0; + scroll-margin-top: 1rem; } .emotion-11:focus-visible { @@ -1632,6 +1634,7 @@ exports[`CpsRecommendations should render when cpsRecommendations toggle is enab .emotion-11 { margin: 0; padding: 0; + scroll-margin-top: 1rem; } .emotion-11:focus-visible { 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 5b9d7e47ac8..6df64616b39 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 @@ -41,6 +41,7 @@ exports[`RecentAudioEpisodes should render audio episodes correctly 1`] = ` .emotion-5 { margin: 0; padding: 0; + scroll-margin-top: 1rem; } .emotion-5:focus-visible { 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 63f3cf532dd..6c3b7d224cd 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 @@ -37,6 +37,7 @@ exports[`Recent Video Episodes should render video episodes correctly 1`] = ` .emotion-3 { margin: 0; padding: 0; + scroll-margin-top: 1rem; } .emotion-3:focus-visible { 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 a44e0255f3d..69d4b72287a 100644 --- a/src/app/legacy/containers/IndexPageSection/__snapshots__/index.test.jsx.snap +++ b/src/app/legacy/containers/IndexPageSection/__snapshots__/index.test.jsx.snap @@ -44,6 +44,7 @@ HTMLCollection [ .emotion-4 { margin: 0; padding: 0; + scroll-margin-top: 1rem; } .emotion-4:focus-visible { @@ -1342,6 +1343,7 @@ exports[`IndexPageSection Container snapshots should render correctly for canoni .emotion-4 { margin: 0; padding: 0; + scroll-margin-top: 1rem; } .emotion-4:focus-visible { @@ -2634,6 +2636,7 @@ exports[`IndexPageSection Container snapshots should render correctly with a lin .emotion-4 { margin: 0; padding: 0; + scroll-margin-top: 1rem; } .emotion-4:focus-visible { @@ -3697,6 +3700,7 @@ exports[`IndexPageSection Container snapshots should render with only one item 1 .emotion-4 { margin: 0; padding: 0; + scroll-margin-top: 1rem; } .emotion-4:focus-visible { @@ -4191,6 +4195,7 @@ exports[`IndexPageSection Container snapshots should render without a bar 1`] = .emotion-4 { margin: 0; padding: 0; + scroll-margin-top: 1rem; } .emotion-4:focus-visible { 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 40e11e79fe9..ed3aba7b57f 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 @@ -71,6 +71,7 @@ exports[`Canonical RadioSchedule With initial data renders correctly for a servi .emotion-5 { margin: 0; padding: 0; + scroll-margin-top: 1rem; } .emotion-5:focus-visible { @@ -1521,6 +1522,7 @@ exports[`Canonical RadioSchedule Without initial data renders correctly for a se .emotion-5 { margin: 0; padding: 0; + scroll-margin-top: 1rem; } .emotion-5:focus-visible { 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 573f9b77a66..4b72c252dbd 100644 --- a/src/app/legacy/containers/RelatedTopics/__snapshots__/index.test.jsx.snap +++ b/src/app/legacy/containers/RelatedTopics/__snapshots__/index.test.jsx.snap @@ -34,6 +34,7 @@ exports[`Expected use should render correctly with a single tag 1`] = ` .emotion-5 { margin: 0; padding: 0; + scroll-margin-top: 1rem; } .emotion-5:focus-visible { @@ -277,6 +278,7 @@ exports[`Expected use should render correctly with multiple tags 1`] = ` .emotion-5 { margin: 0; padding: 0; + scroll-margin-top: 1rem; } .emotion-5:focus-visible { 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 1a1ce2714df..9c0f5a0ffa3 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 @@ -30,6 +30,7 @@ exports[`SectionLabel With bar When hideSectionHeader is true should add styling .emotion-2 { margin: 0; padding: 0; + scroll-margin-top: 1rem; } .emotion-2:focus-visible { @@ -173,6 +174,7 @@ exports[`SectionLabel With bar With heading overriden should render a span eleme .emotion-2 { margin: 0; padding: 0; + scroll-margin-top: 1rem; } .emotion-2:focus-visible { @@ -314,6 +316,7 @@ exports[`SectionLabel With bar With linking title should render correctly 1`] = .emotion-2 { margin: 0; padding: 0; + scroll-margin-top: 1rem; } .emotion-2:focus-visible { @@ -523,6 +526,7 @@ exports[`SectionLabel With bar With linking title should render correctly with a .emotion-2 { margin: 0; padding: 0; + scroll-margin-top: 1rem; } .emotion-2:focus-visible { @@ -732,6 +736,7 @@ exports[`SectionLabel With bar With linking title should render correctly with e .emotion-2 { margin: 0; padding: 0; + scroll-margin-top: 1rem; } .emotion-2:focus-visible { @@ -941,6 +946,7 @@ exports[`SectionLabel With bar With linking title should render correctly with e .emotion-2 { margin: 0; padding: 0; + scroll-margin-top: 1rem; } .emotion-2:focus-visible { @@ -1156,6 +1162,7 @@ exports[`SectionLabel With bar With plain title should render correctly with ara .emotion-2 { margin: 0; padding: 0; + scroll-margin-top: 1rem; } .emotion-2:focus-visible { @@ -1299,6 +1306,7 @@ exports[`SectionLabel With bar With plain title should render correctly with exp .emotion-2 { margin: 0; padding: 0; + scroll-margin-top: 1rem; } .emotion-2:focus-visible { @@ -1442,6 +1450,7 @@ exports[`SectionLabel With bar With plain title should render correctly with exp .emotion-2 { margin: 0; padding: 0; + scroll-margin-top: 1rem; } .emotion-2:focus-visible { @@ -1585,6 +1594,7 @@ exports[`SectionLabel With bar With plain title should render correctly with mob .emotion-2 { margin: 0; padding: 0; + scroll-margin-top: 1rem; } .emotion-2:focus-visible { @@ -1728,6 +1738,7 @@ exports[`SectionLabel With bar Without bar With linking title should render corr .emotion-2 { margin: 0; padding: 0; + scroll-margin-top: 1rem; } .emotion-2:focus-visible { @@ -1937,6 +1948,7 @@ exports[`SectionLabel With bar Without bar With linking title should render corr .emotion-2 { margin: 0; padding: 0; + scroll-margin-top: 1rem; } .emotion-2:focus-visible { @@ -2146,6 +2158,7 @@ exports[`SectionLabel With bar Without bar With linking title should render corr .emotion-2 { margin: 0; padding: 0; + scroll-margin-top: 1rem; } .emotion-2:focus-visible { @@ -2355,6 +2368,7 @@ exports[`SectionLabel With bar Without bar With plain title should render correc .emotion-2 { margin: 0; padding: 0; + scroll-margin-top: 1rem; } .emotion-2:focus-visible { @@ -2498,6 +2512,7 @@ exports[`SectionLabel With bar Without bar With plain title should render correc .emotion-2 { margin: 0; padding: 0; + scroll-margin-top: 1rem; } .emotion-2:focus-visible { @@ -2641,6 +2656,7 @@ exports[`SectionLabel With bar Without bar With plain title should render correc .emotion-2 { margin: 0; padding: 0; + scroll-margin-top: 1rem; } .emotion-2:focus-visible { 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 12a14c19dc8..f6dc12acc88 100644 --- a/src/app/legacy/psammead/psammead-section-label/src/index.jsx +++ b/src/app/legacy/psammead/psammead-section-label/src/index.jsx @@ -5,6 +5,7 @@ import { GEL_GROUP_4_SCREEN_WIDTH_MIN, } from '#psammead/gel-foundations/src/breakpoints'; import { + GEL_SPACING_DBL, GEL_SPACING_TRPL, GEL_SPACING_QUAD, } from '#psammead/gel-foundations/src/spacings'; @@ -43,6 +44,7 @@ export const Heading = styled.h2` /* reset default margins */ margin: 0; padding: 0; + scroll-margin-top: ${GEL_SPACING_DBL}; :focus-visible { outline: ${({ theme: { palette } }) => diff --git a/src/app/pages/ArticlePage/__snapshots__/index.test.tsx.snap b/src/app/pages/ArticlePage/__snapshots__/index.test.tsx.snap index 34af563950d..3545aefb062 100644 --- a/src/app/pages/ArticlePage/__snapshots__/index.test.tsx.snap +++ b/src/app/pages/ArticlePage/__snapshots__/index.test.tsx.snap @@ -362,6 +362,7 @@ exports[`Article Page should render a ltr article (pidgin) with most read correc .emotion-15 { margin: 0; padding: 0; + scroll-margin-top: 1rem; } .emotion-15:focus-visible { @@ -1534,6 +1535,7 @@ exports[`Article Page should render a news article correctly 1`] = ` .emotion-19 { margin: 0; padding: 0; + scroll-margin-top: 1rem; } .emotion-19:focus-visible { @@ -3714,6 +3716,7 @@ exports[`Article Page should render a rtl article (persian) with most read corre .emotion-15 { margin: 0; padding: 0; + scroll-margin-top: 1rem; } .emotion-15:focus-visible { diff --git a/src/app/pages/LiveRadioPage/__snapshots__/index.test.tsx.snap b/src/app/pages/LiveRadioPage/__snapshots__/index.test.tsx.snap index 9ccf88b55e0..7d0209e653e 100644 --- a/src/app/pages/LiveRadioPage/__snapshots__/index.test.tsx.snap +++ b/src/app/pages/LiveRadioPage/__snapshots__/index.test.tsx.snap @@ -303,6 +303,7 @@ exports[`Radio Page Main should match snapshot for Canonical 1`] = ` .emotion-14 { margin: 0; padding: 0; + scroll-margin-top: 1rem; } .emotion-14:focus-visible {