[UI] Accessibility improvements all around

public/assets/css/base.css

@@ -41,13 +41,20 @@ a:link {
       outline: 0;
       color: #F6F6F6;
 }
-
 a:visited {
       outline: 0;
       color: #F6F6F6;
       margin: 0;
       padding: 0;
 }
+a:hover {
+      color: #F6F6F6;
+      transition: all 0.8s ease;
+}
+a:focus {
+      color: #F6F6F6;
+      transition: all 0.8s ease;
+}
 
 b {
       font-family: var(--head-font);

public/assets/css/base_mid.css

@@ -43,13 +43,16 @@ a:link {
       margin: 0;
       padding: 0;
 }
-
 a:visited {
       outline: 0;
       color: #F6F6F6;
       margin: 0;
       padding: 0;
 }
+a:focus {
+      color: #F6F6F6;
+      transition: all 0.8s ease;
+}
 
 b {
       font-family: var(--head-font);

public/assets/css/base_small.css

@@ -43,13 +43,16 @@ a:link {
       margin: 0;
       padding: 0;
 }
-
 a:visited {
       outline: 0;
       color: #F6F6F6;
       margin: 0;
       padding: 0;
 }
+a:focus {
+      color: #F6F6F6;
+      transition: all 0.8s ease;
+}
 
 b {
       font-family: var(--head-font);

public/assets/css/doc/doc.css

@@ -45,11 +45,14 @@
 .faq-nav a {
       color: #91B9D0;
 }
-
 .faq-nav a:hover {
       color: #F6F6F6;
       transition: all 0.8s ease;
 }
+.faq-nav a:focus {
+      color: #F6F6F6;
+      transition: all 0.8s ease;
+}
 
 .markd {
       order: 2;

public/assets/css/doc/doc_mid.css

@@ -48,11 +48,14 @@
 .faq-nav a {
       color: #91B9D0;
 }
-
 .faq-nav a:hover {
       color: #F6F6F6;
       transition: all 0.8s ease;
 }
+.faq-nav a:focus {
+      color: #F6F6F6;
+      transition: all 0.8s ease;
+}
 
 .markd {
       order: 2;

public/assets/css/doc/doc_small.css

@@ -48,11 +48,14 @@
 .faq-nav a {
       color: #91B9D0;
 }
-
 .faq-nav a:hover {
       color: #F6F6F6;
       transition: all 0.8s ease;
 }
+.faq-nav a:focus {
+      color: #F6F6F6;
+      transition: all 0.8s ease;
+}
 
 .markd {
       order: 2;

public/assets/css/left/left.css

@@ -50,6 +50,10 @@
       color: #F6F6F6;
       transition: all 0.8s ease;
 }
+.navbar a:focus {
+      color: #F6F6F6;
+      transition: all 0.8s ease;
+}
 
 .icon-menu label {
       display: none;

public/assets/css/left/left_mid.css

@@ -51,6 +51,10 @@
       color: #F6F6F6;
       transition: all 0.8s ease;
 }
+.navbar a:focus {
+      color: #F6F6F6;
+      transition: all 0.8s ease;
+}
 
 .icon-menu label {
       display: block;
@@ -64,11 +68,14 @@
       opacity: 0;
 }
 .left-panel input[type=checkbox] {
-    transform: scale(2);
+    transform: scale(3);
-    -ms-transform: scale(2);
+    -ms-transform: scale(3);
-    -webkit-transform: scale(2);
+    -webkit-transform: scale(3);
     padding: 10px;
 }
+input[type="checkbox"]:focus + label {
+      border:2px solid red;
+}
 
 #toggle:checked~.navbar {
       display: flex;

public/assets/css/left/left_small.css

@@ -51,6 +51,10 @@
       color: #F6F6F6;
       transition: all 0.8s ease;
 }
+.navbar a:focus {
+      color: #F6F6F6;
+      transition: all 0.8s ease;
+}
 
 .icon-menu label {
       display: block;

templates/left/left.html.twig

@@ -10,9 +10,9 @@
 {% block left %}
     {% if app.user %}
         <div id='left-panel'>
-            <input type="checkbox" id="toggle">
+            <input type="checkbox" id="toggle" autofocus>
             <div class="icon-menu">
-                <label for="toggle" id='menu'></label>
+                <label for="toggle" id='menu' tabindex="0"></label>
             </div>
             <div class='navbar'>
                 <div class="left-nav">