Merge branch 'a11y--' into 'develop'

Minor accessibility improvements

See merge request soapbox-pub/soapbox-fe!754

app/soapbox/features/account/components/header.js

@@ -325,13 +325,13 @@ class Header extends ImmutablePureComponent {
             {info}
           </div>
 
-          {features.accountSubscriptions && <div className='account__header__subscribe'>
-            <SubscriptionButton account={account} />
-          </div>}
-
           {header && <a className='account__header__header' href={account.get('header')} onClick={this.handleHeaderClick} target='_blank'>
             <StillImage src={account.get('header')} alt='' className='parallax' />
           </a>}
+
+          {features.accountSubscriptions && <div className='account__header__subscribe'>
+            <SubscriptionButton account={account} />
+          </div>}
         </div>
 
         <div className='account__header__bar'>

app/soapbox/features/account_timeline/index.js

@@ -193,7 +193,7 @@ class AccountTimeline extends ImmutablePureComponent {
         </div>
         <div className={classNames('column-header__collapsible', { collapsed, animating })} onTransitionEnd={this.handleTransitionEnd}>
           <div className='column-header__collapsible-inner'>
-            <ColumnSettingsContainer />
+            {(!collapsed || animating) && <ColumnSettingsContainer />}
           </div>
         </div>
         <StatusList

app/soapbox/features/reactions/index.js

@@ -100,8 +100,8 @@ class Reactions extends ImmutablePureComponent {
         {
           reactions.size > 0 && (
             <div className='reaction__filter-bar'>
-              <button onClick={this.handleFilterChange('')}>All</button>
-              {reactions?.filter(reaction => reaction.count).map(reaction => <button key={reaction.name} onClick={this.handleFilterChange(reaction.name)}>{reaction.name} {reaction.count}</button>)}
+              <button className={!params.reaction ? 'active' : ''} onClick={this.handleFilterChange('')}>All</button>
+              {reactions?.filter(reaction => reaction.count).map(reaction => <button key={reaction.name} className={params.reaction === reaction.name ? 'active' : ''} onClick={this.handleFilterChange(reaction.name)}>{reaction.name} {reaction.count}</button>)}
             </div>
           )
         }

app/styles/accounts.scss

@@ -524,6 +524,7 @@ a .account__avatar {
   border-radius: 4px;
   opacity: 0.7;
   white-space: nowrap;
+  transition: 0.2s;
 
   &:hover {
     opacity: 1;

app/styles/components/account-header.scss

@@ -34,6 +34,12 @@
       border-radius: 4px;
       opacity: 0.7;
 
+      &:active,
+      &:focus,
+      &:hover {
+        opacity: 1;
+      }
+
       &:not(.button-active) i.fa {
         margin: 0;
       }

app/styles/ui.scss

@@ -638,9 +638,14 @@
     position: relative;
     background: transparent;
 
+    &:active,
+    &:focus,
+    &:hover,
     &.active {
       color: var(--primary-text-color);
+    }
 
+    &.active {
       &::before,
       &::after {
         display: block;
@@ -668,6 +673,7 @@
   overflow-x: auto;
   overflow-y: hidden;
 
+  button,
   a {
     flex: unset;
     padding: 15px 24px;