From 8c25d3d3bade66ee503576d2186849332c19926e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Tue, 14 Sep 2021 13:55:52 +0200
Subject: [PATCH] Minor accessibility improvements
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 app/soapbox/features/account/components/header.js | 8 ++++----
 app/soapbox/features/account_timeline/index.js    | 2 +-
 app/styles/accounts.scss                          | 1 +
 app/styles/components/account-header.scss         | 6 ++++++
 4 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/app/soapbox/features/account/components/header.js b/app/soapbox/features/account/components/header.js
index e477306e1..70e2190fa 100644
--- a/app/soapbox/features/account/components/header.js
+++ b/app/soapbox/features/account/components/header.js
@@ -323,13 +323,13 @@ class Header extends ImmutablePureComponent {
             {info}
           </div>
 
-          <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>}
+
+          <div className='account__header__subscribe'>
+            <SubscriptionButton account={account} />
+          </div>
         </div>
 
         <div className='account__header__bar'>
diff --git a/app/soapbox/features/account_timeline/index.js b/app/soapbox/features/account_timeline/index.js
index d14899ad2..0b0a7f400 100644
--- a/app/soapbox/features/account_timeline/index.js
+++ b/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
diff --git a/app/styles/accounts.scss b/app/styles/accounts.scss
index 14f74f59a..2138a66f6 100644
--- a/app/styles/accounts.scss
+++ b/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;
diff --git a/app/styles/components/account-header.scss b/app/styles/components/account-header.scss
index cc3cbd95e..42f21e4d6 100644
--- a/app/styles/components/account-header.scss
+++ b/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;
       }