From 11d2a8bf2465512d7ddba2725d7f261835abbd6f Mon Sep 17 00:00:00 2001 From: Tetrakern <26898880+Tetrakern@users.noreply.github.com> Date: Mon, 23 Jan 2023 16:14:04 +0100 Subject: [PATCH] Add :focus styles --- src/scss/_card.scss | 5 +++++ src/scss/_navigation.scss | 4 +++- src/scss/_pagination.scss | 1 + src/scss/_socialmedia.scss | 4 +++- src/scss/comments.scss | 19 +++++++++++++------ src/scss/common/_base.scss | 4 ++++ src/scss/common/_blocks.scss | 7 +++++++ src/scss/common/_inputs.scss | 8 ++++---- src/scss/common/_properties.scss | 8 ++++++-- src/scss/common/_setup.scss | 20 ++++++++++++++++++++ src/scss/common/_utility.scss | 1 + 11 files changed, 67 insertions(+), 14 deletions(-) diff --git a/src/scss/_card.scss b/src/scss/_card.scss index 0c1fc865..dcb9fc41 100644 --- a/src/scss/_card.scss +++ b/src/scss/_card.scss @@ -186,6 +186,7 @@ } &__image { + --focus-offset: 2px; position: relative; background: var(--placeholder-background); border-radius: var(--layout-border-radius-small); @@ -273,6 +274,10 @@ padding: 2px 4px 2px 0; border-radius: var(--layout-border-radius-small); min-width: 0; // Fix whitespace nowrap issue + + a:focus-visible { + outline: none; + } } .card__left { diff --git a/src/scss/_navigation.scss b/src/scss/_navigation.scss index 41bfd432..724ad4bb 100644 --- a/src/scss/_navigation.scss +++ b/src/scss/_navigation.scss @@ -86,6 +86,8 @@ } .main-navigation { + --focus-border-radius: 0; + --focus-offset: -2px; position: sticky; top: -1px; z-index: 1000; @@ -184,7 +186,7 @@ height: fit-content; transition: background-color .1s; - &:not(:hover) { + &:not(:hover, :focus-within) { .sub-menu { pointer-events: none; opacity: 0; diff --git a/src/scss/_pagination.scss b/src/scss/_pagination.scss index f443f16b..f3714117 100644 --- a/src/scss/_pagination.scss +++ b/src/scss/_pagination.scss @@ -5,6 +5,7 @@ gap: 3px; > * { + --focus-offset: -2px; @extend %button; background: var(--pagination-background); color: var(--pagination-text); diff --git a/src/scss/_socialmedia.scss b/src/scss/_socialmedia.scss index 0dd6093d..c99b8340 100644 --- a/src/scss/_socialmedia.scss +++ b/src/scss/_socialmedia.scss @@ -3,6 +3,7 @@ gap: 16px get_clamp(12, 16, 320, 480); > * { + --focus-offset: 1px; cursor: pointer; display: block; color: var(--media-button-color); @@ -12,7 +13,8 @@ transition: opacity var(--transition-duration), color var(--transition-duration); height: get_clamp(22, 24, 320, 480); - &:hover { + &:hover, + &:focus-visible { color: var(--media-button-color-hover); opacity: 1; } diff --git a/src/scss/comments.scss b/src/scss/comments.scss index 3571fe7b..13094fd3 100644 --- a/src/scss/comments.scss +++ b/src/scss/comments.scss @@ -425,7 +425,7 @@ border-radius: var(--layout-border-radius-small); padding: .75rem; - &:not(:hover) { + &:not(:hover, :focus-within) { .hide-unless-hover-on-desktop { @include bp(desktop) { opacity: 0; @@ -447,9 +447,10 @@ } &__author { + --focus-offset: -2px; font-size: 13px; line-height: 1.2; - padding-top: 1px; + padding-top: 2px; margin-bottom: 2px; > :is(span, a) { @@ -641,7 +642,13 @@ position: relative; display: flex; align-items: center; - gap: 12px; + gap: 8px; + margin-right: -2px; + + > * { + padding-left: 2px; + padding-right: 2px; + } @include bp(desktop) { gap: 8px; @@ -655,7 +662,7 @@ color: var(--comment-button-color); transition: opacity var(--transition-duration); - &:not(:hover) { + &:not(:hover, :focus-visible) { opacity: .2; } } @@ -690,7 +697,7 @@ color: var(--comment-button-color); transition: opacity var(--transition-duration); - &:not(:hover, .on) { + &:not(:hover, :focus-visible, .on) { opacity: .2; } @@ -704,7 +711,7 @@ color: var(--comment-button-color); transition: opacity var(--transition-duration); - &:not(:hover, .last-clicked) { + &:not(:hover, :focus-visible, .last-clicked) { opacity: .2; } diff --git a/src/scss/common/_base.scss b/src/scss/common/_base.scss index 59426dda..e33158f3 100644 --- a/src/scss/common/_base.scss +++ b/src/scss/common/_base.scss @@ -172,9 +172,11 @@ button[type=submit] { } .button { + --focus-offset: 2px; @extend %button; &._secondary { + --focus-offset: -2px; background: var(--button-secondary-background); color: var(--button-secondary-text); border: var(--button-secondary-border); @@ -272,6 +274,7 @@ button[type=submit] { cursor: pointer; &:not(._inline) { + --focus-offset: -2px; display: block; background: var(--tag-background); color: var(--tag-text); @@ -425,6 +428,7 @@ button[type=submit] { .popup-menu { --translateX: translateX(0); --translateY: translateY(0); + --focus-offset: -2px; position: absolute; background: var(--popup-menu-background); color: var(--tooltip-text); diff --git a/src/scss/common/_blocks.scss b/src/scss/common/_blocks.scss index 1f02fbfe..27b0cbb2 100644 --- a/src/scss/common/_blocks.scss +++ b/src/scss/common/_blocks.scss @@ -538,6 +538,7 @@ figure { // ============================================================================= .wp-block-file { + --focus-offset: 2px; display: flex; gap: 0 1px; flex-direction: row-reverse; @@ -548,6 +549,12 @@ figure { overflow: hidden; width: fit-content; + &:focus-within { + a:focus-visible { + outline: none; + } + } + &-wrapper { margin: 0; diff --git a/src/scss/common/_inputs.scss b/src/scss/common/_inputs.scss index 22561691..7745647c 100644 --- a/src/scss/common/_inputs.scss +++ b/src/scss/common/_inputs.scss @@ -10,13 +10,10 @@ font-family: var(--font-base); font-weight: var(--font-weight-normal); border-style: solid; - - &:focus { - outline: 0; - } } select { + --focus-offset: -2px; cursor: pointer; font-family: var(--font-base); @@ -104,6 +101,7 @@ select { } input[type=range] { + --focus-offset: -2px; cursor: pointer; padding: 5px; margin: 0; @@ -154,6 +152,7 @@ input[type=number] { input[type=checkbox], input[type=radio] { + --focus-offset: 2px; cursor: pointer; position: relative; background: var(--input-background); @@ -184,6 +183,7 @@ input[type=checkbox] { } input[type=radio] { + --focus-border-radius: 50%; border-radius: 50%; &:checked { diff --git a/src/scss/common/_properties.scss b/src/scss/common/_properties.scss index 10e1ed3a..d018c4d8 100644 --- a/src/scss/common/_properties.scss +++ b/src/scss/common/_properties.scss @@ -162,9 +162,9 @@ --code-background-inline: rgb(0 0 0 / 15%); --code-color: var(--fg-800); --warning: #f66055; - --warning-caption: white; + --warning-caption: #fff; --success: #7ebb4e; - --success-caption: white; + --success-caption: #fff; --invert-filter: invert(0); --red: #ef4d4d; --litrpg-bg: var(--fg-400); @@ -175,6 +175,10 @@ --lit-rpg-polygon: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px); --paragraph-spacing: 1.5rem; // Fallback if not defined deeper + // === FOCUS ================================================================= + --focus-background: var(--red); + --focus-outline: 2px solid var(--focus-background); + // === ELEVATIONS ============================================================ --e-body: var(--bg-1000); --e-fullscreen: var(--e-1); diff --git a/src/scss/common/_setup.scss b/src/scss/common/_setup.scss index 998988d9..50fd6498 100644 --- a/src/scss/common/_setup.scss +++ b/src/scss/common/_setup.scss @@ -9,6 +9,26 @@ html:is(:root) { -webkit-tap-highlight-color: transparent; } +:focus { + outline: none; +} + +*:not(input, textarea, .wp-block-file a):focus-visible, +input:is([type=checkbox], [type=radio], [type=range]):focus-visible, +.button:focus-visible, +.card__link-list li:focus-within { + border-radius: var(--focus-border-radius, var(--layout-border-radius-small)); + outline: var(--focus-outline); + outline-offset: var(--focus-offset, 0); +} + +// Split off for browsers without support +.wp-block-file:has(a:focus-visible) { + border-radius: var(--focus-border-radius, var(--layout-border-radius-small)); + outline: var(--focus-outline); + outline-offset: var(--focus-offset, 0); +} + body { background: { color: var(--e-body); diff --git a/src/scss/common/_utility.scss b/src/scss/common/_utility.scss index bdc20d05..ae31f546 100644 --- a/src/scss/common/_utility.scss +++ b/src/scss/common/_utility.scss @@ -70,6 +70,7 @@ body:not(.is-editor):not(.is-admin) { } .truncate { + --focus-offset: -2px; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;