Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add focus-indicator to SubHeadline component #12162

Merged
merged 1 commit into from
Nov 12, 2024
Merged

Add focus-indicator to SubHeadline component #12162

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 16 additions & 6 deletions src/app/legacy/containers/Headings/__snapshots__/index.test.jsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand All @@ -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"
Expand Down Expand Up @@ -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) {
Expand All @@ -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"
Expand Down
44 changes: 32 additions & 12 deletions src/app/legacy/psammead/psammead-headings/src/__snapshots__/index.test.jsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand All @@ -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"
Expand All @@ -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) {
Expand All @@ -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"
Expand All @@ -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) {
Expand All @@ -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"
Expand All @@ -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) {
Expand All @@ -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"
Expand Down
14 changes: 11 additions & 3 deletions src/app/legacy/psammead/psammead-headings/src/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)};
Expand All @@ -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};
}
`;

Expand Down
11 changes: 8 additions & 3 deletions src/app/pages/MediaArticlePage/__snapshots__/index.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand All @@ -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;
Expand Down
Loading