[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); left: var(--unit-size);
font-size: var(--small-size); font-size: var(--small-size);
} }
#header:above-level.panel[open] ~ * {
display: none;
}
.icon { .icon {
fill: var(--white); fill: var(--white);
@ -261,6 +264,7 @@
.icon-left, .icon-left,
.icon-right { .icon-right {
display: flex; display: flex;
width: 100%;
} }
/* by default they are hidden */ /* by default they are hidden */
@ -268,21 +272,15 @@
display: none; 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; display: none;
} }
.panel[open]:focus-within aside,
.panel[open] {
display: flex;
flex-direction: column;
font-size: var(--main-size);
}
.panel[open] aside { .panel[open] aside {
padding: var(--unit-size); padding: var(--unit-size);
box-sizing: border-box; box-sizing: border-box;
@ -296,7 +294,6 @@
background-size: 100% 100%; background-size: 100% 100%;
min-height: 100%; min-height: 100%;
display: block !important;
} }
.panel[open] aside .footer { .panel[open] aside .footer {

View File

@ -32,19 +32,19 @@
{% block header %} {% block header %}
<div id='header'> <div id='header'>
<details class="panel" id="left-container"> <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 }} {{ icon('menu', 'icon icon-left') | raw }}
{{ block("leftpanel", "stdgrid.html.twig") }} {{ block("leftpanel", "stdgrid.html.twig") }}
</summary> </summary>
</details> </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 }} {{ icon('logo', 'icon icon-logo') | raw }}
<h1> {{ config('site', 'name') }} </h1> <h1> {{ config('site', 'name') }} </h1>
</a> </a>
<details class="panel" id="right-container"> <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 }} {{ icon('notes', 'icon icon-right') | raw }}
{{ block("rightpanel", "stdgrid.html.twig") }} {{ block("rightpanel", "stdgrid.html.twig") }}
</summary> </summary>

View File

@ -10,7 +10,7 @@
{% block body %} {% block body %}
{# Backwards compatibility with hAtom 0.1 #} {# Backwards compatibility with hAtom 0.1 #}
<div class="timeline"> <div class="timeline" tabindex="0">
<main class="h-feed hfeed notes"> <main class="h-feed hfeed notes">
{% if notes is defined and notes is not empty %} {% if notes is defined and notes is not empty %}
{% for conversation in notes %} {% for conversation in notes %}

View File

@ -2,7 +2,8 @@
<div class="note-info"> <div class="note-info">
{% set nickname = note.getActorNickname() %} {% 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" #} {# 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"> <img class="u-logo avatar" src="{{ note.getAvatarUrl() }}" alt="{{ nickname }}'s avatar">
<b class="p-nickname">{{ nickname }}</b> <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'> <nav class='profile-nav'>
{% if app.user %} {% if app.user %}

View File

@ -1,4 +1,4 @@
<aside id='right-panel'> <aside id='right-panel' tabindex="-1">
{% if post_form is defined %} {% if post_form is defined %}
<section class="section-widget"> <section class="section-widget">
<details class="section-title"> <details class="section-title">