Merge pull request #1754 from HSLdevcom/DT-2087

DT-2087 Improve disruption info button accessibility
HSLdevcom · Aug 8, 2017 · 1aa1b61 · 1aa1b61
2 parents fb9a545 + 1776759
commit 1aa1b61
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 7 deletions.
diff --git a/app/component/AppBarLarge.js b/app/component/AppBarLarge.js
@@ -1,13 +1,14 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+import { intlShape } from 'react-intl';
 import { routerShape, locationShape } from 'react-router';
 import ExternalLink from './ExternalLink';
 import DisruptionInfo from './DisruptionInfo';
 import Icon from './Icon';
 import ComponentUsageExample from './ComponentUsageExample';
 import LangSelect from './LangSelect';
 
-const AppBarLarge = ({ titleClicked }, { router, location, config }) => {
+const AppBarLarge = ({ titleClicked }, { router, location, config, intl }) => {
   const openDisruptionInfo = () => {
     router.push({
       ...location,
@@ -21,21 +22,28 @@ const AppBarLarge = ({ titleClicked }, { router, location, config }) => {
   return (
     <div>
       <div className="top-bar bp-large flex-horizontal">
-        <a onClick={titleClicked}>
+        <button className="noborder" onClick={titleClicked}>
           {config.textLogo
             ? <section className="title">
                 <span className="title">
                   {config.title}
                 </span>
               </section>
             : <div className="navi-logo" />}
-        </a>
+        </button>
         <div className="empty-space flex-grow" />
         <div className="navi-languages right-border navi-margin">
           <LangSelect />
         </div>
         <div className="navi-icons navi-margin padding-horizontal-large">
-          <a onClick={openDisruptionInfo}>
+          <a
+            className="noborder"
+            onClick={openDisruptionInfo}
+            aria-label={intl.formatMessage({
+              id: 'disruptions',
+              defaultMessage: 'Disruptions',
+            })}
+          >
             <Icon img="icon-icon_caution" />
           </a>
         </div>
@@ -58,6 +66,7 @@ AppBarLarge.contextTypes = {
   router: routerShape.isRequired,
   location: locationShape.isRequired,
   config: PropTypes.object.isRequired,
+  intl: intlShape.isRequired,
 };
 
 AppBarLarge.description = () =>

diff --git a/app/component/DisruptionInfoButton.js b/app/component/DisruptionInfoButton.js
@@ -7,16 +7,16 @@ import Icon from './Icon';
 function DisruptionInfoButton(props, { config }) {
   if (!config.disruption || config.disruption.showInfoButton) {
     return (
-      <div
-        className={'cursor-pointer disruption-info'}
+      <button
+        className={'cursor-pointer disruption-info noborder'}
         onClick={props.toggleDisruptionInfo}
       >
         <FormattedMessage id="disruptions" defaultMessage="Disruptions" />
         {props.root &&
           props.root.alerts &&
           props.root.alerts.length > 0 &&
           <Icon img={'icon-icon_caution'} className={'disruption-info'} />}
-      </div>
+      </button>
     );
   }
   return null;

diff --git a/app/component/navigation.scss b/app/component/navigation.scss
@@ -202,6 +202,10 @@ $content-background-color: $background-color;
     padding: 5px 20px;
     float: right;
   }
+
+  button.noborder {
+    @include font-medium;
+  }
 }
 
 .offcanvas-section {

diff --git a/test/visual-images/AppBarLarge_normal/normal/ie11.png b/test/visual-images/AppBarLarge_normal/normal/ie11.png