Minor accessibility improvements

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>

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>

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>

app/styles/components/columns.scss

@@ -217,7 +217,7 @@
   z-index: 3;
   outline: 0;
 
-  &:hover {
+  &:hover, &:focus {
     text-decoration: underline;
   }
 }

app/styles/components/promo-panel.scss

@@ -20,7 +20,7 @@
     border-bottom: 0;
   }
 
-  &:hover {
+  &:hover, &:focus {
     color: var(--primary-text-color--faint);
 
     span {

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;

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

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;
 

app/styles/forms.scss

@@ -479,6 +479,10 @@ code {
     position: relative;
     margin-top: 8px;
     cursor: pointer;
+
+    &:focus {
+      background: var(--accent-color--faint);
+    }
   }
 
   .select-wrapper {