From cfd50f30bb5dda4dd90e1ad01f3e62c99135c36f Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Sun, 23 Jul 2023 17:55:13 +0200 Subject: [PATCH] Fix focus and hover styles in web UI (#26125) --- .../intersection_observer_article.jsx | 4 +- .../styles/mastodon/components.scss | 74 ++++++++++--------- 2 files changed, 42 insertions(+), 36 deletions(-) diff --git a/app/javascript/mastodon/components/intersection_observer_article.jsx b/app/javascript/mastodon/components/intersection_observer_article.jsx index 7b03ffb88e..8efa969f9b 100644 --- a/app/javascript/mastodon/components/intersection_observer_article.jsx +++ b/app/javascript/mastodon/components/intersection_observer_article.jsx @@ -114,7 +114,7 @@ export default class IntersectionObserverArticle extends Component { aria-setsize={listLength} style={{ height: `${this.height || cachedHeight}px`, opacity: 0, overflow: 'hidden' }} data-id={id} - tabIndex={0} + tabIndex={-1} > {children && cloneElement(children, { hidden: true })} @@ -122,7 +122,7 @@ export default class IntersectionObserverArticle extends Component { } return ( -
+
{children && cloneElement(children, { hidden: false })}
); diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index d08cb28038..bb0febaaef 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -74,7 +74,7 @@ background-color: $ui-button-focus-background-color; } - &:focus { + &:focus-visible { outline: $ui-button-icon-focus-outline; } @@ -191,8 +191,6 @@ border-radius: 4px; background: transparent; cursor: pointer; - transition: all 100ms ease-out; - transition-property: background-color, color; text-decoration: none; a { @@ -203,11 +201,11 @@ &:hover, &:active, &:focus { - color: lighten($action-button-color, 20%); - background-color: $ui-button-icon-hover-background-color; + color: lighten($action-button-color, 7%); + background-color: rgba($action-button-color, 0.15); } - &:focus { + &:focus-visible { outline: $ui-button-icon-focus-outline; } @@ -224,10 +222,10 @@ &:active, &:focus { color: darken($lighter-text-color, 7%); - background-color: $ui-button-icon-hover-background-color; + background-color: rgba($lighter-text-color, 0.15); } - &:focus { + &:focus-visible { outline: $ui-button-icon-focus-outline; } @@ -239,6 +237,13 @@ &.active { color: $highlight-text-color; + &:hover, + &:active, + &:focus { + color: $highlight-text-color; + background-color: transparent; + } + &.disabled { color: lighten($highlight-text-color, 13%); } @@ -283,19 +288,15 @@ font-size: 11px; padding: 0 3px; line-height: 27px; - transition: all 100ms ease-in; - transition-property: background-color, color; &:hover, &:active, &:focus { color: darken($lighter-text-color, 7%); - background-color: $ui-button-icon-hover-background-color; - transition: all 200ms ease-out; - transition-property: background-color, color; + background-color: rgba($lighter-text-color, 0.15); } - &:focus { + &:focus-visible { outline: $ui-button-icon-focus-outline; } @@ -307,6 +308,13 @@ &.active { color: $highlight-text-color; + + &:hover, + &:active, + &:focus { + color: $highlight-text-color; + background-color: transparent; + } } } @@ -1975,7 +1983,7 @@ a.account__display-name { font-size: inherit; line-height: inherit; - &:focus { + &:focus-visible { outline: 1px dotted; } } @@ -3838,7 +3846,6 @@ a.status-card.compact:hover { position: relative; z-index: 2; outline: 0; - overflow: hidden; & > button { margin: 0; @@ -3853,6 +3860,10 @@ a.status-card.compact:hover { overflow: hidden; white-space: nowrap; flex: 1; + + &:focus-visible { + outline: $ui-button-icon-focus-outline; + } } & > .column-header__back-button { @@ -3893,10 +3904,18 @@ a.status-card.compact:hover { font-size: 16px; padding: 0 15px; + &:last-child { + border-start-end-radius: 4px; + } + &:hover { color: lighten($darker-text-color, 4%); } + &:focus-visible { + outline: $ui-button-icon-focus-outline; + } + &.active { color: $primary-text-color; background: lighten($ui-base-color, 4%); @@ -4542,7 +4561,7 @@ a.status-card.compact:hover { .emoji-picker-dropdown__menu { background: $simple-background-color; position: relative; - box-shadow: 4px 4px 6px rgba($base-shadow-color, 0.4); + box-shadow: var(--dropdown-shadow); border-radius: 4px; margin-top: 5px; z-index: 2; @@ -4720,7 +4739,7 @@ a.status-card.compact:hover { } } - &:focus { + &:focus-visible { img { outline: $ui-button-icon-focus-outline; } @@ -4734,7 +4753,7 @@ a.status-card.compact:hover { .privacy-dropdown__dropdown { background: $simple-background-color; - box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4); + box-shadow: var(--dropdown-shadow); border-radius: 4px; overflow: hidden; z-index: 2; @@ -4811,19 +4830,6 @@ a.status-card.compact:hover { .privacy-dropdown__value { background: $simple-background-color; border-radius: 4px 4px 0 0; - box-shadow: 0 -4px 4px rgba($base-shadow-color, 0.1); - - .icon-button { - transition: none; - } - - &.active { - background: $ui-highlight-color; - - .icon-button { - color: $primary-text-color; - } - } } &.top .privacy-dropdown__value { @@ -4832,14 +4838,14 @@ a.status-card.compact:hover { .privacy-dropdown__dropdown { display: block; - box-shadow: 2px 4px 6px rgba($base-shadow-color, 0.1); + box-shadow: var(--dropdown-shadow); } } .language-dropdown { &__dropdown { background: $simple-background-color; - box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4); + box-shadow: var(--dropdown-shadow); border-radius: 4px; overflow: hidden; z-index: 2;