Merge branch 'styles-accessibility' into 'develop'

Minor accessibility improvements

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

app/soapbox/components/__tests__/__snapshots__/column_back_button-test.js.snap

@@ -4,6 +4,7 @@ exports[`<ColumnBackButton /> renders correctly 1`] = `
 <button
   className="column-back-button"
   onClick={[Function]}
+  onKeyUp={[Function]}
 >
   <i
     alt="chevron-left"

app/soapbox/components/__tests__/__snapshots__/column_back_button_slim-test.js.snap

@@ -7,6 +7,7 @@ exports[`<ColumnBackButtonSlim /> renders correctly 1`] = `
   <div
     className="column-back-button column-back-button--slim-button"
     onClick={[Function]}
+    onKeyUp={[Function]}
     role="button"
     tabIndex="0"
   >

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/soapbox/components/icon_button.js

@@ -13,6 +13,8 @@ export default class IconButton extends React.PureComponent {
     title: PropTypes.string.isRequired,
     icon: PropTypes.string.isRequired,
     onClick: PropTypes.func,
+    onKeyUp: PropTypes.func,
+    onKeyDown: PropTypes.func,
     onMouseEnter: PropTypes.func,
     onMouseLeave: PropTypes.func,
     size: PropTypes.number,
@@ -37,6 +39,8 @@ export default class IconButton extends React.PureComponent {
     animate: false,
     overlay: false,
     tabIndex: '0',
+    onKeyUp: () => {},
+    onKeyDown: () => {},
     onClick: () => {},
     onMouseEnter: () => {},
     onMouseLeave: () => {},
@@ -94,6 +98,8 @@ export default class IconButton extends React.PureComponent {
           title={title}
           className={classes}
           onClick={this.handleClick}
+          onKeyUp={this.props.onKeyUp}
+          onKeyDown={this.props.onKeyDown}
           onMouseEnter={this.props.onMouseEnter}
           onMouseLeave={this.props.onMouseLeave}
           tabIndex={tabIndex}
@@ -119,6 +125,8 @@ export default class IconButton extends React.PureComponent {
             title={title}
             className={classes}
             onClick={this.handleClick}
+            onKeyUp={this.props.onKeyUp}
+            onKeyDown={this.props.onKeyDown}
             onMouseEnter={this.props.onMouseEnter}
             onMouseLeave={this.props.onMouseLeave}
             tabIndex={tabIndex}

app/styles/components/columns.scss

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

app/styles/components/promo-panel.scss

@@ -20,7 +20,8 @@
     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

@@ -434,7 +434,8 @@
     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 {