Port UI focus changes from upstream

app/javascript/flavours/glitch/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/flavours/glitch/components/intersection_observer_article.jsx

@@ -120,7 +120,7 @@ export default class IntersectionObserverArticle extends Component {
         aria-posinset={index + 1}
         aria-setsize={listLength}
         data-id={id}
-        tabIndex={0}
+        tabIndex={-1}
         style={style}
       >
         {children && cloneElement(children, { hidden: !isIntersecting && (isHidden || !!cachedHeight) })}

app/javascript/flavours/glitch/components/status_content.jsx

@@ -436,7 +436,7 @@ class StatusContent extends PureComponent {
             key={`contents-${tagLinks}-${rewriteMentions}`}
             dangerouslySetInnerHTML={content}
             className='status__content__text translate'
-            tabIndex={0}
+            tabIndex={!hidden ? 0 : null}
             onMouseEnter={this.handleMouseEnter}
             onMouseLeave={this.handleMouseLeave}
             lang={language}
@@ -457,7 +457,7 @@ class StatusContent extends PureComponent {
             key={`contents-${tagLinks}`}
             className='status__content__text translate'
             dangerouslySetInnerHTML={content}
-            tabIndex={0}
+            tabIndex={!hidden ? 0 : null}
             onMouseEnter={this.handleMouseEnter}
             onMouseLeave={this.handleMouseLeave}
             lang={language}

app/javascript/flavours/glitch/features/compose/components/navigation_bar.jsx

@@ -19,23 +19,28 @@ export default class NavigationBar extends ImmutablePureComponent {
   };
 
   render () {
+    const username = this.props.account.get('acct');
+
     return (
       <div className='navigation-bar'>
-        <Permalink className='avatar' href={this.props.account.get('url')} to={`/@${this.props.account.get('acct')}`}>
-          <span style={{ display: 'none' }}>{this.props.account.get('acct')}</span>
+        <Permalink className='avatar' href={this.props.account.get('url')} to={`/@${username}`}>
+          <span style={{ display: 'none' }}>{username}</span>
           <Avatar account={this.props.account} size={48} />
         </Permalink>
 
         <div className='navigation-bar__profile'>
-          <Permalink className='acct' href={this.props.account.get('url')} to={`/@${this.props.account.get('acct')}`}>
-            <strong>@{this.props.account.get('acct')}</strong>
-          </Permalink>
-
+          <span>
+            <Permalink className='acct' href={this.props.account.get('url')} to={`/@${username}`}>
+              <strong>@{username}</strong>
+            </Permalink>
+          </span>
           { profileLink !== undefined && (
-            <a
-              className='edit'
-              href={profileLink}
-            ><FormattedMessage id='navigation_bar.edit_profile' defaultMessage='Edit profile' /></a>
+            <span>
+              <a
+                className='edit'
+                href={profileLink}
+              ><FormattedMessage id='navigation_bar.edit_profile' defaultMessage='Edit profile' /></a>
+            </span>
           )}
         </div>
 

app/javascript/flavours/glitch/styles/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/flavours/glitch/styles/components/columns.scss

@@ -207,6 +207,10 @@ $ui-header-height: 55px;
     padding: 0;
     padding-inline-end: 15px;
   }
+
+  &:focus-visible {
+    outline: $ui-button-icon-focus-outline;
+  }
 }
 
 .column-back-button__icon {
@@ -335,7 +339,6 @@ $ui-header-height: 55px;
   position: relative;
   z-index: 2;
   outline: 0;
-  overflow: hidden;
 
   & > button {
     margin: 0;
@@ -349,6 +352,10 @@ $ui-header-height: 55px;
     overflow: hidden;
     white-space: nowrap;
     flex: 1;
+
+    &:focus-visible {
+      outline: $ui-button-icon-focus-outline;
+    }
   }
 
   & > .column-header__back-button {
@@ -411,10 +418,18 @@ $ui-header-height: 55px;
   font-size: 16px;
   padding: 0 15px;
 
+  &:last-child {
+    border-start-end-radius: 4px;
+  }
+
   &:hover {
     color: lighten($darker-text-color, 7%);
   }
 
+  &:focus-visible {
+    outline: $ui-button-icon-focus-outline;
+  }
+
   &.active {
     color: $primary-text-color;
     background: lighten($ui-base-color, 8%);

app/javascript/flavours/glitch/styles/components/compose_form.scss

@@ -525,19 +525,6 @@
   .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 {
@@ -546,13 +533,13 @@
 
   .privacy-dropdown__dropdown {
     display: block;
-    box-shadow: 2px 4px 6px rgba($base-shadow-color, 0.1);
+    box-shadow: var(--dropdown-shadow);
   }
 }
 
 .privacy-dropdown__dropdown {
   border-radius: 4px;
-  box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4);
+  box-shadow: var(--dropdown-shadow);
   background: $simple-background-color;
   overflow: hidden;
   transform-origin: 50% 0;
@@ -607,7 +594,6 @@
   column-gap: 5px;
 
   .compose-form__publish-button-wrapper {
-    overflow: hidden;
     padding-top: 10px;
 
     button {
@@ -624,7 +610,7 @@
 .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;

app/javascript/flavours/glitch/styles/components/drawer.scss

@@ -111,7 +111,7 @@
   }
 
   .acct {
-    display: block;
+    display: inline;
     color: $secondary-text-color;
     font-weight: 500;
     white-space: nowrap;
@@ -121,9 +121,10 @@
 }
 
 .navigation-bar__profile {
+  display: flex;
+  flex-direction: column;
   flex: 1 1 auto;
   margin-inline-start: 8px;
-  overflow: hidden;
 }
 
 .drawer--results {
@@ -223,6 +224,10 @@
     height: 100%;
     border: 0;
     cursor: inherit;
+
+    &:focus-visible {
+      outline: none;
+    }
   }
 
   @media screen and (height >= 640px) {

app/javascript/flavours/glitch/styles/components/emoji.scss

@@ -14,7 +14,7 @@
 .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;
@@ -79,11 +79,6 @@
   outline: 0;
   cursor: pointer;
 
-  &:active,
-  &:focus {
-    outline: 0 !important;
-  }
-
   img {
     filter: grayscale(100%);
     opacity: 0.8;
@@ -99,6 +94,13 @@
     img {
       opacity: 1;
       filter: none;
+      border-radius: 100%;
+    }
+  }
+
+  &:focus-visible {
+    img {
+      outline: $ui-button-icon-focus-outline;
     }
   }
 }