✨ Improve dashboard accessibility

frontend/resources/styles/main/partials/dashboard-grid.scss

@@ -9,6 +9,7 @@
   height: 100%;
   overflow: hidden;
   overflow-y: auto;
+  margin-bottom: 0;
 
   .grid-row {
     display: grid;
@@ -26,6 +27,9 @@
     margin: $size-3 $size-4 $size-4 $size-2;
     position: relative;
     text-align: center;
+    a {
+      width: 100%;
+    }
     @media #{$bp-max-1366} {
       height: 200px;
       flex: 1 0 230px;
@@ -193,13 +197,15 @@
     &.project-th {
       background-color: $color-white;
 
-      &:hover {
+      &:hover,
+      &:focus,
+      &:focus-within {
         .project-th-actions {
           opacity: 1;
         }
       }
 
-      &.selected {
+      .selected {
         .grid-item-th {
           border: 2px solid $color-primary;
         }
@@ -241,7 +247,8 @@
               width: 18px;
             }
 
-            &:hover {
+            &:hover,
+            &:focus {
               > svg {
                 fill: $color-primary-dark;
               }
@@ -312,7 +319,7 @@
     background-repeat: no-repeat;
     border-top-left-radius: $br-small;
     border-top-right-radius: $br-small;
-    height: 70%;
+    height: 230px;
     max-height: 160px;
     overflow: hidden;
     position: relative;
@@ -430,6 +437,7 @@
   background-color: rgba(227, 227, 227, 0.3);
   padding: 13px;
   margin-right: 13px;
+  height: 230px;
   &.loader {
     justify-items: center;
   }

frontend/resources/styles/main/partials/dashboard-header.scss

@@ -75,6 +75,7 @@
   .dashboard-title {
     display: flex;
     align-items: center;
+    margin-left: 13px;
 
     h1 {
       color: $color-black;
@@ -83,7 +84,6 @@
       font-size: $fs22;
       font-weight: 600;
       z-index: 10;
-      margin-left: 13px;
     }
 
     .context-menu.is-open {

frontend/resources/styles/main/partials/dashboard-sidebar.scss

@@ -7,13 +7,10 @@
 .dashboard-sidebar {
   background-color: $color-white;
   z-index: 1;
-
-  .sidebar-inside {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    padding-top: $size-2;
-  }
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  padding-top: $size-2;
 
   .sidebar-content {
     display: flex;
@@ -67,7 +64,8 @@
       justify-content: center;
       align-items: center;
       cursor: pointer;
-
+      background-color: transparent;
+      border: none;
       svg {
         width: 15px;
         height: 13px;
@@ -78,15 +76,18 @@
     .current-team {
       cursor: pointer;
       display: flex;
+      align-items: center;
       flex-grow: 1;
       font-size: $fs14;
       padding: 0px 10px;
+      background-color: transparent;
+      border: none;
     }
 
     .team-name {
       flex-grow: 1;
       display: flex;
-      height: 48px;
+      height: 40px;
       align-items: center;
 
       &.action {
@@ -151,7 +152,7 @@
     .switch-icon {
       display: flex;
       align-items: center;
-
+      justify-content: center;
       svg {
         width: 10px;
         height: 10px;
@@ -200,6 +201,9 @@
       display: flex;
       flex-shrink: 0;
       padding: $size-2;
+      a {
+        width: 100%;
+      }
 
       svg {
         fill: $color-black;

frontend/resources/styles/main/partials/dashboard.scss

@@ -72,7 +72,7 @@
     border-radius: 8px;
     min-height: 211px;
 
-    .img {
+    .thumbnail {
       border-top-left-radius: 6px;
       border-bottom-left-radius: 6px;
       padding: 30px;
@@ -133,15 +133,10 @@
         display: none;
         width: 0;
       }
-      .text {
-        .info {
-          // font-size: $fs12;
-        }
-      }
     }
   }
   .walkthrough {
-    .img {
+    .thumbnail {
       background-image: url("/images/walkthrough-cover.png");
       background-position: center;
       background-repeat: no-repeat;
@@ -149,7 +144,7 @@
     }
   }
   .tutorial {
-    .img {
+    .thumbnail {
       background-image: url("/images/hands-on-tutorial.png");
       background-position: center;
       background-repeat: no-repeat;
@@ -258,7 +253,8 @@
     }
 
     .project-actions {
-      display: none;
+      display: flex;
+      opacity: 0;
       margin-left: $size-6;
 
       .btn-small {
@@ -273,6 +269,8 @@
       display: flex;
       align-items: center;
       margin-right: 14px;
+      background-color: transparent;
+      border: none;
       svg {
         width: 15px;
         height: 15px;
@@ -286,9 +284,12 @@
       }
     }
   }
-  &:hover {
+
+  &:hover,
+  &:focus,
+  &:focus-within {
     .project-actions {
-      display: flex;
+      opacity: 1;
     }
   }
 }
@@ -439,7 +440,8 @@
     width: 100%;
     text-align: right;
     height: 56px;
-    div {
+    button {
+      border: none;
       cursor: pointer;
       height: 58px;
       display: inline-block;
@@ -518,11 +520,13 @@
 
     .card-container {
       width: 275px;
-      height: 100%;
       margin-top: 20px;
       display: inline-block;
       text-align: center;
       vertical-align: top;
+      background-color: transparent;
+      border: none;
+      padding: 0;
     }
 
     .template-card {

frontend/resources/styles/main/partials/dropdown.scss

@@ -38,6 +38,10 @@
     &:hover {
       background-color: $color-primary-lighter;
     }
+
+    &:focus {
+      border: 1px black solid;
+    }
   }
 
   &.with-check {