Merge release/1.30.0 into main branch (#611)

* removing TrackedButton from export (#603)

* add aria-live to Toast (#605)

* handle setting title prop on Toast (#607)

* update focus state to Button and Select (#601)

Co-authored-by: Jason Basuil <[email protected]>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

Author: github-actions[bot]

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@user-interviews/ui-design-system",
-  "version": "1.29.2",
+  "version": "1.30.0",
   "dependencies": {
     "react-bootstrap": "^2.0.2",
     "react-router-dom": "^5.2.0",

scss/buttons.scss

@@ -20,7 +20,13 @@
 
 $primary: $ux-emerald-600;
 $danger: $ux-red;
-$warning: $ux-yellow-400; 
+$warning: $ux-yellow-400;
+
+@mixin btn-focus-outline {
+  box-shadow: none !important;
+  outline: 0.125rem solid $ux-blue-500;
+  outline-offset: 0.125rem;
+}
 
 @mixin btn-primary {
   $btn-primary-background: $primary;
@@ -48,6 +54,10 @@ $warning: $ux-yellow-400;
     $btn-primary-active-border,
     $btn-primary-active-color,
   );
+
+  &:focus, &:active {
+    @include btn-focus-outline;
+  }
 }
 
 @mixin btn-outline-primary {
@@ -77,6 +87,10 @@ $warning: $ux-yellow-400;
     background-color: $btn-outline-primary-active-background;
     border-color: $btn-outline-primary-active-border-color;
   }
+
+  &:focus, &:active {
+    @include btn-focus-outline;
+  }
 }
 
 @mixin btn-danger {
@@ -105,6 +119,10 @@ $warning: $ux-yellow-400;
     $btn-danger-active-border,
     $btn-danger-active-color,
   );
+
+  &:focus, &:active {
+    @include btn-focus-outline;
+  }
 }
 
 @mixin btn-outline-danger {
@@ -134,6 +152,10 @@ $warning: $ux-yellow-400;
     background-color: $btn-outline-danger-active-background;
     border-color: $btn-outline-danger-active-border-color;
   }
+
+  &:focus, &:active {
+    @include btn-focus-outline;
+  }
 }
 
 @mixin btn-warning {
@@ -162,6 +184,10 @@ $warning: $ux-yellow-400;
     $btn-warning-active-border,
     $btn-warning-active-color,
   );
+
+  &:focus, &:active {
+    @include btn-focus-outline;
+  }
 }
 
 @mixin btn-outline-warning {
@@ -191,6 +217,10 @@ $warning: $ux-yellow-400;
     background-color: $btn-outline-warning-active-background;
     border-color: $btn-outline-warning-active-border-color;
   }
+
+  &:focus, &:active {
+    @include btn-focus-outline;
+  }
 }
 
 @mixin btn-transparent {
@@ -223,6 +253,10 @@ $warning: $ux-yellow-400;
   &:disabled {
     color: $ux-gray-500;
   }
+
+  &:focus, &:active {
+    @include btn-focus-outline;
+  }
 }
 
 @mixin btn-outline-transparent {
@@ -252,6 +286,10 @@ $warning: $ux-yellow-400;
     background-color: $btn-outline-transparent-active-background;
     border-color: $btn-outline-transparent-active-border-color;
   }
+
+  &:focus, &:active {
+    @include btn-focus-outline;
+  }
 }
 
 @mixin btn-brand-google {
@@ -284,6 +322,10 @@ $warning: $ux-yellow-400;
   &:disabled {
     color: $ux-white;
   }
+
+  &:focus, &:active {
+    @include btn-focus-outline;
+  }
 }
 
 @mixin btn-brand-facebook {
@@ -316,6 +358,10 @@ $warning: $ux-yellow-400;
   &:disabled {
     color: $ux-white;
   }
+
+  &:focus, &:active {
+    @include btn-focus-outline;
+  }
 }
 
   @mixin btn-brand-linkedin {
@@ -348,6 +394,10 @@ $warning: $ux-yellow-400;
     &:disabled {
       color: $ux-white;
     }
+
+    &:focus, &:active {
+      @include btn-focus-outline;
+    }
   }
 
   @mixin btn-brand-twitter {
@@ -380,5 +430,9 @@ $warning: $ux-yellow-400;
     &:disabled {
       color: $ux-white;
     }
+
+    &:focus, &:active {
+      @include btn-focus-outline;
+    }
   }