change focus ui for keyboard only input (#25935)

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}

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>
-
-          <a href='/settings/profile' className='navigation-bar__profile-edit'><FormattedMessage id='navigation_bar.edit_profile' defaultMessage='Edit profile' /></a>
+          <span>
+            <Link to={`/@${username}`}>
+              <strong className='navigation-bar__profile-account'>@{username}</strong>
+            </Link>
+          </span>
+
+          <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>

app/javascript/styles/mastodon/basics.scss

@@ -161,15 +161,22 @@ body {
   }
 }
 
-button {
-  font-family: inherit;
-  cursor: pointer;
-
+a {
   &:focus {
+    border-radius: 4px;
+    outline: $ui-button-icon-focus-outline;
+  }
+
+  &:focus:not(:focus-visible) {
     outline: none;
   }
 }
 
+button {
+  font-family: inherit;
+  cursor: pointer;
+}
+
 .app-holder {
   &,
   & > div,

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;
     }
   }
 }

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;