From 8f53134b5ed2b452ee694dc59133d6164d6b3539 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Sat, 3 Jul 2021 12:43:56 +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/components/column_back_button.js      | 8 +++++++-
 app/soapbox/components/column_back_button_slim.js | 2 +-
 app/styles/components/columns.scss                | 2 +-
 app/styles/components/promo-panel.scss            | 2 +-
 app/styles/components/react-toggle.scss           | 8 +++-----
 app/styles/components/status.scss                 | 2 +-
 app/styles/components/tabs-bar.scss               | 6 ++++--
 app/styles/forms.scss                             | 4 ++++
 8 files changed, 22 insertions(+), 12 deletions(-)

diff --git a/app/soapbox/components/column_back_button.js b/app/soapbox/components/column_back_button.js
index 34e0daeff..1ce0d8f1f 100644
--- a/app/soapbox/components/column_back_button.js
+++ b/app/soapbox/components/column_back_button.js
@@ -17,9 +17,15 @@ export default class ColumnBackButton extends React.PureComponent {
     }
   }
 
+  handleKeyUp = (e) => {
+    if (e.key === 'Enter') {
+      this.handleClick();
+    }
+  }
+
   render() {
     return (
-      <button onClick={this.handleClick} className='column-back-button'>
+      <button onClick={this.handleClick} onKeyUp={this.handleKeyUp} className='column-back-button'>
         <Icon id='chevron-left' className='column-back-button__icon' fixedWidth />
         <FormattedMessage id='column_back_button.label' defaultMessage='Back' />
       </button>
diff --git a/app/soapbox/components/column_back_button_slim.js b/app/soapbox/components/column_back_button_slim.js
index 0edec7de4..70f4081df 100644
--- a/app/soapbox/components/column_back_button_slim.js
+++ b/app/soapbox/components/column_back_button_slim.js
@@ -8,7 +8,7 @@ export default class ColumnBackButtonSlim extends ColumnBackButton {
   render() {
     return (
       <div className='column-back-button--slim'>
-        <div role='button' tabIndex='0' onClick={this.handleClick} className='column-back-button column-back-button--slim-button'>
+        <div role='button' tabIndex='0' onClick={this.handleClick} onKeyUp={this.handleKeyUp} className='column-back-button column-back-button--slim-button'>
           <Icon id='chevron-left' className='column-back-button__icon' fixedWidth />
           <FormattedMessage id='column_back_button.label' defaultMessage='Back' />
         </div>
diff --git a/app/styles/components/columns.scss b/app/styles/components/columns.scss
index 0beae81af..8867b129e 100644
--- a/app/styles/components/columns.scss
+++ b/app/styles/components/columns.scss
@@ -217,7 +217,7 @@
   z-index: 3;
   outline: 0;
 
-  &:hover {
+  &:hover, &:focus {
     text-decoration: underline;
   }
 }
diff --git a/app/styles/components/promo-panel.scss b/app/styles/components/promo-panel.scss
index 78625e338..8c1433b3f 100644
--- a/app/styles/components/promo-panel.scss
+++ b/app/styles/components/promo-panel.scss
@@ -20,7 +20,7 @@
     border-bottom: 0;
   }
 
-  &:hover {
+  &:hover, &:focus {
     color: var(--primary-text-color--faint);
 
     span {
diff --git a/app/styles/components/react-toggle.scss b/app/styles/components/react-toggle.scss
index e2be2ef14..5a72c3b2d 100644
--- a/app/styles/components/react-toggle.scss
+++ b/app/styles/components/react-toggle.scss
@@ -36,7 +36,9 @@
   transition: background-color 0.2s ease;
 }
 
-.react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track {
+.react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track,
+.react-toggle.react-toggle--focus:not(.react-toggle--disabled) .react-toggle-track,
+.react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track {
   background-color: var(--brand-color--hicontrast);
 }
 
@@ -44,10 +46,6 @@
   background-color: var(--brand-color);
 }
 
-.react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track {
-  background-color: var(--brand-color--hicontrast);
-}
-
 .react-toggle-track-check {
   position: absolute;
   width: 14px;
diff --git a/app/styles/components/status.scss b/app/styles/components/status.scss
index f65a700fc..7244cf401 100644
--- a/app/styles/components/status.scss
+++ b/app/styles/components/status.scss
@@ -424,7 +424,7 @@
     background: var(--brand-color--med);
     transition: 0.2s;
 
-    &:hover {
+    &:hover, &:focus {
       background: hsla(var(--brand-color_hsl), 0.5);
       text-decoration: none;
     }
diff --git a/app/styles/components/tabs-bar.scss b/app/styles/components/tabs-bar.scss
index 905533630..69ac2d301 100644
--- a/app/styles/components/tabs-bar.scss
+++ b/app/styles/components/tabs-bar.scss
@@ -152,7 +152,8 @@
           background-color: var(--accent-color);
         }
 
-        &:hover:not(.react-toggle--disabled) .react-toggle-track {
+        &:hover:not(.react-toggle--disabled) .react-toggle-track,
+        &.react-toggle--focus .react-toggle-track {
           background-color: var(--accent-color--bright);
         }
       }
@@ -250,7 +251,8 @@
   }
 
   &.active::before,
-  &:hover::before {
+  &:hover::before,
+  &:focus::before {
     height: 30px;
     opacity: 1;
 
diff --git a/app/styles/forms.scss b/app/styles/forms.scss
index 1c0a2cc22..ebd91c250 100644
--- a/app/styles/forms.scss
+++ b/app/styles/forms.scss
@@ -479,6 +479,10 @@ code {
     position: relative;
     margin-top: 8px;
     cursor: pointer;
+
+    &:focus {
+      background: var(--accent-color--faint);
+    }
   }
 
   .select-wrapper {