Merge pull request #567 from gselderslaghs/tab-button-accessibility

accessibility(Tab & Button) implemented focus states

Author: wuda-io

sass/components/_buttons.scss

@@ -126,6 +126,10 @@
 
 //------------------ Focus
 
+.btn:focus {
+  background-color: var(--md-sys-color-primary-container);
+}
+
 .btn:focus.elevated {
   @extend .z-depth-1;
   color: var(--md-sys-color-primary);

sass/components/_tabs.scss

@@ -37,14 +37,15 @@
 
   &.tabs-fixed-width {
     display: flex;
+
     .tab {
       flex-grow: 1;
     }
   }
 
   position: relative;
   overflow-x: auto;
-  overflow-y: hidden;  
+  overflow-y: hidden;
   width: 100%;
   background-color: var(--md-sys-color-surface);
   margin: 0 auto;
@@ -55,14 +56,14 @@
     list-style-type: none;
     display: inline-block;
     text-align: center;
-    line-height: 48px;    
+    line-height: 48px;
     padding: 0;
     margin: 0;
 
     i.material-icons {
       position: relative;
-      top: 8px;      
-      vertical-align: middle;        
+      top: 8px;
+      vertical-align: middle;
     }
 
     span {
@@ -85,15 +86,22 @@
         background-color: rgba(var(--md-sys-color-primary-numeric), 0.06);
       }
 
-      &:focus,
+      &:focus {
+        background-color: var(--md-sys-color-primary-container);
+      }
+
       &.active {
         background-color: rgba(var(--md-sys-color-primary-numeric), 0.18);
+      }
+
+      &:focus,
+      &.active {
         outline: none;
       }
 
       color: var(--md-sys-color-on-surface-variant);
       display: flex;
-      flex-direction: column;  
+      flex-direction: column;
       width: 100%;
       height: 100%;
       min-height: 48px;  //needed for only-icons tabs
@@ -109,6 +117,7 @@
       &:not(:focus) {
         background-color: transparent;
       }
+
       color: var(--md-sys-color-on-surface);
       cursor: default;
       background-color: transparent;
@@ -123,19 +132,19 @@
     will-change: left, right;
     border-radius: 3px 3px 0 0;
   }
-  
-  &.tabs-horizontal .tab { 
+
+  &.tabs-horizontal .tab {
     height: 48px;
 
     a {
       display: block;
     }
-   
+
     i.material-icons {
       padding: 0 4px;
-      position: relative;      
-      top: -2px;            
-      vertical-align: middle;    
+      position: relative;
+      top: -2px;
+      vertical-align: middle;
     }
   }
 }
@@ -145,8 +154,10 @@
 @media #{$medium-and-down} {
   .tabs {
     display: flex;
+
     .tab {
       flex-grow: 1;
+
       a {
         padding: 0 12px;
       }