Improve Accessibility for screen reader users (#1198)

* Navigation menu: ensure that nav links are always labelled for screen readers, regardless of whether they are visually minimized. Add labels and roles for the minimize toggle button.

* Make screen readers read incoming notifications, add some missing labels in the notifications panel

* render notifications in a labelled <aside> instead of a <span>

* DatabaseRow: add missing labels to controls

* Narrow the scope of role=main so it excludes the navigation bar

Author: Neurrone

app/addons/components/components/copy.js

@@ -49,7 +49,7 @@ export class Copy extends React.Component {
 
   getClipboardElement () {
     if (this.props.displayType === 'icon') {
-      return (<i className="fontawesome icon-paste"></i>);
+      return (<i aria-hidden="true" className="fontawesome icon-paste"></i>);
     }
     return this.props.textDisplay;
   }
@@ -58,6 +58,7 @@ export class Copy extends React.Component {
     const btnClasses = this.props.displayType === 'input' ? "btn copy-button" : "copy" + " clipboard-copy-element";
     return (
       <button
+        aria-label="Copy to Clipboard"
         className={btnClasses}
         data-clipboard-text={this.props.text}
         title={this.props.title}

app/addons/databases/components.js

@@ -231,12 +231,15 @@ class DatabaseRow extends React.Component {
 
         <td className="database-actions">
           <a className="db-actions btn fonticon-replicate set-replication-start"
+            aria-label={`Replicate ${id}`}
             title={"Replicate " + name}
             href={"#/replication/_create/" + encodedId} />
           <a
+            aria-label={`Set permissions for ${id}`}
             className="db-actions btn icon-lock set-permissions"
             title={"Set permissions for " + name} href={"#/database/" + encodedId + "/permissions"} />
           <a
+            aria-label={`Delete ${id}`}
             className="db-actions btn icon-trash"
             onClick={this.showDeleteDatabaseModal.bind(this, id, encodedId)}
             title={'Delete ' + id} data-bypass="true" />

app/addons/fauxton/appwrapper.js

@@ -69,10 +69,10 @@ class App extends React.Component {
           <GlobalNotificationsContainer />
           <NotificationPanelContainer />
         </div>
-        <div role="main" id="main"  className={mainClass}>
+        <div id="main"  className={mainClass}>
           <div id="app-container">
             <div className="wrapper">
-              <div className="pusher">
+              <div role="main" className="pusher">
                 <ContentWrapper router={this.props.router} setNavbarActiveLink={this.props.setNavbarActiveLink}/>
               </div>
               <div id="primary-navbar">

app/addons/fauxton/navigation/components/Burger.js

@@ -29,8 +29,8 @@ const Burger = ({toggleMenu, isMinimized}) => {
     'icon-signin faux-navbar__burger__icon--flipped';
 
   return (
-    <div className={burgerClasses} onClick={toggleMenu}>
-      <i className={"faux-navbar__burger__icon " + icon}></i>
+    <div aria-expanded={!isMinimized} aria-label="Toggle Navigation Menu" className={burgerClasses} onClick={toggleMenu} role="button" tabIndex="0">
+      <i aria-hidden="true" className={"faux-navbar__burger__icon " + icon}></i>
     </div>
   );
 };

app/addons/fauxton/navigation/components/NavLink.js

@@ -18,10 +18,11 @@ import classNames from 'classnames';
 
 const NavLink = ({link, active, isMinimized}) => {
 
+  const isActive = active === link.title;
   const linkClass = classNames(
     'faux-navbar__link',
-    {'faux-navbar__link--active':  active === link.title},
-    {'faux-navbar__link--inactive': active !== link.title},
+    {'faux-navbar__link--active':  isActive},
+    {'faux-navbar__link--inactive': !isActive},
     {'faux-navbar--wide':  !isMinimized},
     {'faux-navbar--narrow': isMinimized}
   );
@@ -33,7 +34,7 @@ const NavLink = ({link, active, isMinimized}) => {
   let linkIcon = null;
   if (link.icon) {
     linkIcon = (
-      <i className={classNames(
+      <i aria-hidden="true" className={classNames(
         link.icon,
         'fonticon faux-navbar__icon',
         {'faux-navbar__icon-badge': link.badge})}>
@@ -42,7 +43,7 @@ const NavLink = ({link, active, isMinimized}) => {
   }
 
   return (
-    <a className={linkClass} href={link.href} target={link.target ? '_blank' : null} data-bypass={link.target ? 'true' : null}>
+    <a aria-current={isActive ? "page" : null } aria-label={link.title} className={linkClass} href={link.href} target={link.target ? '_blank' : null} data-bypass={link.target ? 'true' : null}>
       <div data-nav-name={link.title} className="faux-navbar__itemarea">
         {linkIcon}
         {linkTitle}

app/addons/fauxton/notifications/components/GlobalNotifications.js

@@ -123,7 +123,7 @@ export default class GlobalNotifications extends React.Component {
 
   render() {
     return (
-      <div id="global-notifications">
+      <div id="global-notifications" role="alert">
         <TransitionMotion
           styles={this.getStyles}
         >

app/addons/fauxton/notifications/components/NotificationCenterPanel.js

@@ -103,10 +103,10 @@ export default class NotificationCenterPanel extends React.Component {
           <header className="flex-layout flex-row">
             <span className="fonticon fonticon-bell" />
             <h1 className="flex-body">Notifications</h1>
-            <button type="button" onClick={this.props.hideNotificationCenter}>×</button>
+            <button aria-label="Hide Notifications Center" type="button" onClick={this.props.hideNotificationCenter}>×</button>
           </header>
 
-          <ul className="notification-filter flex-layout flex-row">
+          <ul aria-label="Filters" className="notification-filter flex-layout flex-row">
             <li className={filterClasses.all} title="All notifications" data-filter="all"
               onClick={() => this.props.selectNotificationFilter('all')}>All</li>
             <li className={filterClasses.success} title="Success notifications" data-filter="success"

app/addons/fauxton/notifications/components/NotificationPanelWithTransition.js

@@ -47,9 +47,9 @@ export default class NotificationPanelWithTransition extends React.Component {
         {...this.props} />;
     });
     return (
-      <span>
+      <aside aria-label="Notifications">
         {panel}
-      </span>
+      </aside>
     );
   };