From 59478a1b46e934c75ad27f1270d9b9411de3f185 Mon Sep 17 00:00:00 2001
From: Trevor Wolf <teeerevor@gmail.com>
Date: Fri, 21 Jul 2023 21:20:14 +1000
Subject: [PATCH] change focus ui for keyboard only input (#25935)
---
.../mastodon/components/dropdown_menu.jsx | 2 +-
.../compose/components/navigation_bar.jsx | 19 +++--
app/javascript/styles/mastodon/basics.scss | 15 +++-
.../styles/mastodon/components.scss | 83 +++++--------------
app/javascript/styles/mastodon/variables.scss | 4 +
5 files changed, 50 insertions(+), 73 deletions(-)
diff --git a/app/javascript/mastodon/components/dropdown_menu.jsx b/app/javascript/mastodon/components/dropdown_menu.jsx
index 0416df5d4..fd66310e8 100644
--- a/app/javascript/mastodon/components/dropdown_menu.jsx
+++ b/app/javascript/mastodon/components/dropdown_menu.jsx
@@ -297,7 +297,7 @@ export default class Dropdown extends PureComponent {
onKeyPress: this.handleKeyPress,
}) : (
<IconButton
- icon={icon}
+ icon={!open ? icon : 'close'}
title={title}
active={open}
disabled={disabled}
diff --git a/app/javascript/mastodon/features/compose/components/navigation_bar.jsx b/app/javascript/mastodon/features/compose/components/navigation_bar.jsx
index 371bed905..5af38da43 100644
--- a/app/javascript/mastodon/features/compose/components/navigation_bar.jsx
+++ b/app/javascript/mastodon/features/compose/components/navigation_bar.jsx
@@ -8,7 +8,6 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
import ImmutablePureComponent from 'react-immutable-pure-component';
import { Avatar } from '../../../components/avatar';
-import { IconButton } from '../../../components/icon_button';
import ActionBar from './action_bar';
@@ -21,23 +20,27 @@ export default class NavigationBar extends ImmutablePureComponent {
};
render () {
+ const username = this.props.account.get('acct')
return (
<div className='navigation-bar'>
- <Link to={`/@${this.props.account.get('acct')}`}>
- <span style={{ display: 'none' }}>{this.props.account.get('acct')}</span>
+ <Link to={`/@${username}`}>
+ <span style={{ display: 'none' }}>{username}</span>
<Avatar account={this.props.account} size={46} />
</Link>
<div className='navigation-bar__profile'>
- <Link to={`/@${this.props.account.get('acct')}`}>
- <strong className='navigation-bar__profile-account'>@{this.props.account.get('acct')}</strong>
- </Link>
+ <span>
+ <Link to={`/@${username}`}>
+ <strong className='navigation-bar__profile-account'>@{username}</strong>
+ </Link>
+ </span>
- <a href='/settings/profile' className='navigation-bar__profile-edit'><FormattedMessage id='navigation_bar.edit_profile' defaultMessage='Edit profile' /></a>
+ <span>
+ <a href='/settings/profile' className='navigation-bar__profile-edit'><FormattedMessage id='navigation_bar.edit_profile' defaultMessage='Edit profile' /></a>
+ </span>
</div>
<div className='navigation-bar__actions'>
- <IconButton className='close' title='' icon='close' onClick={this.props.onClose} />
<ActionBar account={this.props.account} onLogout={this.props.onLogout} />
</div>
</div>
diff --git a/app/javascript/styles/mastodon/basics.scss b/app/javascript/styles/mastodon/basics.scss
index ff00c797c..234c703f2 100644
--- a/app/javascript/styles/mastodon/basics.scss
+++ b/app/javascript/styles/mastodon/basics.scss
@@ -161,13 +161,20 @@ body {
}
}
+a {
+ &:focus {
+ border-radius: 4px;
+ outline: $ui-button-icon-focus-outline;
+ }
+
+ &:focus:not(:focus-visible) {
+ outline: none;
+ }
+}
+
button {
font-family: inherit;
cursor: pointer;
-
- &:focus {
- outline: none;
- }
}
.app-holder {
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index beff07daa..d08cb2803 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -74,6 +74,10 @@
background-color: $ui-button-focus-background-color;
}
+ &:focus {
+ outline: $ui-button-icon-focus-outline;
+ }
+
&--destructive {
&:active,
&:focus,
@@ -98,16 +102,6 @@
transition: none;
}
- &::-moz-focus-inner {
- border: 0;
- }
-
- &::-moz-focus-inner,
- &:focus,
- &:active {
- outline: 0 !important;
- }
-
&.button-secondary {
color: $ui-button-secondary-color;
background: transparent;
@@ -197,7 +191,7 @@
border-radius: 4px;
background: transparent;
cursor: pointer;
- transition: all 100ms ease-in;
+ transition: all 100ms ease-out;
transition-property: background-color, color;
text-decoration: none;
@@ -209,14 +203,12 @@
&:hover,
&:active,
&:focus {
- color: lighten($action-button-color, 7%);
- background-color: rgba($action-button-color, 0.15);
- transition: all 200ms ease-out;
- transition-property: background-color, color;
+ color: lighten($action-button-color, 20%);
+ background-color: $ui-button-icon-hover-background-color;
}
&:focus {
- background-color: rgba($action-button-color, 0.3);
+ outline: $ui-button-icon-focus-outline;
}
&.disabled {
@@ -225,20 +217,6 @@
cursor: default;
}
- &.active {
- color: $highlight-text-color;
- }
-
- &::-moz-focus-inner {
- border: 0;
- }
-
- &::-moz-focus-inner,
- &:focus,
- &:active {
- outline: 0 !important;
- }
-
&.inverted {
color: $lighter-text-color;
@@ -246,11 +224,11 @@
&:active,
&:focus {
color: darken($lighter-text-color, 7%);
- background-color: rgba($lighter-text-color, 0.15);
+ background-color: $ui-button-icon-hover-background-color;
}
&:focus {
- background-color: rgba($lighter-text-color, 0.3);
+ outline: $ui-button-icon-focus-outline;
}
&.disabled {
@@ -305,7 +283,6 @@
font-size: 11px;
padding: 0 3px;
line-height: 27px;
- outline: 0;
transition: all 100ms ease-in;
transition-property: background-color, color;
@@ -313,13 +290,13 @@
&:active,
&:focus {
color: darken($lighter-text-color, 7%);
- background-color: rgba($lighter-text-color, 0.15);
+ background-color: $ui-button-icon-hover-background-color;
transition: all 200ms ease-out;
transition-property: background-color, color;
}
&:focus {
- background-color: rgba($lighter-text-color, 0.3);
+ outline: $ui-button-icon-focus-outline;
}
&.disabled {
@@ -331,16 +308,6 @@
&.active {
color: $highlight-text-color;
}
-
- &::-moz-focus-inner {
- border: 0;
- }
-
- &::-moz-focus-inner,
- &:focus,
- &:active {
- outline: 0 !important;
- }
}
body > [data-popper-placement] {
@@ -728,7 +695,6 @@ body > [data-popper-placement] {
flex: 0 0 auto;
.compose-form__publish-button-wrapper {
- overflow: hidden;
padding-top: 15px;
}
}
@@ -1929,13 +1895,6 @@ a.account__display-name {
.navigation-bar__actions {
position: relative;
- .icon-button.close {
- position: absolute;
- pointer-events: none;
- transform: scale(0, 1) translate(-100%, 0);
- opacity: 0;
- }
-
.compose__action-bar .icon-button {
pointer-events: auto;
transform: scale(1, 1) translate(0, 0);
@@ -1945,19 +1904,21 @@ a.account__display-name {
}
.navigation-bar__profile {
+ display: flex;
+ flex-direction: column;
flex: 1 1 auto;
line-height: 20px;
- overflow: hidden;
}
.navigation-bar__profile-account {
- display: block;
+ display: inline;
font-weight: 500;
overflow: hidden;
text-overflow: ellipsis;
}
.navigation-bar__profile-edit {
+ display: inline;
color: inherit;
text-decoration: none;
}
@@ -4740,11 +4701,6 @@ a.status-card.compact:hover {
outline: 0;
cursor: pointer;
- &:active,
- &:focus {
- outline: 0 !important;
- }
-
img {
filter: grayscale(100%);
opacity: 0.8;
@@ -4760,6 +4716,13 @@ a.status-card.compact:hover {
img {
opacity: 1;
filter: none;
+ border-radius: 100%;
+ }
+ }
+
+ &:focus {
+ img {
+ outline: $ui-button-icon-focus-outline;
}
}
}
diff --git a/app/javascript/styles/mastodon/variables.scss b/app/javascript/styles/mastodon/variables.scss
index 68db9d5fc..e89dd5d3a 100644
--- a/app/javascript/styles/mastodon/variables.scss
+++ b/app/javascript/styles/mastodon/variables.scss
@@ -5,6 +5,7 @@ $red-600: #b7253d !default; // Deep Carmine
$red-500: #df405a !default; // Cerise
$blurple-600: #563acc; // Iris
$blurple-500: #6364ff; // Brand purple
+$blurple-400: #7477fd; // Medium slate blue
$blurple-300: #858afa; // Faded Blue
$grey-600: #4e4c5a; // Trout
$grey-100: #dadaf3; // Topaz
@@ -56,6 +57,9 @@ $ui-button-tertiary-focus-color: $white !default;
$ui-button-destructive-background-color: $red-500 !default;
$ui-button-destructive-focus-background-color: $red-600 !default;
+$ui-button-icon-focus-outline: solid 2px $blurple-400 !default;
+$ui-button-icon-hover-background-color: rgba(140, 141, 255, 40%) !default;
+
// Variables for texts
$primary-text-color: $white !default;
$darker-text-color: $ui-primary-color !default;