improve a11y on some buttons

src/components/controls/Button.js

@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 class Button extends Component {
   static propTypes = {
     onClick: PropTypes.func.isRequired,
+    label: PropTypes.string.isRequired,
     animateIn: PropTypes.bool
   }
 
@@ -19,7 +20,7 @@ class Button extends Component {
 
   render() {
     return (
-      <button className={this.className()} onClick={this.handleClick}>
+      <button className={this.className()} onClick={this.handleClick} aria-label={this.props.label}>
         {this.props.children}
       </button>
     );

src/components/fullscreen-button/FullscreenButton.js

@@ -15,12 +15,20 @@ class FullscreenButton extends Component {
     const icon = this.renderIcon();
 
     return (
-      <Button aria-label="fullscreen" onClick={this.handleClick}>
+      <Button label={this.label()} onClick={this.handleClick}>
         {icon}
       </Button>
     );
   }
 
+  label() {
+    if (this.props.isFullscreen) {
+      return 'Exit fullscreen';
+    } else {
+      return 'Enter fullscreen';
+    }
+  }
+
   renderIcon() {
     if (this.props.isFullscreen) {
       return <Icon type="exit-fullscreen" />;

src/components/navigation/Navigation.js

@@ -55,19 +55,19 @@ class Navigation extends Component {
 
   renderLeft() {
     return (
-      <NavigationButton key="left" onClick={this.handleSecondaryClick} />
+      <NavigationButton key="left" onClick={this.handleSecondaryClick} label="Go to previous page" />
     );
   }
 
   renderCenter() {
     return (
-      <NavigationButton key="center" type="center" onClick={this.handleTertiaryClick} />
+      <NavigationButton key="center" type="center" onClick={this.handleTertiaryClick} label="Toggle controls" />
     );
   }
 
   renderRight() {
     return (
-      <NavigationButton key="right" onClick={this.handlePrimaryClick} />
+      <NavigationButton key="right" onClick={this.handlePrimaryClick} label="Go to next page" />
     );
   }
 

src/components/navigation/NavigationButton.js

@@ -1,7 +1,16 @@
 import React from 'react';
 
 export default function NavigationButton(props) {
-  const className = (props.type === 'center') ? 'lb-c-navigation__button lb-c-navigation__button--center': 'lb-c-navigation__button';
+  const className = props.type === 'center'
+    ? 'lb-c-navigation__button lb-c-navigation__button--center'
+    : 'lb-c-navigation__button';
 
-  return <div className={className} onClick={props.onClick} />;
+  return (
+    <div
+      className={className}
+      onClick={props.onClick}
+      role="button"
+      aria-label={props.label}
+    />
+  );
 }

src/components/share-button/ShareButton.js

@@ -25,21 +25,29 @@ class ShareButton extends Component {
   render() {
     return (
       <span>
-        <Button onClick={this.handleClick}>
+        <Button onClick={this.handleClick} label={this.label()}>
           <Icon type="share" />
         </Button>
         {this.renderSocialMediaButtons()}
       </span>
     );
   }
 
+  label() {
+    if (this.state.open) {
+      return 'Hide share options';
+    } else {
+      return 'Show share options';
+    }
+  }
+
   renderSocialMediaButtons() {
     if (this.state.open) {
       return [
-        <Button key="facebook" onClick={this.handleFacebookClick} animateIn={true}>
+        <Button key="facebook" label="Share on Facebook" onClick={this.handleFacebookClick} animateIn={true}>
           <Icon type="facebook" />
         </Button>,
-        <Button key="twitter" onClick={this.handleTwitterClick} animateIn={true}>
+        <Button key="twitter" label="Share on Twitter" onClick={this.handleTwitterClick} animateIn={true}>
           <Icon type="twitter" />
         </Button>
       ];