Add default focus outline to buttons

We were using a focus outline on links, but weren't doing the same for
buttons. Since sometimes browsers use a default outline which is barely
visible, this was very disorienting when browsing using the keyboard; we
were navigating through links that clearly indicated where the keyboard
focus was, and when reaching a button suddenly we had this almost
imperceptible feedback. Even if I'm used to it, my first reaction is
always "where did the focus go?" until I realize it's now on a button.

This is even more confusing because we've got buttons looking like links
and links looking like buttons.

Note that in the rules for the `:focus` styles we're including buttons
and the `[type="button"]` attribute. This seems redundant since those
styles are already covered by the `button` selector. However, Foundation
adds styles to buttons with the `[type]` attribute. Since the attribute
selector has precedence over the tag selector, we need to use the
attribute selector as well in order to override Foundation's styles.

app/assets/stylesheets/admin/machine_learning/scripts.scss

@@ -49,10 +49,6 @@
     margin-bottom: 0;
     margin-top: $line-height;
 
-    &:focus {
-      outline: $outline-focus;
-    }
-
     &.cancel {
       @include hollow-button($alert-color);
     }

app/assets/stylesheets/admin/machine_learning/setting.scss

@@ -16,10 +16,6 @@
     min-width: rem-calc(100);
     position: relative;
 
-    &:focus {
-      outline: $outline-focus;
-    }
-
     &::after {
       background: $white;
       border-radius: 100%;