Feature/tabs a11y (#1513)

* Update tabs for a11y

* Use transition for background and set a11y for tab content

* Remove unneccessary tabIndex from tab content

* Fix lint issues

components/tabs/Tab.js

@@ -65,7 +65,7 @@ const factory = (ripple, FontIcon) => {
       }, className);
 
       return (
-        <div {...other} data-react-toolbox="tab" className={_className} onClick={this.handleClick}>
+        <div {...other} data-react-toolbox="tab" role="tab" tabIndex="0" className={_className} onClick={this.handleClick}>
           {icon && <FontIcon className={theme.icon} value={icon} />}
           {label}
           {children}

components/tabs/TabContent.js

@@ -9,7 +9,7 @@ class TabContent extends Component {
     active: PropTypes.bool,
     children: PropTypes.node,
     className: PropTypes.string,
-    tabIndex: PropTypes.number,
+    hidden: PropTypes.bool,
     theme: PropTypes.shape({
       active: PropTypes.string,
       tab: PropTypes.string,
@@ -19,6 +19,7 @@ class TabContent extends Component {
   static defaultProps = {
     active: false,
     className: '',
+    hidden: true,
   };
 
   render() {
@@ -27,7 +28,7 @@ class TabContent extends Component {
     }, this.props.className);
 
     return (
-      <section className={className} tabIndex={this.props.tabIndex}>
+      <section className={className} role="tabpanel" aria-expanded={this.props.hidden}>
         {this.props.children}
       </section>
     );

components/tabs/Tabs.js

@@ -198,10 +198,10 @@ const factory = (Tab, TabContent, FontIcon) => {
             {hasLeftArrow && <div className={theme.arrowContainer} onClick={this.scrollRight}>
               <FontIcon className={theme.arrow} value="keyboard_arrow_left" />
             </div>}
-            <nav className={theme.navigation} ref={(node) => { this.navigationNode = node; }}>
+            <div className={theme.navigation} role="tablist" ref={(node) => { this.navigationNode = node; }}>
               {this.renderHeaders(headers)}
               <span className={classNamePointer} style={this.state.pointer} />
-            </nav>
+            </div>
             {hasRightArrow && <div className={theme.arrowContainer} onClick={this.scrollLeft}>
               <FontIcon className={theme.arrow} value="keyboard_arrow_right" />
             </div>}

components/tabs/config.css

@@ -9,6 +9,7 @@
   --tab-navigation-border-color: var(--color-divider);
   --tab-pointer-color: var(--color-primary);
   --tab-pointer-height: calc(0.2 * var(--unit));
+  --tab-focus-color: color(var(--color-primary-contrast) a(10%));
   --tab-text: var(--color-black);
   --tab-text-color: var(--tab-text);
   --tab-text-inactive-color: color(var(--tab-text) a(70%));

components/tabs/theme.css

@@ -46,9 +46,14 @@
   position: relative;
   text-transform: uppercase;
   transition-duration: var(--animation-duration);
-  transition-property: box-shadow, color;
+  transition-property: background-color, box-shadow, color;
   transition-timing-function: var(--animation-curve-default);
 
+  &:focus {
+    background-color: var(--tab-focus-color);
+    outline: none;
+  }
+
   & > .rippleWrapper {
     overflow: hidden;
   }