|#973| Thais + Sriram | Adds title and aria label for the logout button on the header

4 files changed, 20 insertions, 11 deletions

diff --git a/web-ui/src/common/flat_button/flat_button.js b/web-ui/src/common/flat_button/flat_button.js
index 33df7de4..b8c6c2c7 100644
--- a/web-ui/src/common/flat_button/flat_button.js
+++ b/web-ui/src/common/flat_button/flat_button.js
@@ -43,6 +43,8 @@ const SubmitFlatButton = ({ name, buttonText, fontIconClass }) => (
     labelPosition='before'
     label={buttonText}
     labelStyle={labelStyle}
+    aria-label={buttonText}
+    title={buttonText}
     icon={<FontIcon className={fontIconClass} color={grey500} style={iconStyle} />}
   />
 );
diff --git a/web-ui/src/common/flat_button/flat_button.spec.js b/web-ui/src/common/flat_button/flat_button.spec.js
index 8939e3d9..16f03acb 100644
--- a/web-ui/src/common/flat_button/flat_button.spec.js
+++ b/web-ui/src/common/flat_button/flat_button.spec.js
@@ -18,6 +18,14 @@ describe('FlatButton', () => {
     expect(flatButton.find('FlatButton').props().label).toEqual('Logout');
   });
 
+  it('renders a FlatButton of type submit with title logout', () => {
+    expect(flatButton.find('FlatButton').props().title).toEqual('Logout');
+  });
+
+  it('renders a FlatButton of type submit with aria-label logout', () => {
+    expect(flatButton.find('FlatButton').props()['aria-label']).toEqual('Logout');
+  });
+
   it('renders a FlatButton with given fontIcon class', () => {
     expect(flatButton.find('FlatButton').props().icon.props.className).toEqual('fa fa-sign-out');
   });
diff --git a/web-ui/src/common/header/header.js b/web-ui/src/common/header/header.js
index ee0259d1..715d54c6 100644
--- a/web-ui/src/common/header/header.js
+++ b/web-ui/src/common/header/header.js
@@ -16,11 +16,10 @@
  */
 
 import React from 'react';
-import { translate } from 'react-i18next';
 import Logout from 'src/common/logout/logout';
 import './header.scss';
 
-export const Header = ({ t }) => (
+export const Header = () => (
   <header className='header-wrapper'>
     <div className='header-content'>
       <a href='/'>
@@ -37,8 +36,4 @@ export const Header = ({ t }) => (
   </header>
 );
 
-Header.propTypes = {
-  t: React.PropTypes.func.isRequired
-};
-
-export default translate('', { wait: true })(Header);
+export default Header;
diff --git a/web-ui/src/common/header/header.spec.js b/web-ui/src/common/header/header.spec.js
index e5004bcc..81a952c7 100644
--- a/web-ui/src/common/header/header.spec.js
+++ b/web-ui/src/common/header/header.spec.js
@@ -2,16 +2,20 @@ import { shallow } from 'enzyme';
 import expect from 'expect';
 import React from 'react';
 import { Header } from 'src/common/header/header';
+import Logout from 'src/common/logout/logout';
 
 describe('Header', () => {
   let header;
 
   beforeEach(() => {
-    const mockTranslations = key => key;
-    header = shallow(<Header t={mockTranslations} />);
+    header = shallow(<Header />);
   });
 
-  it('renders the header content', () => {
-    expect(header.find('header').text()).toContain('Logout');
+  it('renders the header containing the logout button', () => {
+    expect(header.find('header').find(Logout)).toExist();
+  });
+
+  it('renders the header pixelated logo', () => {
+    expect(header.find('header').find('img').props().alt).toEqual('Pixelated');
   });
 });