[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.

This commit is contained in:
Eliseu Amaro 2021-08-17 21:43:34 +01:00 committed by Hugo Sales
parent e2e6c7a5bf
commit 6166afeec6
Signed by: someonewithpc
GPG Key ID: 7D0C7EAFC9D835A0
6 changed files with 19 additions and 21 deletions

View File

@ -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 {

View File

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

View File

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

View File

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

View File

@ -1,4 +1,4 @@
<aside id='left-panel'>
<aside id='left-panel' tabindex="-1">
<nav class='profile-nav'>
{% if app.user %}

View File

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