Use <button> elements rather than <div>s for inner buttons in dropdown menu button

Using a <button> gives us keyboard accessibility and focus.

The downside is that additional styling is needed to suppress
default styling from the UA.

Card 89

h/static/styles/dropdown-menu-btn.scss

 // the primary action button for a form
 .dropdown-menu-btn {
+  $text-color: #f1f1f1;
   $default-background-color: #626262;
   $hover-background-color: #3A3A3A;
   $h-padding: 9px;
@@ -12,7 +13,6 @@
   border: 0px;
   border-radius: $border-radius;
 
-  color: #F1F1F1;
   font-size: $body1-font-size;
   font-weight: bold;
   height: $height;
@@ -23,12 +23,19 @@
   &__label {
     // the label occupies the entire space of the button and
     // shows a darker state on hover
+
+    width: 100%;
+    height: 100%;
+
+    color: $text-color;
     background-color: transparent;
     border-radius: $border-radius;
+    border: none;
     line-height: $height;
     padding-left: $h-padding;
     padding-right: $arrow-indicator-width + 8px;
-    height: 100%;
+
+    text-align: left;
     vertical-align: middle;
 
     &:hover {
@@ -49,12 +56,25 @@
 
     height: 100%;
     width: $arrow-indicator-width;
+    padding-left: 0px;
     padding-right: $h-padding;
     margin-left: 8px;
 
+    border: none;
+    background-color: transparent;
     border-top-right-radius: $border-radius;
     border-bottom-right-radius: $border-radius;
 
+    &:hover {
+      background-color: #3A3A3A;
+    }
+
+    &:hover &-separator {
+      // hide the 1px vertical separator when the dropdown arrow
+      // is hovered
+      background-color: transparent;
+    }
+
     // 1px vertical separator between label and dropdown arrow
     &-separator {
       position: absolute;
@@ -65,11 +85,13 @@
 
       width: 1px;
       height: 15px;
+
       background-color: #818181;
     }
 
     // the ▼ arrow which reveals the dropdown menu when clicked
     &-indicator {
+      color: $text-color;
       position: absolute;
       left: 0px;
       right: 0px;
@@ -78,11 +100,6 @@
       line-height: $height;
       text-align: center;
 
-      &:hover {
-        background-color: #3A3A3A;
-        border-top-right-radius: $border-radius;
-        border-bottom-right-radius: $border-radius;
-      }
 
       & > div {
         transform: scaleY(0.7);

h/templates/client/dropdown_menu_btn.html

@@ -3,8 +3,8 @@
   in Firefox. See https://bugzilla.mozilla.org/show_bug.cgi?id=843003
 !-->
 <div aria-role="button" tabindex="0" class="dropdown-menu-btn">
-  <div class="dropdown-menu-btn__label" ng-bind="label"></div>
-  <div
+  <button class="dropdown-menu-btn__label" ng-bind="label"></button>
+  <button
     class="dropdown-menu-btn__dropdown-arrow"
     title="{{dropdownMenuLabel}}"
     ng-click="vm.toggleDropdown($event)">
@@ -12,5 +12,5 @@
     <div class="dropdown-menu-btn__dropdown-arrow-indicator">
       <div>▼</div>
     </div>
-  </div>
+  </button>
 </div>