[CSS] Fixed accessibility issues with header and panel elements. Left, instance and right elements are now properly ordered when focused.

Signed-off-by: Eliseu Amaro <mail@eliseuama.ro>

public/assets/css/base.css

@@ -97,9 +97,9 @@ a:visited {
     margin: 0;
     padding: 0;
 }
+
 a:focus,
-a:hover,
-a:active {
+a:hover {
     border-radius: var(--unit-size);
     padding: 0 var(--unit-size) 0 var(--unit-size);
     background: var(--white);
@@ -107,6 +107,20 @@ a:active {
     transition: all 0.8s ease;
 }
 
+#instance a:focus svg,
+#instance a:hover svg {
+    fill: var(--bg1);
+    transition: all 0.8s ease;
+}
+
+summary:hover > *,
+summary:focus > * {
+    border-radius: var(--unit-size);
+    background: var(--white);
+    fill: var(--bg1);
+    transition: all 0.8s ease;
+}
+
 hr {
     all: unset;
     display: block;

public/assets/css/left/left.css

@@ -21,6 +21,10 @@
     opacity: 100%;
 }
 
+#left-container[open] a {
+    tab-index: 0;
+}
+
 #left-container[open] {
     width: calc(100vw / 4);
     border-right: solid 1px var(--bg2);

templates/base.html.twig

@@ -31,7 +31,7 @@
     {% block header %}
         <div id='header'>
             <nav id='instance'>
-            <a href="{{ path('main_public') }}">
+                <a href="{{ path('main_public') }}" tabindex="2">
                     {{ icon('logo', 'icon icon-logo') | raw }}
                     <h1> {{ config('site', 'name') }} </h1>
                 </a>
@@ -41,7 +41,7 @@
 
     <div class="container">
         <details class="panel" id="left-container">
-            <summary>
+            <summary tabindex="1">
                 {{ icon('person', 'icon icon-left') | raw }}
             </summary>
             {{ block("leftpanel", "stdgrid.html.twig") }}
@@ -52,7 +52,7 @@
         {% block javascripts %}{% endblock javascripts %}
 
         <details class="panel" id="right-container">
-            <summary>
+            <summary tabindex="3">
                 {{ icon('notes', 'icon icon-right') | raw }}
             </summary>
             {{ block("rightpanel", "stdgrid.html.twig") }}