LG-4226: Fix double focus ring (#190)

This pull request seeks to resolve an issue where focused buttons appear with two focus rings. The button styles included in the design system intend to unset the inherited focus styles from USWDS, but are not of high enough specificity to override the styles.

Reference: https://github.com/uswds/uswds/blob/1f9bb1cc/src/stylesheets/global/_focus.scss#L1-L11

CHANGELOG.md

@@ -1,3 +1,9 @@
+## Unreleased
+
+### Bug Fixes
+
+- Fix an issue where focused buttons appear with a double focus ring style.
+
 ## 4.0.0
 
 ### Breaking Changes

src/scss/components/_buttons.scss

@@ -17,8 +17,8 @@
     color: color('white');
   }
 
-  &:focus,
-  &.usa--focus {
+  &:not([disabled]):focus,
+  &:not([disabled]).usa-focus {
     outline-offset: units(0.5);
   }
 
@@ -27,8 +27,8 @@
   }
 }
 
-.usa-button:focus,
-.usa-button.usa-focus {
+.usa-button:not([disabled]):focus,
+.usa-button:not([disabled]).usa-focus {
   @include disable-default-focus-styles;
   box-shadow: roundable-focus-outline-box-shadows();
 }
@@ -43,8 +43,8 @@
     color: color('primary');
   }
 
-  &:focus,
-  &.usa-focus {
+  &:not([disabled]):focus,
+  &:not([disabled]).usa-focus {
     box-shadow: $button-stroke color('primary'), roundable-focus-outline-box-shadows();
   }
 
@@ -224,4 +224,4 @@
     color: color('primary');
     text-decoration: none;
   }
-}
+}