Improve accessibility (part 2) (#4377)

* fix(column_header): Invalid ARIA role

* fix(column): Remove hidden nodes from the DOM

* refactor(column_link): Remove unused property hideOnMobile

* fix(column_header): Use aria-pressed

* fix(column_header): Make collapsed content not focusable, add focusable property

* fix(column_loading): Make header non-focusable

* fix(column_settings): Use role to group the toggles

1 files changed, 2 insertions, 3 deletions

diff --git a/app/javascript/mastodon/features/ui/components/column_header.js b/app/javascript/mastodon/features/ui/components/column_header.js
index dc601d6e1..af195ea9c 100644
--- a/app/javascript/mastodon/features/ui/components/column_header.js
+++ b/app/javascript/mastodon/features/ui/components/column_header.js
@@ -8,7 +8,6 @@ export default class ColumnHeader extends React.PureComponent {
     type: PropTypes.string,
     active: PropTypes.bool,
     onClick: PropTypes.func,
-    hideOnMobile: PropTypes.bool,
     columnHeaderId: PropTypes.string,
   };
 
@@ -17,7 +16,7 @@ export default class ColumnHeader extends React.PureComponent {
   }
 
   render () {
-    const { type, active, hideOnMobile, columnHeaderId } = this.props;
+    const { type, active, columnHeaderId } = this.props;
 
     let icon = '';
 
@@ -26,7 +25,7 @@ export default class ColumnHeader extends React.PureComponent {
     }
 
     return (
-      <div role='button heading' tabIndex='0' className={`column-header ${active ? 'active' : ''} ${hideOnMobile ? 'hidden-on-mobile' : ''}`} onClick={this.handleClick} id={columnHeaderId || null}>
+      <div role='heading' tabIndex='0' className={`column-header ${active ? 'active' : ''}`} onClick={this.handleClick} id={columnHeaderId || null}>
         {icon}
         {type}
       </div>