From 3b016342c6102f098f098f8a1ffd9fcf464e566a Mon Sep 17 00:00:00 2001
From: Nolan Darilek <nolan@thewordnerd.info>
Date: Thu, 4 Jan 2018 10:25:26 -0600
Subject: Fix accessibility of column headers

As a screen reader user new to Mastodon, I encountered the following issues with the column headers as designed:
 * Jumping between them was difficult. FOr instance, passing my home timeline to reach notification settings was difficult to impossible, especially considering infinite scrolling.
 * There doesn't appear to be any means for triggering the control via the keyboard. the `titleClick` handler only responds to mouse clicks.
 * I didn't even realize there was a Settings toggle until I made this change.

Thanks for using ARIA in your designs. It's a huge help. But adding a `button` role doesn't add keyboard handling and other button behavior. Also, because the role was on the heading container, it obscured the controls within the container itself. This fix resolve that. It also exposes the headings as headings rather than buttons, enabling skipping columns by using screen readers' heading navigation commands.

Since I myself am blind, if this fix requires additional visual styling, I'd like help applying that so it can be merged. I'd consider it an essential accessibility fix for my and other blind users' existence on the platform. Thanks!
---
 app/javascript/mastodon/components/column_header.js | 19 ++++++++-----------
 1 file changed, 8 insertions(+), 11 deletions(-)

(limited to 'app/javascript')

diff --git a/app/javascript/mastodon/components/column_header.js b/app/javascript/mastodon/components/column_header.js
index 80a8fbdb3..fe2fc2adf 100644
--- a/app/javascript/mastodon/components/column_header.js
+++ b/app/javascript/mastodon/components/column_header.js
@@ -23,7 +23,6 @@ export default class ColumnHeader extends React.PureComponent {
     icon: PropTypes.string.isRequired,
     active: PropTypes.bool,
     multiColumn: PropTypes.bool,
-    focusable: PropTypes.bool,
     showBackButton: PropTypes.bool,
     children: PropTypes.node,
     pinned: PropTypes.bool,
@@ -32,10 +31,6 @@ export default class ColumnHeader extends React.PureComponent {
     onClick: PropTypes.func,
   };
 
-  static defaultProps = {
-    focusable: true,
-  }
-
   state = {
     collapsed: true,
     animating: false,
@@ -68,7 +63,7 @@ export default class ColumnHeader extends React.PureComponent {
   }
 
   render () {
-    const { title, icon, active, children, pinned, onPin, multiColumn, focusable, showBackButton, intl: { formatMessage } } = this.props;
+    const { title, icon, active, children, pinned, onPin, multiColumn, showBackButton, intl: { formatMessage } } = this.props;
     const { collapsed, animating } = this.state;
 
     const wrapperClassName = classNames('column-header__wrapper', {
@@ -135,11 +130,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>
+          <button  className={buttonClassName} 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}
-- 
cgit 


From ec620ae486f74c560870802930235ad56e918784 Mon Sep 17 00:00:00 2001
From: kibigo! <marrus-sh@users.noreply.github.com>
Date: Fri, 5 Jan 2018 12:39:34 -0800
Subject: Styling fixes

---
 app/javascript/mastodon/components/column_header.js |  4 ++--
 app/javascript/styles/mastodon/components.scss      | 12 ++++++++++++
 2 files changed, 14 insertions(+), 2 deletions(-)

(limited to 'app/javascript')

diff --git a/app/javascript/mastodon/components/column_header.js b/app/javascript/mastodon/components/column_header.js
index fe2fc2adf..c300db89b 100644
--- a/app/javascript/mastodon/components/column_header.js
+++ b/app/javascript/mastodon/components/column_header.js
@@ -130,8 +130,8 @@ export default class ColumnHeader extends React.PureComponent {
 
     return (
       <div className={wrapperClassName}>
-        <h1>
-          <button  className={buttonClassName} onClick={this.handleTitleClick}>
+        <h1 className={buttonClassName}>
+          <button onClick={this.handleTitleClick}>
             <i className={`fa fa-fw fa-${icon} column-header__icon`} />
             <span className='column-header__title'>
               {title}
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index dec489e9a..aa441a226 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -2351,6 +2351,18 @@
   z-index: 2;
   outline: 0;
 
+  & > button {
+    display: flex;
+    flex: auto;
+    margin: 0;
+    border: none;
+    padding: 0;
+    color: inherit;
+    background: transparent;
+    font: inherit;
+    text-align: left;
+  }
+
   &.active {
     box-shadow: 0 1px 0 rgba($ui-highlight-color, 0.3);
 
-- 
cgit 


From ac686d5a5d63848bfdbe61435071d75c418c569b Mon Sep 17 00:00:00 2001
From: kibigo! <marrus-sh@users.noreply.github.com>
Date: Fri, 5 Jan 2018 13:34:21 -0800
Subject: Fixed overflow issue

---
 app/javascript/styles/mastodon/components.scss | 1 +
 1 file changed, 1 insertion(+)

(limited to 'app/javascript')

diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index aa441a226..e8adceb66 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -2350,6 +2350,7 @@
   position: relative;
   z-index: 2;
   outline: 0;
+  overflow: hidden;
 
   & > button {
     display: flex;
-- 
cgit