From 60221f7a72c4eb456852c6fca72a6661ba5404e5 Mon Sep 17 00:00:00 2001 From: emilysaffron Date: Thu, 9 May 2024 16:46:02 +0100 Subject: [PATCH 01/12] submit button styling --- .../pages/[service]/send/[id]/Form/index.tsx | 3 +- .../__snapshots__/index.test.tsx.snap | 49 +++++++++++++++++-- .../send/[id]/SubmitButton/index.test.tsx | 2 +- .../send/[id]/SubmitButton/index.tsx | 10 +++- .../send/[id]/SubmitButton/styles.ts | 32 ++++++++++++ .../send/[id]/UGCPageLayout.test.tsx | 2 +- 6 files changed, 89 insertions(+), 9 deletions(-) create mode 100644 ws-nextjs-app/pages/[service]/send/[id]/SubmitButton/styles.ts diff --git a/ws-nextjs-app/pages/[service]/send/[id]/Form/index.tsx b/ws-nextjs-app/pages/[service]/send/[id]/Form/index.tsx index 561ef00718b..c872ea23e62 100644 --- a/ws-nextjs-app/pages/[service]/send/[id]/Form/index.tsx +++ b/ws-nextjs-app/pages/[service]/send/[id]/Form/index.tsx @@ -34,8 +34,6 @@ export default function Form({
{formFields} - {!submitted ? : } - + {!submitted ? : } {submissionError && (
diff --git a/ws-nextjs-app/pages/[service]/send/[id]/SubmitButton/__snapshots__/index.test.tsx.snap b/ws-nextjs-app/pages/[service]/send/[id]/SubmitButton/__snapshots__/index.test.tsx.snap index 33974bc97e0..cbe3098709d 100644 --- a/ws-nextjs-app/pages/[service]/send/[id]/SubmitButton/__snapshots__/index.test.tsx.snap +++ b/ws-nextjs-app/pages/[service]/send/[id]/SubmitButton/__snapshots__/index.test.tsx.snap @@ -1,8 +1,51 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`SubmitButton should render a submit button with an associated label 1`] = ` - +> + Submit + `; diff --git a/ws-nextjs-app/pages/[service]/send/[id]/SubmitButton/index.test.tsx b/ws-nextjs-app/pages/[service]/send/[id]/SubmitButton/index.test.tsx index e23af0782bd..0005cbb630c 100644 --- a/ws-nextjs-app/pages/[service]/send/[id]/SubmitButton/index.test.tsx +++ b/ws-nextjs-app/pages/[service]/send/[id]/SubmitButton/index.test.tsx @@ -12,7 +12,7 @@ describe('SubmitButton', () => { return render(, { service: 'news' }); }); - const button = container.querySelector('input[type=submit][value=Submit]'); + const button = container.querySelector('button[type=submit]'); expect(button).toBeInTheDocument(); expect(button).toMatchSnapshot(); diff --git a/ws-nextjs-app/pages/[service]/send/[id]/SubmitButton/index.tsx b/ws-nextjs-app/pages/[service]/send/[id]/SubmitButton/index.tsx index 8f6cb40ae99..2155a183436 100644 --- a/ws-nextjs-app/pages/[service]/send/[id]/SubmitButton/index.tsx +++ b/ws-nextjs-app/pages/[service]/send/[id]/SubmitButton/index.tsx @@ -1,8 +1,14 @@ -import React from 'react'; +/** @jsx jsx */ +import { jsx } from '@emotion/react'; +import styles from './styles'; const Submit = () => { const translation = 'Submit'; - return ; + return ( + + ); }; export default Submit; diff --git a/ws-nextjs-app/pages/[service]/send/[id]/SubmitButton/styles.ts b/ws-nextjs-app/pages/[service]/send/[id]/SubmitButton/styles.ts new file mode 100644 index 00000000000..ced7c324209 --- /dev/null +++ b/ws-nextjs-app/pages/[service]/send/[id]/SubmitButton/styles.ts @@ -0,0 +1,32 @@ +import { Theme, css } from '@emotion/react'; +import { focusIndicatorThickness } from '#app/components/ThemeProvider/focusIndicator'; + +export default { + submit: ({ palette, fontSizes, fontVariants, spacings, mq }: Theme) => + css({ + backgroundColor: palette.SERVICE_NEUTRAL_CORE, + color: palette.WHITE, + width: '-webkit-fill-available', + ...fontVariants.sansRegular, + ...fontSizes.bodyCopy, + border: 'none', + padding: `${spacings.FULL + spacings.HALF}rem 0`, + marginBottom: `${spacings.DOUBLE}rem`, + cursor: 'pointer', + [mq.GROUP_1_MIN_WIDTH]: { + marginBottom: `${spacings.TRIPLE}rem`, + }, + [mq.GROUP_3_MIN_WIDTH]: { + marginTop: `${spacings.FULL}rem`, + marginBottom: `${spacings.TRIPLE}rem`, + }, + }), + focusIndicator: ({ palette }: Theme) => + css({ + '&:focus': { + outline: `${focusIndicatorThickness} solid ${palette.WHITE}`, + boxShadow: `0 0 0 ${focusIndicatorThickness} ${palette.BLACK}`, + outlineOffset: `${focusIndicatorThickness}`, + }, + }), +}; diff --git a/ws-nextjs-app/pages/[service]/send/[id]/UGCPageLayout.test.tsx b/ws-nextjs-app/pages/[service]/send/[id]/UGCPageLayout.test.tsx index 89560b31a88..edacdab454c 100644 --- a/ws-nextjs-app/pages/[service]/send/[id]/UGCPageLayout.test.tsx +++ b/ws-nextjs-app/pages/[service]/send/[id]/UGCPageLayout.test.tsx @@ -45,7 +45,7 @@ describe('UGC Page Layout', () => { }); it('Renders a submit button within the form', () => { - const submitButton = container.querySelector('form input[type=submit]'); + const submitButton = container.querySelector('button[type=submit]'); expect(submitButton).toBeInTheDocument(); }); }); From 68cac931c3c7c6ddfff7976fc44fe99aa331aec9 Mon Sep 17 00:00:00 2001 From: emilysaffron Date: Thu, 9 May 2024 16:48:07 +0100 Subject: [PATCH 02/12] missed changes from last commit woops --- src/app/components/ThemeProvider/palette.ts | 1 + src/app/components/ThemeProvider/withThemeProvider.tsx | 2 ++ src/app/models/types/theming.ts | 1 + 3 files changed, 4 insertions(+) diff --git a/src/app/components/ThemeProvider/palette.ts b/src/app/components/ThemeProvider/palette.ts index 075a9934568..f2f22397e90 100644 --- a/src/app/components/ThemeProvider/palette.ts +++ b/src/app/components/ThemeProvider/palette.ts @@ -40,6 +40,7 @@ export const PHILIPPINE_GREY = '#8A8C8E'; export const POSTBOX = '#B80000'; export const POSTBOX_30 = '#EAB3B3'; export const RHINO = '#5A5A5A'; +export const SERVICE_NEUTRAL_CORE = '#0071F1'; export const SHADOW = '#3F3F42'; export const SPORT_MIST = '#F7F7F5'; export const SPORT_SILVER = '#DBDBDB'; diff --git a/src/app/components/ThemeProvider/withThemeProvider.tsx b/src/app/components/ThemeProvider/withThemeProvider.tsx index 6c960db9567..89f3e0e2f60 100644 --- a/src/app/components/ThemeProvider/withThemeProvider.tsx +++ b/src/app/components/ThemeProvider/withThemeProvider.tsx @@ -50,6 +50,7 @@ import { POSTBOX, POSTBOX_30, RHINO, + SERVICE_NEUTRAL_CORE, SHADOW, SPORT_MIST, SPORT_SILVER, @@ -254,6 +255,7 @@ const withThemeProvider = ({ POSTBOX, POSTBOX_30, RHINO, + SERVICE_NEUTRAL_CORE, SHADOW, SPORT_MIST, SPORT_SILVER, diff --git a/src/app/models/types/theming.ts b/src/app/models/types/theming.ts index b22a85174b2..9eb5da52a6d 100644 --- a/src/app/models/types/theming.ts +++ b/src/app/models/types/theming.ts @@ -49,6 +49,7 @@ interface Palette extends BrandPalette { POSTBOX: string; POSTBOX_30: string; RHINO: string; + SERVICE_NEUTRAL_CORE: string; SHADOW: string; SPORT_MIST: string; SPORT_SILVER: string; From 112dce89f235bebeebacc564cc1b0dff31a117e8 Mon Sep 17 00:00:00 2001 From: emilysaffron Date: Thu, 9 May 2024 16:53:26 +0100 Subject: [PATCH 03/12] a11y hover and focus --- .../pages/[service]/send/[id]/SubmitButton/styles.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/ws-nextjs-app/pages/[service]/send/[id]/SubmitButton/styles.ts b/ws-nextjs-app/pages/[service]/send/[id]/SubmitButton/styles.ts index ced7c324209..02f101de16d 100644 --- a/ws-nextjs-app/pages/[service]/send/[id]/SubmitButton/styles.ts +++ b/ws-nextjs-app/pages/[service]/send/[id]/SubmitButton/styles.ts @@ -13,6 +13,9 @@ export default { padding: `${spacings.FULL + spacings.HALF}rem 0`, marginBottom: `${spacings.DOUBLE}rem`, cursor: 'pointer', + '&:hover': { + textDecoration: 'underline', + }, [mq.GROUP_1_MIN_WIDTH]: { marginBottom: `${spacings.TRIPLE}rem`, }, @@ -27,6 +30,7 @@ export default { outline: `${focusIndicatorThickness} solid ${palette.WHITE}`, boxShadow: `0 0 0 ${focusIndicatorThickness} ${palette.BLACK}`, outlineOffset: `${focusIndicatorThickness}`, + textDecoration: 'underline', }, }), }; From 46cc177b7bfae5cb31116b22af1bc8de9c42c3b1 Mon Sep 17 00:00:00 2001 From: emilysaffron Date: Mon, 13 May 2024 09:11:14 +0100 Subject: [PATCH 04/12] interaction states --- docs/User-Experience/colours.tsx | 2 +- src/app/components/ThemeProvider/palette.ts | 1 + .../ThemeProvider/withThemeProvider.tsx | 2 ++ src/app/models/types/theming.ts | 1 + .../__snapshots__/index.test.tsx.snap | 15 ++++++++++++--- .../[service]/send/[id]/SubmitButton/styles.ts | 8 +++++--- 6 files changed, 22 insertions(+), 7 deletions(-) diff --git a/docs/User-Experience/colours.tsx b/docs/User-Experience/colours.tsx index 6b8d176de27..03338a999bb 100644 --- a/docs/User-Experience/colours.tsx +++ b/docs/User-Experience/colours.tsx @@ -52,7 +52,7 @@ export const LEGACY = [ export const CROSS_PLATFORM = [ { colorName: 'SERVICE_NEUTRAL_CORE', colorCode: '#0071F1' }, { colorName: 'SERVICE_NEUTRAL_LIGHT', colorCode: '#3092FF' }, - { colorName: 'SERVICE_NEUTRAL_DARK', colorCode: '#0064E6' }, + { colorName: 'SERVICE_NEUTRAL_DARK', colorCode: '#0051AD' }, { colorName: 'LIVE_CORE', colorCode: '#009E9E' }, { colorName: 'LIVE_LIGHT', colorCode: '#00CCC7' }, { colorName: 'LIVE_DARK', colorCode: '#006666' }, diff --git a/src/app/components/ThemeProvider/palette.ts b/src/app/components/ThemeProvider/palette.ts index f2f22397e90..c6afacb2cad 100644 --- a/src/app/components/ThemeProvider/palette.ts +++ b/src/app/components/ThemeProvider/palette.ts @@ -41,6 +41,7 @@ export const POSTBOX = '#B80000'; export const POSTBOX_30 = '#EAB3B3'; export const RHINO = '#5A5A5A'; export const SERVICE_NEUTRAL_CORE = '#0071F1'; +export const SERVICE_NEUTRAL_DARK = '#0051AD'; export const SHADOW = '#3F3F42'; export const SPORT_MIST = '#F7F7F5'; export const SPORT_SILVER = '#DBDBDB'; diff --git a/src/app/components/ThemeProvider/withThemeProvider.tsx b/src/app/components/ThemeProvider/withThemeProvider.tsx index 89f3e0e2f60..24b44d2cef3 100644 --- a/src/app/components/ThemeProvider/withThemeProvider.tsx +++ b/src/app/components/ThemeProvider/withThemeProvider.tsx @@ -51,6 +51,7 @@ import { POSTBOX_30, RHINO, SERVICE_NEUTRAL_CORE, + SERVICE_NEUTRAL_DARK, SHADOW, SPORT_MIST, SPORT_SILVER, @@ -256,6 +257,7 @@ const withThemeProvider = ({ POSTBOX_30, RHINO, SERVICE_NEUTRAL_CORE, + SERVICE_NEUTRAL_DARK, SHADOW, SPORT_MIST, SPORT_SILVER, diff --git a/src/app/models/types/theming.ts b/src/app/models/types/theming.ts index 9eb5da52a6d..4f74b305f69 100644 --- a/src/app/models/types/theming.ts +++ b/src/app/models/types/theming.ts @@ -50,6 +50,7 @@ interface Palette extends BrandPalette { POSTBOX_30: string; RHINO: string; SERVICE_NEUTRAL_CORE: string; + SERVICE_NEUTRAL_DARK: string; SHADOW: string; SPORT_MIST: string; SPORT_SILVER: string; diff --git a/ws-nextjs-app/pages/[service]/send/[id]/SubmitButton/__snapshots__/index.test.tsx.snap b/ws-nextjs-app/pages/[service]/send/[id]/SubmitButton/__snapshots__/index.test.tsx.snap index cbe3098709d..83cc76f1aaa 100644 --- a/ws-nextjs-app/pages/[service]/send/[id]/SubmitButton/__snapshots__/index.test.tsx.snap +++ b/ws-nextjs-app/pages/[service]/send/[id]/SubmitButton/__snapshots__/index.test.tsx.snap @@ -4,7 +4,7 @@ exports[`SubmitButton should render a submit button with an associated label 1`] .emotion-0 { background-color: #0071F1; color: #FFFFFF; - width: -webkit-fill-available; + width: 100%; font-family: ReithSans,Helvetica,Arial,sans-serif; font-style: normal; font-weight: 400; @@ -30,6 +30,12 @@ exports[`SubmitButton should render a submit button with an associated label 1`] } } +.emotion-0:hover { + -webkit-text-decoration: underline; + text-decoration: underline; + background-color: #0051AD; +} + @media (min-width: 15rem) { .emotion-0 { margin-bottom: 1.5rem; @@ -37,9 +43,12 @@ exports[`SubmitButton should render a submit button with an associated label 1`] } .emotion-0:focus { - outline: 0.1875rem solid #FFFFFF; - box-shadow: 0 0 0 0.1875rem #000000; + outline: 0.1875rem solid #000000; + box-shadow: 0 0 0 0.1875rem #FFFFFF; outline-offset: 0.1875rem; + -webkit-text-decoration: underline; + text-decoration: underline; + background-color: #0051AD; } ); diff --git a/ws-nextjs-app/pages/[service]/send/[id]/SubmitButton/styles.ts b/ws-nextjs-app/pages/[service]/send/[id]/SubmitButton/styles.ts index 6bde9d5ff48..a911db389ad 100644 --- a/ws-nextjs-app/pages/[service]/send/[id]/SubmitButton/styles.ts +++ b/ws-nextjs-app/pages/[service]/send/[id]/SubmitButton/styles.ts @@ -1,5 +1,4 @@ import { Theme, css } from '@emotion/react'; -import { focusIndicatorThickness } from '#app/components/ThemeProvider/focusIndicator'; export default { submit: ({ palette, fontSizes, fontVariants, spacings, mq }: Theme) => @@ -25,14 +24,4 @@ export default { marginBottom: `${spacings.TRIPLE}rem`, }, }), - focusIndicator: ({ palette }: Theme) => - css({ - '&:focus': { - outline: `${focusIndicatorThickness} solid ${palette.BLACK}`, - boxShadow: `0 0 0 ${focusIndicatorThickness} ${palette.WHITE}`, - outlineOffset: `${focusIndicatorThickness}`, - textDecoration: 'underline', - backgroundColor: palette.SERVICE_NEUTRAL_DARK, - }, - }), }; From 6703eef40a82147bf273ffae2dfbc023081b5a87 Mon Sep 17 00:00:00 2001 From: emilysaffron Date: Mon, 13 May 2024 09:30:40 +0100 Subject: [PATCH 06/12] focus colour --- .../[id]/SubmitButton/__snapshots__/index.test.tsx.snap | 6 ++++++ .../pages/[service]/send/[id]/SubmitButton/styles.ts | 4 ++++ 2 files changed, 10 insertions(+) diff --git a/ws-nextjs-app/pages/[service]/send/[id]/SubmitButton/__snapshots__/index.test.tsx.snap b/ws-nextjs-app/pages/[service]/send/[id]/SubmitButton/__snapshots__/index.test.tsx.snap index 0c9a35412c9..42e99b6b0ff 100644 --- a/ws-nextjs-app/pages/[service]/send/[id]/SubmitButton/__snapshots__/index.test.tsx.snap +++ b/ws-nextjs-app/pages/[service]/send/[id]/SubmitButton/__snapshots__/index.test.tsx.snap @@ -36,6 +36,12 @@ exports[`SubmitButton should render a submit button with an associated label 1`] background-color: #0051AD; } +.emotion-0:focus { + -webkit-text-decoration: underline; + text-decoration: underline; + background-color: #0051AD; +} + @media (min-width: 15rem) { .emotion-0 { margin-bottom: 1.5rem; diff --git a/ws-nextjs-app/pages/[service]/send/[id]/SubmitButton/styles.ts b/ws-nextjs-app/pages/[service]/send/[id]/SubmitButton/styles.ts index a911db389ad..b264eb8faf2 100644 --- a/ws-nextjs-app/pages/[service]/send/[id]/SubmitButton/styles.ts +++ b/ws-nextjs-app/pages/[service]/send/[id]/SubmitButton/styles.ts @@ -16,6 +16,10 @@ export default { textDecoration: 'underline', backgroundColor: palette.SERVICE_NEUTRAL_DARK, }, + '&:focus': { + textDecoration: 'underline', + backgroundColor: palette.SERVICE_NEUTRAL_DARK, + }, [mq.GROUP_1_MIN_WIDTH]: { marginBottom: `${spacings.TRIPLE}rem`, }, From 28e96ce830cb9e392fa7117cb0eca1f1aac029cd Mon Sep 17 00:00:00 2001 From: emilysaffron Date: Mon, 13 May 2024 09:33:26 +0100 Subject: [PATCH 07/12] bold font --- .../send/[id]/SubmitButton/__snapshots__/index.test.tsx.snap | 2 +- ws-nextjs-app/pages/[service]/send/[id]/SubmitButton/styles.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/ws-nextjs-app/pages/[service]/send/[id]/SubmitButton/__snapshots__/index.test.tsx.snap b/ws-nextjs-app/pages/[service]/send/[id]/SubmitButton/__snapshots__/index.test.tsx.snap index 42e99b6b0ff..0c60a5d2734 100644 --- a/ws-nextjs-app/pages/[service]/send/[id]/SubmitButton/__snapshots__/index.test.tsx.snap +++ b/ws-nextjs-app/pages/[service]/send/[id]/SubmitButton/__snapshots__/index.test.tsx.snap @@ -7,7 +7,7 @@ exports[`SubmitButton should render a submit button with an associated label 1`] width: 100%; font-family: ReithSans,Helvetica,Arial,sans-serif; font-style: normal; - font-weight: 400; + font-weight: 700; font-size: 0.9375rem; line-height: 1.25rem; border: none; diff --git a/ws-nextjs-app/pages/[service]/send/[id]/SubmitButton/styles.ts b/ws-nextjs-app/pages/[service]/send/[id]/SubmitButton/styles.ts index b264eb8faf2..9a5fff76704 100644 --- a/ws-nextjs-app/pages/[service]/send/[id]/SubmitButton/styles.ts +++ b/ws-nextjs-app/pages/[service]/send/[id]/SubmitButton/styles.ts @@ -6,7 +6,7 @@ export default { backgroundColor: palette.SERVICE_NEUTRAL_CORE, color: palette.WHITE, width: '100%', - ...fontVariants.sansRegular, + ...fontVariants.sansBold, ...fontSizes.bodyCopy, border: 'none', padding: `${spacings.FULL + spacings.HALF}rem 0`, From f089e3afd4166054b890be2df5834ed08abb2a6f Mon Sep 17 00:00:00 2001 From: emilysaffron Date: Mon, 13 May 2024 10:23:28 +0100 Subject: [PATCH 08/12] manually do focus styling --- .../[id]/SubmitButton/__snapshots__/index.test.tsx.snap | 5 ++++- .../pages/[service]/send/[id]/SubmitButton/styles.ts | 6 +++++- 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/ws-nextjs-app/pages/[service]/send/[id]/SubmitButton/__snapshots__/index.test.tsx.snap b/ws-nextjs-app/pages/[service]/send/[id]/SubmitButton/__snapshots__/index.test.tsx.snap index 0c60a5d2734..73cad9e57a9 100644 --- a/ws-nextjs-app/pages/[service]/send/[id]/SubmitButton/__snapshots__/index.test.tsx.snap +++ b/ws-nextjs-app/pages/[service]/send/[id]/SubmitButton/__snapshots__/index.test.tsx.snap @@ -36,10 +36,13 @@ exports[`SubmitButton should render a submit button with an associated label 1`] background-color: #0051AD; } -.emotion-0:focus { +.emotion-0:focus-visible { -webkit-text-decoration: underline; text-decoration: underline; background-color: #0051AD; + outline: 0.1875rem solid #000000; + box-shadow: 0 0 0 0.1875rem #FFFFFF; + outline-offset: 0.1875rem; } @media (min-width: 15rem) { diff --git a/ws-nextjs-app/pages/[service]/send/[id]/SubmitButton/styles.ts b/ws-nextjs-app/pages/[service]/send/[id]/SubmitButton/styles.ts index 9a5fff76704..77b69c06c66 100644 --- a/ws-nextjs-app/pages/[service]/send/[id]/SubmitButton/styles.ts +++ b/ws-nextjs-app/pages/[service]/send/[id]/SubmitButton/styles.ts @@ -1,3 +1,4 @@ +import { focusIndicatorThickness } from '#app/components/ThemeProvider/focusIndicator'; import { Theme, css } from '@emotion/react'; export default { @@ -16,9 +17,12 @@ export default { textDecoration: 'underline', backgroundColor: palette.SERVICE_NEUTRAL_DARK, }, - '&:focus': { + '&:focus-visible': { textDecoration: 'underline', backgroundColor: palette.SERVICE_NEUTRAL_DARK, + outline: ` ${focusIndicatorThickness} solid ${palette.BLACK}`, + boxShadow: ` 0 0 0 ${focusIndicatorThickness} ${palette.WHITE}`, + outlineOffset: ` ${focusIndicatorThickness}`, }, [mq.GROUP_1_MIN_WIDTH]: { marginBottom: `${spacings.TRIPLE}rem`, From 8d9f307c2972d5ff1a45a9b08d40e6f24d432076 Mon Sep 17 00:00:00 2001 From: emilysaffron Date: Mon, 13 May 2024 11:12:45 +0100 Subject: [PATCH 09/12] focus for submit --- src/app/components/ThemeProvider/focusIndicator.ts | 3 ++- .../send/[id]/SubmitButton/__snapshots__/index.test.tsx.snap | 3 --- .../pages/[service]/send/[id]/SubmitButton/styles.ts | 4 ---- 3 files changed, 2 insertions(+), 8 deletions(-) diff --git a/src/app/components/ThemeProvider/focusIndicator.ts b/src/app/components/ThemeProvider/focusIndicator.ts index 2eb64ba0b97..fed51fb07cd 100644 --- a/src/app/components/ThemeProvider/focusIndicator.ts +++ b/src/app/components/ThemeProvider/focusIndicator.ts @@ -6,7 +6,8 @@ export const focusIndicatorThickness = `${pixelsToRem(3)}rem`; // 3px const focusIndicator = ({ palette }: Theme) => css` // Adds focus indicator styling to all a and button elements by default. a:focus-visible, - button:focus-visible { + button:focus-visible, + button[type='submit']:focus-visible { outline: ${focusIndicatorThickness} solid ${palette.BLACK}; box-shadow: 0 0 0 ${focusIndicatorThickness} ${palette.WHITE}; outline-offset: ${focusIndicatorThickness}; diff --git a/ws-nextjs-app/pages/[service]/send/[id]/SubmitButton/__snapshots__/index.test.tsx.snap b/ws-nextjs-app/pages/[service]/send/[id]/SubmitButton/__snapshots__/index.test.tsx.snap index 73cad9e57a9..b2eb627e5a4 100644 --- a/ws-nextjs-app/pages/[service]/send/[id]/SubmitButton/__snapshots__/index.test.tsx.snap +++ b/ws-nextjs-app/pages/[service]/send/[id]/SubmitButton/__snapshots__/index.test.tsx.snap @@ -40,9 +40,6 @@ exports[`SubmitButton should render a submit button with an associated label 1`] -webkit-text-decoration: underline; text-decoration: underline; background-color: #0051AD; - outline: 0.1875rem solid #000000; - box-shadow: 0 0 0 0.1875rem #FFFFFF; - outline-offset: 0.1875rem; } @media (min-width: 15rem) { diff --git a/ws-nextjs-app/pages/[service]/send/[id]/SubmitButton/styles.ts b/ws-nextjs-app/pages/[service]/send/[id]/SubmitButton/styles.ts index 77b69c06c66..f0ca9c12211 100644 --- a/ws-nextjs-app/pages/[service]/send/[id]/SubmitButton/styles.ts +++ b/ws-nextjs-app/pages/[service]/send/[id]/SubmitButton/styles.ts @@ -1,4 +1,3 @@ -import { focusIndicatorThickness } from '#app/components/ThemeProvider/focusIndicator'; import { Theme, css } from '@emotion/react'; export default { @@ -20,9 +19,6 @@ export default { '&:focus-visible': { textDecoration: 'underline', backgroundColor: palette.SERVICE_NEUTRAL_DARK, - outline: ` ${focusIndicatorThickness} solid ${palette.BLACK}`, - boxShadow: ` 0 0 0 ${focusIndicatorThickness} ${palette.WHITE}`, - outlineOffset: ` ${focusIndicatorThickness}`, }, [mq.GROUP_1_MIN_WIDTH]: { marginBottom: `${spacings.TRIPLE}rem`, From 0f698d38ff977d41e1f7b1e0d89b56297cefb3f3 Mon Sep 17 00:00:00 2001 From: emilysaffron Date: Mon, 13 May 2024 11:15:26 +0100 Subject: [PATCH 10/12] merge hover and focus --- .../[id]/SubmitButton/__snapshots__/index.test.tsx.snap | 7 +------ .../pages/[service]/send/[id]/SubmitButton/styles.ts | 6 +----- 2 files changed, 2 insertions(+), 11 deletions(-) diff --git a/ws-nextjs-app/pages/[service]/send/[id]/SubmitButton/__snapshots__/index.test.tsx.snap b/ws-nextjs-app/pages/[service]/send/[id]/SubmitButton/__snapshots__/index.test.tsx.snap index b2eb627e5a4..50e6377be40 100644 --- a/ws-nextjs-app/pages/[service]/send/[id]/SubmitButton/__snapshots__/index.test.tsx.snap +++ b/ws-nextjs-app/pages/[service]/send/[id]/SubmitButton/__snapshots__/index.test.tsx.snap @@ -30,12 +30,7 @@ exports[`SubmitButton should render a submit button with an associated label 1`] } } -.emotion-0:hover { - -webkit-text-decoration: underline; - text-decoration: underline; - background-color: #0051AD; -} - +.emotion-0:hover, .emotion-0:focus-visible { -webkit-text-decoration: underline; text-decoration: underline; diff --git a/ws-nextjs-app/pages/[service]/send/[id]/SubmitButton/styles.ts b/ws-nextjs-app/pages/[service]/send/[id]/SubmitButton/styles.ts index f0ca9c12211..b3792f01523 100644 --- a/ws-nextjs-app/pages/[service]/send/[id]/SubmitButton/styles.ts +++ b/ws-nextjs-app/pages/[service]/send/[id]/SubmitButton/styles.ts @@ -12,11 +12,7 @@ export default { padding: `${spacings.FULL + spacings.HALF}rem 0`, marginBottom: `${spacings.DOUBLE}rem`, cursor: 'pointer', - '&:hover': { - textDecoration: 'underline', - backgroundColor: palette.SERVICE_NEUTRAL_DARK, - }, - '&:focus-visible': { + '&:hover,&:focus-visible': { textDecoration: 'underline', backgroundColor: palette.SERVICE_NEUTRAL_DARK, }, From 42c4a2566b8e9b7be85e7e011e322c4e67b8f858 Mon Sep 17 00:00:00 2001 From: emilysaffron Date: Mon, 13 May 2024 11:34:23 +0100 Subject: [PATCH 11/12] privacy notice font size --- ws-nextjs-app/pages/[service]/send/[id]/Form/styles.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/ws-nextjs-app/pages/[service]/send/[id]/Form/styles.ts b/ws-nextjs-app/pages/[service]/send/[id]/Form/styles.ts index 8bfd33cbc79..552fe37aa5c 100644 --- a/ws-nextjs-app/pages/[service]/send/[id]/Form/styles.ts +++ b/ws-nextjs-app/pages/[service]/send/[id]/Form/styles.ts @@ -13,11 +13,11 @@ export default { privacyNotice: ({ fontVariants, fontSizes }: Theme) => css({ ...fontVariants.sansRegular, - ...fontSizes.bodyCopy, + ...fontSizes.brevier, }), privacyHeading: ({ fontVariants, fontSizes }: Theme) => css({ ...fontVariants.sansBold, - ...fontSizes.bodyCopy, + ...fontSizes.brevier, }), }; From 01b0aadf359790f7309eeff293a1d363922eed0d Mon Sep 17 00:00:00 2001 From: emilysaffron Date: Mon, 13 May 2024 11:59:51 +0100 Subject: [PATCH 12/12] use focus over focus-visible --- .../send/[id]/SubmitButton/__snapshots__/index.test.tsx.snap | 2 +- ws-nextjs-app/pages/[service]/send/[id]/SubmitButton/styles.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/ws-nextjs-app/pages/[service]/send/[id]/SubmitButton/__snapshots__/index.test.tsx.snap b/ws-nextjs-app/pages/[service]/send/[id]/SubmitButton/__snapshots__/index.test.tsx.snap index 50e6377be40..d635529a09f 100644 --- a/ws-nextjs-app/pages/[service]/send/[id]/SubmitButton/__snapshots__/index.test.tsx.snap +++ b/ws-nextjs-app/pages/[service]/send/[id]/SubmitButton/__snapshots__/index.test.tsx.snap @@ -31,7 +31,7 @@ exports[`SubmitButton should render a submit button with an associated label 1`] } .emotion-0:hover, -.emotion-0:focus-visible { +.emotion-0:focus { -webkit-text-decoration: underline; text-decoration: underline; background-color: #0051AD; diff --git a/ws-nextjs-app/pages/[service]/send/[id]/SubmitButton/styles.ts b/ws-nextjs-app/pages/[service]/send/[id]/SubmitButton/styles.ts index b3792f01523..58ff20e3d75 100644 --- a/ws-nextjs-app/pages/[service]/send/[id]/SubmitButton/styles.ts +++ b/ws-nextjs-app/pages/[service]/send/[id]/SubmitButton/styles.ts @@ -12,7 +12,7 @@ export default { padding: `${spacings.FULL + spacings.HALF}rem 0`, marginBottom: `${spacings.DOUBLE}rem`, cursor: 'pointer', - '&:hover,&:focus-visible': { + '&:hover,&:focus': { textDecoration: 'underline', backgroundColor: palette.SERVICE_NEUTRAL_DARK, },