From 3c1a9ba3fa4d53cacd7a6c2f22cfe4ae31f615b7 Mon Sep 17 00:00:00 2001
From: Eliseu Amaro <mail@eliseuama.ro>
Date: Tue, 7 Sep 2021 16:27:23 +0100
Subject: [PATCH] [CSS] Fixed tabbing through accessibility menu. Was invisible
 when going throught it without a previous target.

---
 public/assets/css/base.css              | 5 +++--
 public/assets/css/left/left.css         | 6 ++++--
 templates/sidepanel/left/left.html.twig | 6 +++---
 3 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/public/assets/css/base.css b/public/assets/css/base.css
index 723625cac4..0250ad4cb2 100644
--- a/public/assets/css/base.css
+++ b/public/assets/css/base.css
@@ -580,8 +580,9 @@ input[type=file] {
     list-style-type: disc;
 }
 
-#anchor-menu:target + .accessibility-menu,
-.accessibility-menu:focus {
+#anchor-menu:target ~ .accessibility-menu,
+.accessibility-menu:focus-within,
+.accessibility-menu a:focus {
     top: var(--unit-size) !important;
     left: var(--unit-size) !important;
     width: 30% !important;
diff --git a/public/assets/css/left/left.css b/public/assets/css/left/left.css
index 2b1079dd8d..9cc875c94d 100644
--- a/public/assets/css/left/left.css
+++ b/public/assets/css/left/left.css
@@ -63,8 +63,10 @@
 .timeline-nav {
     margin-bottom: var(--main-size);
 }
-.timeline-nav a,
-.timeline-nav h1 {
+#timeline-nav-header {
+    font-size: var(--main-size);
+}
+.timeline-nav a {
     display: flex;
 }
 
diff --git a/templates/sidepanel/left/left.html.twig b/templates/sidepanel/left/left.html.twig
index aefe54d374..6fbd3d2213 100644
--- a/templates/sidepanel/left/left.html.twig
+++ b/templates/sidepanel/left/left.html.twig
@@ -52,10 +52,10 @@
             </nav>
         {% endif %}
 
-        <div class="timeline-nav" title="Navigate through different timelines.">
-            <h1 role="tab">Timeline</h1>
+        <div class="timeline-nav">
+            <strong id="timeline-nav-header">Timeline</strong>
 
-            <nav class='sec-nav' role="navigation">
+            <nav class='sec-nav' role="navigation" title="{{ 'Navigate through the different timelines.' | trans }}">
                 <ul>
                     <li>
                         <a href="{{ path('main_public') }}"