[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:
parent
e2e6c7a5bf
commit
6166afeec6
@ -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 {
|
||||||
|
@ -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>
|
||||||
|
@ -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 %}
|
||||||
|
@ -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>
|
||||||
|
@ -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 %}
|
||||||
|
@ -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">
|
||||||
|
Loading…
Reference in New Issue
Block a user