From 6166afeec6589951efc7ecc6283d8810c2a957e1 Mon Sep 17 00:00:00 2001
From: Eliseu Amaro <mail@eliseuama.ro>
Date: Tue, 17 Aug 2021 21:43:34 +0100
Subject: [PATCH] [TWIG][CSS] Left and right panels accessibility improvements.
 Tabindex is now properly set up. When panels have the attribute open but
 aren't focused (keyboard navigation out of panel, into main content) they
 aren't displayed anymore.

---
 public/assets/css/base.css                | 25 ++++++++++-------------
 templates/base.html.twig                  |  6 +++---
 templates/network/public.html.twig        |  2 +-
 templates/note/view.html.twig             |  3 ++-
 templates/sidepanel/left/left.html.twig   |  2 +-
 templates/sidepanel/right/right.html.twig |  2 +-
 6 files changed, 19 insertions(+), 21 deletions(-)

diff --git a/public/assets/css/base.css b/public/assets/css/base.css
index eb78e26fb9..7da98bed41 100644
--- a/public/assets/css/base.css
+++ b/public/assets/css/base.css
@@ -96,6 +96,9 @@
     left: var(--unit-size);
     font-size: var(--small-size);
 }
+#header:above-level.panel[open] ~ * {
+    display: none;
+}
 
 .icon {
     fill: var(--white);
@@ -261,6 +264,7 @@
     .icon-left,
     .icon-right {
         display: flex;
+        width: 100%;
     }
 
     /* by default they are hidden */
@@ -268,21 +272,15 @@
         display: none;
     }
 
-    .panel[open] {
-        width: 100%;
-        font-size: var(--main-size);
-    }
-
-    .panel[open] {
-        all: unset;
-        display: flex;
-        flex-direction: column;
-    }
-
-    .panel aside {
+    .panel:not(:focus-within or :not[open]) aside {
         display: none;
     }
-
+    .panel[open]:focus-within aside,
+    .panel[open] {
+        display: flex;
+        flex-direction: column;
+        font-size: var(--main-size);
+    }
     .panel[open] aside {
         padding: var(--unit-size);
         box-sizing: border-box;
@@ -296,7 +294,6 @@
         background-size: 100% 100%;
         min-height: 100%;
 
-        display: block !important;
     }
 
     .panel[open] aside .footer {
diff --git a/templates/base.html.twig b/templates/base.html.twig
index c518519a8c..2ede828581 100644
--- a/templates/base.html.twig
+++ b/templates/base.html.twig
@@ -32,19 +32,19 @@
     {% block header %}
         <div id='header'>
             <details class="panel" id="left-container">
-                <summary tabindex="1">
+                <summary tabindex="0" aria-haspopup="true" role="button" aria-expanded="false">
                     {{ icon('menu', 'icon icon-left') | raw }}
                     {{ block("leftpanel", "stdgrid.html.twig") }}
                 </summary>
             </details>
 
-            <a id='instance' href="{{ path('main_public') }}" tabindex="2">
+            <a id='instance' href="{{ path('main_public') }}" tabindex="0">
                 {{ icon('logo', 'icon icon-logo') | raw }}
                 <h1> {{ config('site', 'name') }} </h1>
             </a>
 
             <details class="panel" id="right-container">
-                <summary tabindex="3">
+                <summary tabindex="0" aria-haspopup="true" role="button" aria-expanded="false">
                     {{ icon('notes', 'icon icon-right') | raw }}
                     {{ block("rightpanel", "stdgrid.html.twig") }}
                 </summary>
diff --git a/templates/network/public.html.twig b/templates/network/public.html.twig
index a26760ae92..ff8b3ca5f3 100644
--- a/templates/network/public.html.twig
+++ b/templates/network/public.html.twig
@@ -10,7 +10,7 @@
 {% block body %}
 
     {# Backwards compatibility with hAtom 0.1 #}
-    <div class="timeline">
+    <div class="timeline" tabindex="0">
         <main class="h-feed hfeed notes">
             {% if notes is defined and notes is not empty %}
                 {% for conversation in notes %}
diff --git a/templates/note/view.html.twig b/templates/note/view.html.twig
index d00dde5a26..08c66b31cf 100644
--- a/templates/note/view.html.twig
+++ b/templates/note/view.html.twig
@@ -2,7 +2,8 @@
     <div class="note-info">
         {% set nickname = note.getActorNickname() %}
 
-        <a class="u-url" href="{{ path('settings_avatar') }}">
+        {# TODO: this should link to the note's user profile? #}
+        <a class="u-url" href="#">
             {# Microformat's h-card properties indicates a face icon is a "u-logo" #}
             <img class="u-logo avatar" src="{{ note.getAvatarUrl() }}" alt="{{ nickname }}'s avatar">
             <b class="p-nickname">{{ nickname }}</b>
diff --git a/templates/sidepanel/left/left.html.twig b/templates/sidepanel/left/left.html.twig
index a08942f317..98ca757308 100644
--- a/templates/sidepanel/left/left.html.twig
+++ b/templates/sidepanel/left/left.html.twig
@@ -1,4 +1,4 @@
-<aside id='left-panel'>
+<aside id='left-panel' tabindex="-1">
     <nav class='profile-nav'>
 
         {% if app.user %}
diff --git a/templates/sidepanel/right/right.html.twig b/templates/sidepanel/right/right.html.twig
index 6400530779..3ca5425017 100644
--- a/templates/sidepanel/right/right.html.twig
+++ b/templates/sidepanel/right/right.html.twig
@@ -1,4 +1,4 @@
-<aside id='right-panel'>
+<aside id='right-panel' tabindex="-1">
     {% if post_form is defined %}
         <section class="section-widget">
             <details class="section-title">