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

Author: hellobrian

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;

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>