[Glitch] Fix column headers accessibility

Port 08e4c78e78358c2847967e9cc34b4a6497be97e2 to glitch-soc.

SCSS fix inspired by 69f13e7bca90f4855e05a49dd69bba66f843134a.

2 files changed, 9 insertions, 14 deletions

diff --git a/app/javascript/flavours/glitch/components/column_header.js b/app/javascript/flavours/glitch/components/column_header.js
index ae90b6f81..e4296ecef 100644
--- a/app/javascript/flavours/glitch/components/column_header.js
+++ b/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}>
-          <i className={`fa fa-fw fa-${icon} column-header__icon`} />
-          <span className='column-header__title'>
-            {title}
-          </span>
+        <h1 className={buttonClassName}>
+          <button onClick={this.handleTitleClick}>
+            <i className={`fa fa-fw fa-${icon} column-header__icon`} />
+            <span className='column-header__title'>
+              {title}
+            </span>
+          </button>
           <div className='column-header__buttons'>
             {backButton}
             { notifCleaning ? (
diff --git a/app/javascript/flavours/glitch/styles/components/columns.scss b/app/javascript/flavours/glitch/styles/components/columns.scss
index 5dcfab4d1..933aea919 100644
--- a/app/javascript/flavours/glitch/styles/components/columns.scss
+++ b/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;
 }