Improve aria support - Columns and Navigation Drawer Icons (#2299)

* feat(aria): Add aria-labels to underlabelled tab nav items

The drawer tabs which control primary navigation are only labelled by a title which is not available to many screenreaders. Add an aria-label attribute to each link to improve readability with screenreaders. Organize link attributes so link target is first followed by classname.
Issue #1349

* feat(aria): Replace abstract aria role of section with region

Abstract aria roles such as section should not be used in content. Use non-abstract 'region' aria role instead. That role expects an aria-labelledby attribute with an id. Pass an ID to the column header. Remove the aria-label attribute on the ColumnHeader because the same value is output in plaintext as its child.
Issue #1349

* fix(aria): Remove aria-controls attribute until solution is found

Columns do not have wrappers, so these icons can't point to a column wrapper which it controls. Instead these icons function as triggers to show or hide individual columns.
#1349

* fix(typo): Remove type of aria-labelledby instead of aria-label

2 files changed, 8 insertions, 6 deletions

diff --git a/app/assets/javascripts/components/features/ui/components/column.jsx b/app/assets/javascripts/components/features/ui/components/column.jsx
index 4dad7f721..aa09d0fd2 100644
--- a/app/assets/javascripts/components/features/ui/components/column.jsx
+++ b/app/assets/javascripts/components/features/ui/components/column.jsx
@@ -54,14 +54,15 @@ class Column extends React.PureComponent {
   render () {
     const { heading, icon, children, active, hideHeadingOnMobile } = this.props;
 
+    let columnHeaderId = null
     let header = '';
 
     if (heading) {
-      header = <ColumnHeader icon={icon} active={active} type={heading} onClick={this.handleHeaderClick} hideOnMobile={hideHeadingOnMobile} />;
+      columnHeaderId = heading.replace(/ /g, '-')
+      header = <ColumnHeader icon={icon} active={active} type={heading} onClick={this.handleHeaderClick} hideOnMobile={hideHeadingOnMobile} columnHeaderId={columnHeaderId}/>;
     }
-
     return (
-      <div role='section' aria-label={heading} className='column' onWheel={this.handleWheel}>
+      <div role='region' aria-labelledby={columnHeaderId} className='column' onWheel={this.handleWheel}>
         {header}
         {children}
       </div>
diff --git a/app/assets/javascripts/components/features/ui/components/column_header.jsx b/app/assets/javascripts/components/features/ui/components/column_header.jsx
index 454cce9c2..c4e6b4afa 100644
--- a/app/assets/javascripts/components/features/ui/components/column_header.jsx
+++ b/app/assets/javascripts/components/features/ui/components/column_header.jsx
@@ -12,7 +12,7 @@ class ColumnHeader extends React.PureComponent {
   }
 
   render () {
-    const { type, active, hideOnMobile } = this.props;
+    const { type, active, hideOnMobile, columnHeaderId } = this.props;
 
     let icon = '';
 
@@ -21,7 +21,7 @@ class ColumnHeader extends React.PureComponent {
     }
 
     return (
-      <div role='button' tabIndex='0' aria-label={type} className={`column-header ${active ? 'active' : ''} ${hideOnMobile ? 'hidden-on-mobile' : ''}`} onClick={this.handleClick}>
+      <div role='button heading' tabIndex='0' className={`column-header ${active ? 'active' : ''} ${hideOnMobile ? 'hidden-on-mobile' : ''}`} onClick={this.handleClick} id={columnHeaderId || null}>
         {icon}
         {type}
       </div>
@@ -35,7 +35,8 @@ ColumnHeader.propTypes = {
   type: PropTypes.string,
   active: PropTypes.bool,
   onClick: PropTypes.func,
-  hideOnMobile: PropTypes.bool
+  hideOnMobile: PropTypes.bool,
+  columnHeaderId: PropTypes.string
 };
 
 export default ColumnHeader;