From d45ef53efdbecdc3a18bb8e3d82d4e7965d12b36 Mon Sep 17 00:00:00 2001
From: Eliseu Amaro <mail@eliseuama.ro>
Date: Sun, 25 Jul 2021 00:14:18 +0100
Subject: [PATCH] [CSS][TWIG] Left panel HTML nesting to better aid screen
 readers.

Signed-off-by: Eliseu Amaro <mail@eliseuama.ro>
---
 public/assets/css/left/left.css         |  5 ++++
 templates/sidepanel/left/left.html.twig | 36 +++++++++++++++----------
 2 files changed, 27 insertions(+), 14 deletions(-)

diff --git a/public/assets/css/left/left.css b/public/assets/css/left/left.css
index 7fbd2ab300..58b2a342dc 100644
--- a/public/assets/css/left/left.css
+++ b/public/assets/css/left/left.css
@@ -29,6 +29,11 @@
     font-family: var(--display-font);
 }
 
+.profile-nav nav {
+    display: flex;
+    flex-direction: column;
+}
+
 .profile {
     margin-bottom: var(--main-size);
 
diff --git a/templates/sidepanel/left/left.html.twig b/templates/sidepanel/left/left.html.twig
index 3281251626..f10e38cdd3 100644
--- a/templates/sidepanel/left/left.html.twig
+++ b/templates/sidepanel/left/left.html.twig
@@ -28,26 +28,34 @@
                     </div>
                 </a>
             </div>
-            <a href='#'>Messages</a>
-            <a href="{{ path("replies", {'nickname' : user_nickname}) }}"
-               class='hover-effect {{ active("replies") }}'>Replies</a>
-            {% for link in handle_event('InsertLeftPanelLink', user_nickname) %}
-                {{ link | raw }}
-            {% endfor %}
-            <a href="{{ path('settings_personal_info') }}"
-               class='hover-effect {{ active('settings_') }}'>Settings</a>
-            <a href='{{ path('logout') }}'>Logout</a>
-            </ul>
+
+            <nav>
+                <a href='#'>Messages</a>
+                <a href="{{ path("replies", {'nickname' : user_nickname}) }}"
+                   class='hover-effect {{ active("replies") }}'>Replies</a>
+                {% for link in handle_event('InsertLeftPanelLink', user_nickname) %}
+                    {{ link | raw }}
+                {% endfor %}
+                <a href="{{ path('settings_personal_info') }}"
+                   class='hover-effect {{ active('settings_') }}'>Settings</a>
+                <a href='{{ path('logout') }}'>Logout</a>
+            </nav>
+
         {% else %}
             <div class="profile">
-                <a href="{{ path('login') }}" class='hover-effect {{ active('login') }}'>Login</a>
-                <a href="{{ path('register') }}">Register</a>
+                <nav>
+                    <a href="{{ path('login') }}" class='hover-effect {{ active('login') }}'>Login</a>
+                    <a href="{{ path('register') }}">Register</a>
+                </nav>
             </div>
         {% endif %}
 
         <div class="timeline-nav">
-            <a href="{{ path('main_public') }}"
-               class='{{ active('main_public', 'main_all', "home_all") }}'>Timeline</a>
+            <h1>
+                <a href="{{ path('main_public') }}"
+                   class='{{ active('main_public', 'main_all', "home_all") }}'>Timeline</a>
+            </h1>
+
             <hr>
 
             <nav class='sec-nav'>