[Glitch] Fix column headers accessibility

Port c6d5ea8695 to glitch-soc.

SCSS fix inspired by 4cf5144099.

app/javascript/flavours/glitch/components/column_header.js

@@ -28,7 +28,6 @@ export default class ColumnHeader extends React.PureComponent {
     active: PropTypes.bool,
     localSettings : ImmutablePropTypes.map,
     multiColumn: PropTypes.bool,
-    focusable: PropTypes.bool,
     showBackButton: PropTypes.bool,
     notifCleaning: PropTypes.bool, // true only for the notification column
     notifCleaningActive: PropTypes.bool,
@@ -41,10 +40,6 @@ export default class ColumnHeader extends React.PureComponent {
     intl: PropTypes.object.isRequired,
   };
 
-  static defaultProps = {
-    focusable: true,
-  }
-
   state = {
     collapsed: true,
     animating: false,
@@ -91,7 +86,7 @@ export default class ColumnHeader extends React.PureComponent {
   }
 
   render () {
-    const { intl, icon, active, children, pinned, onPin, multiColumn, focusable, showBackButton, intl: { formatMessage }, notifCleaning, notifCleaningActive } = this.props;
+    const { intl, icon, active, children, pinned, onPin, multiColumn, showBackButton, intl: { formatMessage }, notifCleaning, notifCleaningActive } = this.props;
     const { collapsed, animating, animatingNCD } = this.state;
 
     let title = this.props.title;
@@ -172,11 +167,13 @@ export default class ColumnHeader extends React.PureComponent {
 
     return (
       <div className={wrapperClassName}>
-        <h1 tabIndex={focusable ? 0 : null} role='button' className={buttonClassName} aria-label={title} onClick={this.handleTitleClick}>
+        <h1 className={buttonClassName}>
-          <i className={`fa fa-fw fa-${icon} column-header__icon`} />
+          <button onClick={this.handleTitleClick}>
-          <span className='column-header__title'>
+            <i className={`fa fa-fw fa-${icon} column-header__icon`} />
-            {title}
+            <span className='column-header__title'>
-          </span>
+              {title}
+            </span>
+          </button>
           <div className='column-header__buttons'>
             {backButton}
             { notifCleaning ? (

app/javascript/flavours/glitch/styles/components/columns.scss

@@ -243,7 +243,6 @@
 .column-header {
   display: flex;
   font-size: 16px;
-  padding: 15px;
   background: lighten($ui-base-color, 4%);
   flex: 0 0 auto;
   cursor: pointer;
@@ -255,7 +254,7 @@
   & > button {
     margin: 0;
     border: none;
-    padding: 15px 0 15px 15px;
+    padding: 15px;
     color: inherit;
     background: transparent;
     font: inherit;
@@ -303,7 +302,6 @@
 .column-header__buttons {
   height: 48px;
   display: flex;
-  margin: -15px;
   margin-left: 0;
 }