[CSS] Fixed tabbing through accessibility menu. Was invisible when going throught it without a previous target.

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;

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;
 }
 

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') }}"