fix: focus styles adjustment for buttons, button-group and icon-button (#203)

Author: hamza14khan

src/govie/components/button-group/_index.scss

@@ -45,10 +45,16 @@ $govie-button-group-button-hover-background-colour: govie-tint(
         background-color: $govie-button-group-button-hover-background-colour;
         border-color: $govie-primary-button-background-colour;
         color: govie-colour('black');
+      }
 
-        &:not(:active):not(:hover) {
-          border-color: $govie-primary-button-background-colour;
-        }
+      // Separate selector rule to override `govie-button` original focus styles.
+      &:focus:not(:active):not(:hover) {
+        border-color: $govie-input-border-colour;
+        background-color: transparent;
+        color: $govie-primary-button-background-colour;
+        box-shadow: inset 0 0 0 $govie-border-width-form-element
+          $govie-focus-colour;
+        outline: unset;
       }
 
       &:first-of-type {
@@ -57,10 +63,10 @@ $govie-button-group-button-hover-background-colour: govie-tint(
         border-top-right-radius: 4px;
       }
 
-      &:first-of-type {
-        border-top-left-radius: 4px;
-        border-bottom-left-radius: 0;
-        border-top-right-radius: 4px;
+      &:last-of-type {
+        border-bottom-left-radius: 4px;
+        border-top-left-radius: 0;
+        border-bottom-right-radius: 4px;
       }
 
       &:not(:first-child) {
@@ -110,11 +116,13 @@ $govie-button-group-button-hover-background-colour: govie-tint(
         &:first-of-type {
           border-top-left-radius: 4px;
           border-bottom-left-radius: 4px;
+          border-top-right-radius: 0px;
         }
 
         &:last-of-type {
           border-top-right-radius: 4px;
           border-bottom-right-radius: 4px;
+          border-bottom-left-radius: 0px;
         }
 
         &:not(:first-child) {

src/govie/components/button/_index.scss

@@ -202,6 +202,7 @@ $govie-tertiary-button-text-colour: govie-colour('black') !default;
 
     &:focus:not(:active):not(:hover) {
       border-color: $govie-focus-colour;
+      outline: $govie-focus-width solid $govie-input-border-colour;
       box-shadow: 0 2px 0 transparent;
     }
 

src/govie/components/icon-button/_index.scss

@@ -110,8 +110,10 @@ $govie-icon-button-hover-background-colour: govie-colour('mid-grey') !default;
     }
 
     &:focus:not(:active):not(:hover) {
-      border-color: transparent;
-      box-shadow: none;
+      border-color: $govie-input-border-colour;
+      box-shadow: inset 0 0 0 $govie-border-width-form-element
+        $govie-focus-colour;
+      outline: unset;
     }
 
     // The following adjustments do not work for <input type="button"> as