[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

@@ -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] {
+    .panel:not(:focus-within or :not[open]) aside {
-        width: 100%;
-        font-size: var(--main-size);
-    }
-
-    .panel[open] {
-        all: unset;
-        display: flex;
-        flex-direction: column;
-    }
-
-    .panel 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 {

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>

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

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>

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

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">