From ac54de58ef888710800fa84f044196d0515ded66 Mon Sep 17 00:00:00 2001
From: Brian Han <hellobrian@users.noreply.github.com>
Date: Wed, 6 Sep 2017 14:28:00 -0500
Subject: [PATCH] fix(number-input): use button for keyboard a11y (#275)

* fix(a11y): number-input uses button

* fix(number-input): re-add styles for old HTML w/o buttons

* fix(number-input): make focus-outline look better
---
 .../number-input/_number-input.scss           | 27 ++++++++++++++++---
 src/components/number-input/number-input.html | 16 ++++++-----
 2 files changed, 33 insertions(+), 10 deletions(-)

diff --git a/src/components/number-input/_number-input.scss b/src/components/number-input/_number-input.scss
index aae3851a6544..b545dc9860ee 100644
--- a/src/components/number-input/_number-input.scss
+++ b/src/components/number-input/_number-input.scss
@@ -54,13 +54,32 @@
     align-items: center;
   }
 
-  .bx--number__controls .up-icon,
-  .bx--number__controls .down-icon {
+  .bx--number__control-btn {
+    @include button-reset;
+    position: relative;
+    bottom: 0;
+    width: rem(20px);
+    height: rem(10px);
+
+    &:focus {
+      @include focus-outline;
+    }
+
+    &:hover {
+      cursor: pointer;
+    }
+
+    &:hover svg {
+      fill: $brand-02;
+    }
+  }
+
+  .bx--number__controls svg {
     fill: $brand-01;
     width: rem(9px);
-    height: rem(20px);
-    position: relative;
+    height: rem(9px);
 
+    // Hover styles for use with old HTML w/o button
     &:hover {
       cursor: pointer;
       fill: $brand-02;
diff --git a/src/components/number-input/number-input.html b/src/components/number-input/number-input.html
index 357a2a90a43b..b286aef3769e 100644
--- a/src/components/number-input/number-input.html
+++ b/src/components/number-input/number-input.html
@@ -3,12 +3,16 @@
   <div data-numberinput class="bx--number">
     <input id="number-input" type="number" min="0" max="100" value="1">
     <div class="bx--number__controls">
-      <svg class="up-icon" viewBox="0 -6 10 5" width="10" height="5" fill-rule="evenodd">
-        <path d="M10 5L5 0 0 5z"></path>
-      </svg>
-      <svg class="down-icon" viewBox="0 6 10 5" width="10" height="5" fill-rule="evenodd">
-        <path d="M10 0L5 5 0 0z"></path>
-      </svg>
+      <button class="bx--number__control-btn up-icon">
+        <svg viewBox="0 2 10 5" width="10" height="5" fill-rule="evenodd">
+          <path d="M10 5L5 0 0 5z"></path>
+        </svg>
+      </button>
+      <button class="bx--number__control-btn down-icon">
+        <svg viewBox="0 2 10 5" width="10" height="5" fill-rule="evenodd">
+          <path d="M10 0L5 5 0 0z"></path>
+        </svg>
+      </button>
     </div>
   </div>
 </div>