From 1ffd4d3eba258949ee946b11576cad8f20be0cd3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?F=C3=A9lix=20Zapata?= <fzberlinches@gmail.com>
Date: Wed, 11 Jan 2017 19:26:26 +0100
Subject: [PATCH 1/4] Add title to the GitHub Icon

---
 spec/components/github_icon.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/spec/components/github_icon.js b/spec/components/github_icon.js
index 1dfd508e..30daf8df 100644
--- a/spec/components/github_icon.js
+++ b/spec/components/github_icon.js
@@ -1,7 +1,8 @@
 import React from 'react';
 
 const GithubIcon = () => (
-  <svg viewBox="0 0 284 277">
+  <svg viewBox="0 0 284 277" aria-labelledby="title">
+    <title id="title">GitHub Icon</title>
     <g><path d="M141.888675,0.0234927555 C63.5359948,0.0234927555 0,63.5477395 0,141.912168 C0,204.6023 40.6554239,257.788232 97.0321356,276.549924 C104.12328,277.86336 106.726656,273.471926 106.726656,269.724287 C106.726656,266.340838 106.595077,255.16371 106.533987,243.307542 C67.0604204,251.890693 58.7310279,226.56652 58.7310279,226.56652 C52.2766299,210.166193 42.9768456,205.805304 42.9768456,205.805304 C30.1032937,196.998939 43.9472374,197.17986 43.9472374,197.17986 C58.1953153,198.180797 65.6976425,211.801527 65.6976425,211.801527 C78.35268,233.493192 98.8906827,227.222064 106.987463,223.596605 C108.260955,214.426049 111.938106,208.166669 115.995895,204.623447 C84.4804813,201.035582 51.3508808,188.869264 51.3508808,134.501475 C51.3508808,119.01045 56.8936274,106.353063 65.9701981,96.4165325 C64.4969882,92.842765 59.6403297,78.411417 67.3447241,58.8673023 C67.3447241,58.8673023 79.2596322,55.0538738 106.374213,73.4114319 C117.692318,70.2676443 129.83044,68.6910512 141.888675,68.63701 C153.94691,68.6910512 166.09443,70.2676443 177.433682,73.4114319 C204.515368,55.0538738 216.413829,58.8673023 216.413829,58.8673023 C224.13702,78.411417 219.278012,92.842765 217.804802,96.4165325 C226.902519,106.353063 232.407672,119.01045 232.407672,134.501475 C232.407672,188.998493 199.214632,200.997988 167.619331,204.510665 C172.708602,208.913848 177.243363,217.54869 177.243363,230.786433 C177.243363,249.771339 177.078889,265.050898 177.078889,269.724287 C177.078889,273.500121 179.632923,277.92445 186.825101,276.531127 C243.171268,257.748288 283.775,204.581154 283.775,141.912168 C283.775,63.5477395 220.248404,0.0234927555 141.888675,0.0234927555" /></g>
   </svg>
 );

From 9ef720904ffe4eeec6adccd84480e55ee123f2f9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jesper=20H=C3=A5kansson?= <jesper@jesperh.se>
Date: Wed, 11 Jan 2017 19:31:41 +0100
Subject: [PATCH 2/4] Allow null children in List

* fix: Allow null children in list

* style: Fix lint issues
---
 components/list/List.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/components/list/List.js b/components/list/List.js
index f7b46517..9067d0c2 100644
--- a/components/list/List.js
+++ b/components/list/List.js
@@ -30,7 +30,9 @@ const factory = (ListItem) => {
 
     renderItems () {
       return React.Children.map(this.props.children, (item) => {
-        if (item.type === ListItem) {
+        if (item === null || item === undefined) {
+          return item;
+        } else if (item.type === ListItem) {
           const selectable = mergeProp('selectable', item.props, this.props);
           const ripple = mergeProp('ripple', item.props, this.props);
           return React.cloneElement(item, { selectable, ripple });

From 78895c0e1807997dc6369ee3f74f8e3f6773d0c6 Mon Sep 17 00:00:00 2001
From: Raul Matei <raulmatei@gmail.com>
Date: Wed, 11 Jan 2017 20:45:46 +0200
Subject: [PATCH 3/4] Fix right arrow appearing when window is re-sized

---
 components/tabs/Tabs.js | 22 ++++++++++++++--------
 1 file changed, 14 insertions(+), 8 deletions(-)

diff --git a/components/tabs/Tabs.js b/components/tabs/Tabs.js
index 0172b2da..1653aa16 100644
--- a/components/tabs/Tabs.js
+++ b/components/tabs/Tabs.js
@@ -86,14 +86,20 @@ const factory = (Tab, TabContent, FontIcon) => {
     }
 
     updateArrows = () => {
-      const nav = this.navigationNode;
-      this.setState({
-        arrows: {
-          left: nav.scrollLeft > 0,
-          right: nav.scrollWidth > nav.clientWidth
-            && (nav.scrollLeft + nav.clientWidth) < nav.scrollWidth
-        }
-      });
+      const idx = this.navigationNode.children.length - 2;
+
+      if (idx >= 0) {
+        const scrollLeft = this.navigationNode.scrollLeft;
+        const nav = this.navigationNode.getBoundingClientRect();
+        const lastLabel = this.navigationNode.children[idx].getBoundingClientRect();
+
+        this.setState({
+          arrows: {
+            left: scrollLeft > 0,
+            right: nav.right < (lastLabel.right - 5)
+          }
+        });
+      }
     }
 
     scrollNavigation = (factor) => {

From 51d58eb7a5311c819185d1b11b985e32b8145b35 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?F=C3=A9lix=20Zapata?= <fzberlinches@gmail.com>
Date: Wed, 11 Jan 2017 19:51:02 +0100
Subject: [PATCH 4/4] Alternative text for the FontIcon

* refactor(FontIcon): remove unused attribute

* feat(a11y): set aria-label attribute to the icon
---
 components/font_icon/FontIcon.js |  8 +++++---
 components/font_icon/readme.md   |  2 +-
 spec/components/font_icon.js     | 10 +++++-----
 3 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/components/font_icon/FontIcon.js b/components/font_icon/FontIcon.js
index 29fa06f2..08183ea8 100644
--- a/components/font_icon/FontIcon.js
+++ b/components/font_icon/FontIcon.js
@@ -1,18 +1,19 @@
 import React, { PropTypes } from 'react';
 import classnames from 'classnames';
 
-const FontIcon = ({ children, className, value, ...other}) => (
+const FontIcon = ({ alt, children, className, value, ...other}) => (
   <span
     data-react-toolbox='font-icon'
+    aria-label={alt}
     className={classnames({'material-icons': typeof value === 'string' || typeof children === 'string'}, className)}
     {...other}
   >
-    {value}
-    {children}
+    <span aria-hidden="true">{value}</span>
   </span>
 );
 
 FontIcon.propTypes = {
+  alt: PropTypes.string,
   children: PropTypes.any,
   className: PropTypes.string,
   value: PropTypes.oneOfType([
@@ -22,6 +23,7 @@ FontIcon.propTypes = {
 };
 
 FontIcon.defaultProps = {
+  alt: '',
   className: ''
 };
 
diff --git a/components/font_icon/readme.md b/components/font_icon/readme.md
index 3ceb3ea1..4b0fee55 100644
--- a/components/font_icon/readme.md
+++ b/components/font_icon/readme.md
@@ -20,6 +20,6 @@ const FontIcons = () => (
 
 | Name            | Type                    | Default         | Description|
 |:-----|:-----|:-----|:-----|
-| `children`      | `String`                |                 | The key string for the icon you want to be displayed.|
+| `alt`     | `String`                | `''`            | The text used to set the `aria-label` attribute. 
 | `className`     | `String`                | `''`            | The class name to give custom styles such as sizing.|
 | `value`         | `String` or `Element`   |                 | The key string for the icon you want be displayed.|
diff --git a/spec/components/font_icon.js b/spec/components/font_icon.js
index 49dc010e..1226e4d8 100644
--- a/spec/components/font_icon.js
+++ b/spec/components/font_icon.js
@@ -6,11 +6,11 @@ const FontIconTest = () => (
     <h5>Font Icons</h5>
     <p>lorem ipsum...</p>
 
-    <FontIcon value="add"/>
-    <FontIcon value="access_alarm"/>
-    <FontIcon value="explore"/>
-    <FontIcon value="zoom_in"/>
-    <FontIcon>input</FontIcon>
+    <FontIcon value="add" alt="add icon" />
+    <FontIcon value="access_alarm" />
+    <FontIcon value="explore" alt="explore icon" />
+    <FontIcon value="zoom_in" alt="zoom icon" />
+    <FontIcon alt="input icon">input</FontIcon>
   </section>
 );