diff --git a/tbx/project_styleguide/templates/patterns/pages/home/home_page.yaml b/tbx/project_styleguide/templates/patterns/pages/home/home_page.yaml index f772d6df2..498becb24 100644 --- a/tbx/project_styleguide/templates/patterns/pages/home/home_page.yaml +++ b/tbx/project_styleguide/templates/patterns/pages/home/home_page.yaml @@ -1,5 +1,5 @@ context: - hero_introduction: '
Innovative and strategic digital experiences, powerful tech platforms, and targeted digital marketing to catalyse impact for the world's leading charities and public sector organisations.
' + hero_introduction: 'Innovative and strategic digital experiences, powerful tech platforms, and targeted digital marketing to catalyse impact for the world's leading charities and public sector organisations.
' page: get_verbose_name: home-page partner_logos: diff --git a/tbx/static_src/sass/components/_button-link.scss b/tbx/static_src/sass/components/_button-link.scss index d90a0a45d..db268abb2 100644 --- a/tbx/static_src/sass/components/_button-link.scss +++ b/tbx/static_src/sass/components/_button-link.scss @@ -26,6 +26,7 @@ transition: none; } + &:focus, &:hover { color: var(--color--button-link-interaction); background-color: var(--color--link-interaction); @@ -37,14 +38,26 @@ &--theme-coral { background-color: $color--coral; + + &:focus { + @include focus-style($outline-color: var(--color--coral)); + } } &--theme-nebuline { background-color: $color--nebuline; + + &:focus { + @include focus-style($outline-color: var(--color--nebuline)); + } } &--theme-lagoon { background-color: $color--lagoon; + + &:focus { + @include focus-style($outline-color: var(--color--lagoon)); + } } &__arrow { diff --git a/tbx/static_src/sass/components/_call-to-action.scss b/tbx/static_src/sass/components/_call-to-action.scss index 89582f436..7533139d6 100644 --- a/tbx/static_src/sass/components/_call-to-action.scss +++ b/tbx/static_src/sass/components/_call-to-action.scss @@ -29,5 +29,9 @@ @include media-query(large) { margin-top: 0; } + + &:focus { + @include focus-style($outline-color: var(--color--background)); + } } } diff --git a/tbx/static_src/sass/components/_contact-cta.scss b/tbx/static_src/sass/components/_contact-cta.scss index 1939eddfa..3e5d7c1bf 100644 --- a/tbx/static_src/sass/components/_contact-cta.scss +++ b/tbx/static_src/sass/components/_contact-cta.scss @@ -54,5 +54,9 @@ margin-left: auto; margin-right: $spacer-medium; } + + &:focus { + @include focus-style($outline-color: var(--color--background)); + } } } diff --git a/tbx/static_src/sass/components/_home-page-intro.scss b/tbx/static_src/sass/components/_home-page-intro.scss index 1ad264a53..d7e8b6d6a 100644 --- a/tbx/static_src/sass/components/_home-page-intro.scss +++ b/tbx/static_src/sass/components/_home-page-intro.scss @@ -12,6 +12,10 @@ $underline-hover-color: var(--color--heading) ); font-weight: $weight--semibold; + + &:focus { + @include focus-style(); + } } .text-coral { @@ -23,6 +27,13 @@ $underline-hover-color: var(--color--coral) ); } + + &:focus { + @include focus-style( + $color: var(--color--coral), + $outline-color: var(--color--coral) + ); + } } .text-nebuline { @@ -34,5 +45,12 @@ $underline-hover-color: var(--color--nebuline) ); } + + &:focus { + @include focus-style( + $color: var(--color--nebuline), + $outline-color: var(--color--nebuline) + ); + } } } diff --git a/tbx/static_src/sass/components/_tabs.scss b/tbx/static_src/sass/components/_tabs.scss index c4ade2bfd..2776f59ef 100644 --- a/tbx/static_src/sass/components/_tabs.scss +++ b/tbx/static_src/sass/components/_tabs.scss @@ -29,7 +29,9 @@ margin-bottom: $spacer-small; &:focus { - outline: $focus-width solid var(--color--theme-primary-muted); + @include focus-style( + $outline-color: var(--color--theme-primary-muted) + ); } &--active { diff --git a/tbx/static_src/sass/components/navigation/_primary-nav-mobile.scss b/tbx/static_src/sass/components/navigation/_primary-nav-mobile.scss index 64e94918e..aa28d0e9a 100644 --- a/tbx/static_src/sass/components/navigation/_primary-nav-mobile.scss +++ b/tbx/static_src/sass/components/navigation/_primary-nav-mobile.scss @@ -48,7 +48,8 @@ Styles for the primary navigation at mobile (top level) ); @include high-contrast-text-decoration(); display: flex; - padding: 10px $spacer-small; + margin: 10px $spacer-small; + width: fit-content; &:focus { @include focus-style(); diff --git a/tbx/static_src/sass/config/_mixins.scss b/tbx/static_src/sass/config/_mixins.scss index 225c0352a..3daf52058 100755 --- a/tbx/static_src/sass/config/_mixins.scss +++ b/tbx/static_src/sass/config/_mixins.scss @@ -123,9 +123,10 @@ $color: var(--color--link), $shadow: false, $underline-hover-color: $color, - $keyboard-only: false + $keyboard-only: false, + $outline-color: var(--color--theme-primary) ) { - outline: $focus-width solid var(--color--theme-primary); + outline: $focus-width solid $outline-color; text-decoration-thickness: $link-underline-thickness-interaction; text-decoration-color: $underline-hover-color;