From 5f78b6bbc4f30c118d93314a9113bb930c9ac821 Mon Sep 17 00:00:00 2001
From: Paul Salaets <psalaets@gmail.com>
Date: Sun, 27 Aug 2017 21:53:06 -0400
Subject: [PATCH] set tab index on buttons

---
 src/components/controls/Button.js             |  8 ++++++-
 .../fullscreen-button/FullscreenButton.js     |  3 ++-
 src/components/navigation/Navigation.js       | 23 ++++++++++++++++---
 src/components/navigation/NavigationButton.js |  1 +
 src/components/share-button/ShareButton.js    |  7 +++---
 src/tab-index.js                              |  7 ++++++
 6 files changed, 41 insertions(+), 8 deletions(-)
 create mode 100644 src/tab-index.js

diff --git a/src/components/controls/Button.js b/src/components/controls/Button.js
index 17a4da4..82a7d09 100644
--- a/src/components/controls/Button.js
+++ b/src/components/controls/Button.js
@@ -5,6 +5,7 @@ class Button extends Component {
   static propTypes = {
     onClick: PropTypes.func.isRequired,
     label: PropTypes.string.isRequired,
+    tabIndex: PropTypes.number.isRequired,
     animateIn: PropTypes.bool
   }
 
@@ -20,7 +21,12 @@ class Button extends Component {
 
   render() {
     return (
-      <button className={this.className()} onClick={this.handleClick} aria-label={this.props.label}>
+      <button
+        className={this.className()}
+        onClick={this.handleClick}
+        aria-label={this.props.label}
+        tabIndex={this.props.tabIndex}
+      >
         {this.props.children}
       </button>
     );
diff --git a/src/components/fullscreen-button/FullscreenButton.js b/src/components/fullscreen-button/FullscreenButton.js
index f3a1260..a24605d 100644
--- a/src/components/fullscreen-button/FullscreenButton.js
+++ b/src/components/fullscreen-button/FullscreenButton.js
@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 
+import * as tabIndex from '../../tab-index';
 import Icon from '../controls/Icon';
 import Button from '../controls/Button';
 
@@ -15,7 +16,7 @@ class FullscreenButton extends Component {
     const icon = this.renderIcon();
 
     return (
-      <Button label={this.label()} onClick={this.handleClick}>
+      <Button label={this.label()} onClick={this.handleClick} tabIndex={tabIndex.fullscreenButton}>
         {icon}
       </Button>
     );
diff --git a/src/components/navigation/Navigation.js b/src/components/navigation/Navigation.js
index 284df43..e01e7f5 100644
--- a/src/components/navigation/Navigation.js
+++ b/src/components/navigation/Navigation.js
@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import Swipeable from 'react-swipeable';
+import * as tabIndex from '../../tab-index';
 
 import NavigationButton from './NavigationButton';
 import './Navigation.css';
@@ -55,19 +56,35 @@ class Navigation extends Component {
 
   renderLeft() {
     return (
-      <NavigationButton key="left" onClick={this.handleSecondaryClick} label="Go to previous page" />
+      <NavigationButton
+        key="left"
+        onClick={this.handleSecondaryClick}
+        label="Go to previous page"
+        tabIndex={tabIndex.previousPageButton}
+      />
     );
   }
 
   renderCenter() {
     return (
-      <NavigationButton key="center" type="center" onClick={this.handleTertiaryClick} label="Toggle controls" />
+      <NavigationButton
+        key="center"
+        type="center"
+        onClick={this.handleTertiaryClick}
+        label="Toggle controls"
+        tabIndex={tabIndex.controlsButton}
+      />
     );
   }
 
   renderRight() {
     return (
-      <NavigationButton key="right" onClick={this.handlePrimaryClick} label="Go to next page" />
+      <NavigationButton
+        key="right"
+        onClick={this.handlePrimaryClick}
+        label="Go to next page"
+        tabIndex={tabIndex.nextPageButton}
+      />
     );
   }
 
diff --git a/src/components/navigation/NavigationButton.js b/src/components/navigation/NavigationButton.js
index a41a028..4f2367d 100644
--- a/src/components/navigation/NavigationButton.js
+++ b/src/components/navigation/NavigationButton.js
@@ -11,6 +11,7 @@ export default function NavigationButton(props) {
       onClick={props.onClick}
       role="button"
       aria-label={props.label}
+      tabIndex={props.tabIndex}
     />
   );
 }
diff --git a/src/components/share-button/ShareButton.js b/src/components/share-button/ShareButton.js
index 2c1ea1c..2a0f488 100644
--- a/src/components/share-button/ShareButton.js
+++ b/src/components/share-button/ShareButton.js
@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 
+import * as tabIndex from '../../tab-index';
 import Icon from '../controls/Icon';
 import Button from '../controls/Button';
 
@@ -25,7 +26,7 @@ class ShareButton extends Component {
   render() {
     return (
       <span>
-        <Button onClick={this.handleClick} label={this.label()}>
+        <Button onClick={this.handleClick} label={this.label()} tabIndex={tabIndex.shareButton}>
           <Icon type="share" />
         </Button>
         {this.renderSocialMediaButtons()}
@@ -44,10 +45,10 @@ class ShareButton extends Component {
   renderSocialMediaButtons() {
     if (this.state.open) {
       return [
-        <Button key="facebook" label="Share on Facebook" onClick={this.handleFacebookClick} animateIn={true}>
+        <Button key="facebook" label="Share on Facebook" onClick={this.handleFacebookClick} animateIn={true} tabIndex={tabIndex.facebookButton}>
           <Icon type="facebook" />
         </Button>,
-        <Button key="twitter" label="Share on Twitter" onClick={this.handleTwitterClick} animateIn={true}>
+        <Button key="twitter" label="Share on Twitter" onClick={this.handleTwitterClick} animateIn={true} tabIndex={tabIndex.twitterButton}>
           <Icon type="twitter" />
         </Button>
       ];
diff --git a/src/tab-index.js b/src/tab-index.js
new file mode 100644
index 0000000..db37d7e
--- /dev/null
+++ b/src/tab-index.js
@@ -0,0 +1,7 @@
+export const nextPageButton = 0;
+export const previousPageButton = 10;
+export const controlsButton = 20;
+export const fullscreenButton = 30;
+export const shareButton = 40;
+export const facebookButton = 41;
+export const twitterButton = 42;