set tab index on buttons

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>
     );

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>
     );

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}
+      />
     );
   }
 

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}
     />
   );
 }

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>
       ];

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;