From c4b328c03b92d1af3166b0d2bd59e9bd58c4764a Mon Sep 17 00:00:00 2001
From: Eliseu Amaro <mail@eliseuama.ro>
Date: Tue, 7 Sep 2021 20:34:45 +0100
Subject: [PATCH] [LEFT][CSS] Fix scrolling when tabbing, navigating through
 notes is more obvious now. Timeline navigation fix for screen readers to know
 that the navigation title matters.

---
 public/assets/css/base.css              | 18 ++++++++++++++++--
 templates/note/view.html.twig           |  6 +++---
 templates/sidepanel/left/left.html.twig |  4 ++--
 3 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/public/assets/css/base.css b/public/assets/css/base.css
index ac53bb5d80..72ee066beb 100644
--- a/public/assets/css/base.css
+++ b/public/assets/css/base.css
@@ -1,3 +1,8 @@
+html * {
+    scroll-behavior: smooth;
+    scroll-margin-top: 4rem;
+}
+
 :root {
     /* FONTS */
     --main-font: 'Inter var', sans-serif;
@@ -167,7 +172,8 @@ summary:hover .icon-details-open {
 
 /* CONTAINS ALL ELEMENTS BESIDES HEADER */
 .container {
-    margin-top: 3rem;
+    position: relative;
+    top: 3rem;
     margin-left: 20%;
     margin-right: 20%;
 
@@ -285,8 +291,12 @@ summary:hover .icon-details-open {
     align-items: center;
     align-self: center;
 }
+.note-author:focus-within {
+    border: 2px solid var(--bg3);
+    transition: border ease-in-out;
+}
 
-.note-info .avatar {
+.note-author .avatar {
     width: auto;
     height: var(--medium-size);
     border-radius: var(--unit-size);
@@ -350,6 +360,10 @@ summary:hover .icon-details-open {
 
     padding: var(--small-size);
 }
+.note-content:focus-within {
+    border: 2px solid var(--bg3);
+    transition: border ease-in-out;
+}
 
 .note-content p {
     padding-left: var(--small-size);
diff --git a/templates/note/view.html.twig b/templates/note/view.html.twig
index 9b5ba77df3..d53d3cdb81 100644
--- a/templates/note/view.html.twig
+++ b/templates/note/view.html.twig
@@ -3,9 +3,9 @@
         {% set nickname = note.getActorNickname() %}
 
         {# TODO: this should link to the note's user profile? #}
-        <h2 title='{{ 'This note author\'s nickname.' | trans }}' class="note-author u-url" href="#">
+        <h2 tabindex="0" title='{{ 'This note author\'s nickname.' | trans }}' class="note-author u-url" href="#" aria-relevant="all">
             {# Microformat's h-card properties indicates a face icon is a "u-logo" #}
-            <img title='{{ 'This note author\'s avatar.' | trans }}' class="u-logo avatar" src="{{ note.getAvatarUrl() }}" alt="{{ nickname }}'s avatar" aria-hidden="true">{{ nickname }}
+            <img class="u-logo avatar" src="{{ note.getAvatarUrl() }}" alt="{{ nickname }}'s avatar" aria-hidden="true">{{ nickname }}
         </h2>
 
         {% set reply_to = note.getReplyToNickname() %}
@@ -33,7 +33,7 @@
         </div>
         {% endif %}
     </header>
-    <div class="e-content entry-content note-content" title="{{ 'This note\'s content.' | trans }}">
+    <div tabindex="0" class="e-content entry-content note-content" title="{{ 'This note\'s content.' | trans }}" aria-relevant="all">
         {% block markdown %}
             {% apply markdown_to_html %}
                 {{ note.getContent() }}
diff --git a/templates/sidepanel/left/left.html.twig b/templates/sidepanel/left/left.html.twig
index 23ad3263c2..0fa946c16c 100644
--- a/templates/sidepanel/left/left.html.twig
+++ b/templates/sidepanel/left/left.html.twig
@@ -53,9 +53,9 @@
         {% endif %}
 
         <div class="timeline-nav">
-            <strong id="timeline-nav-header" title="{{ 'Navigate each timeline.' | trans }}" aria-relevant="all">Timeline</strong>
+            <strong id="timeline-nav-header">Timeline</strong>
 
-            <nav class='sec-nav'>
+            <nav class='sec-nav' tabindex="0" title="{{ 'Navigate through each timeline.' | trans }}" aria-relevant="all">
                 <ul>
                     <li>
                         <a href="{{ path('main_public') }}"