GNUsocial/gnu-social
4
0
Fork 1
Code Issues Releases Wiki Activity

[TWIG][CSS] Shortcut menu done. Can access various panel with proper visual feedback.

Browse Source
This commit is contained in:
Eliseu Amaro 2021-08-30 17:56:59 +01:00 committed by Hugo Sales
parent e73af2b887
commit 414b33f97b
Signed by: someonewithpc
GPG Key ID: 7D0C7EAFC9D835A0
4 changed files with 74 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
public/assets/css/base.css
View File

@ -516,4 +516,37 @@ input[type=file]:hover {
opacity: unset;
transform: none;
}
}
.accessibility-menu {
position: absolute;
left: -1000px;
top: -1000px;
width: 1px;
height: 1px;
overflow: hidden;
z-index: 5000;
background-color: var(--bg1);
padding: var(--unit-size);
border: solid 2px var(--bg3);
border-radius: var(--unit-size);
box-shadow: var(--shadow);
}
.accessibility-menu ul {
list-style-type: disc;
}
#anchor-menu:target + .accessibility-menu,
.accessibility-menu:focus {
top: var(--unit-size) !important;
left: var(--unit-size) !important;
width: 30% !important;
height: min-content !important;
}
.anchor-hidden {
width: 1px;
height: 1px;
overflow: hidden;
}
*:target + * {
border: 2px solid var(--bg3) !important;
}

56
templates/base.html.twig
View File

@ -29,28 +29,48 @@
</head>
<body class="bg" aria-atomic="true">
{% block header %}
<header id='header' role="banner">
{{ block("leftpanel", "stdgrid.html.twig") }}
<a id="anchor-menu" class="anchor-hidden"></a>
<aside class="accessibility-menu" accesskey="o" tabindex="0">
<h2>{{ 'Select page section:' | trans }}</h2>
<br>
<em>{{ 'Firefox based browser - <Alt> + <Shift> + \"access key\"' | trans }}</em>
<br>
<em>{{ 'Others - <Alt> + \"access key\"' | trans }}</em>
<br>
<a id='instance' href="{{ path('main_public') }}" tabindex="0" aria-roledescription="This instance name.">
<div aria-hidden="true">{{ icon('logo', 'icon icon-logo') | raw }}</div>
<h1> {{ config('site', 'name') }} </h1>
</a>
<ul>
<li><a href="#anchor-menu" accesskey="m">{{ 'This menu (press \'m\' to access).' | trans }}</a></li>
<li><a href="#anchor-main-page" accesskey="i">{{ 'Main page (press \'i\' to access).' | trans }}</a></li>
<li><a href="#anchor-left-panel" accesskey="j">{{ 'Left panel (press \'j\' to access).' | trans }}</a></li>
<li><a href="#anchor-main-content" accesskey="k">{{ 'Main content (press \'k\' to access).' | trans }}</a></li>
<li><a href="#anchor-right-panel" accesskey="l">{{ 'Right panel (press \'l\' to access).' | trans }}</a></li>
</ul>
</aside>
{% if app.user %}
{{ block("rightpanel", "stdgrid.html.twig") }}
{% endif %}
</header>
{% endblock header %}
{% block header %}
<header id='header' role="banner">
{{ block("leftpanel", "stdgrid.html.twig") }}
<div class="container">
<div class='content' aria-roledescription="Main content.">
{% block nav %}{% endblock %}
{% block body %}{% endblock %}
{% block javascripts %}{% endblock javascripts %}
</div>
<a id="anchor-main-page" class="anchor-hidden"></a>
<a id='instance' href="{{ path('main_public') }}" tabindex="0" aria-roledescription="This instance name.">
<div aria-hidden="true">{{ icon('logo', 'icon icon-logo') | raw }}</div>
<h1> {{ config('site', 'name') }} </h1>
</a>
{% if app.user %}
{{ block("rightpanel", "stdgrid.html.twig") }}
{% endif %}
</header>
{% endblock header %}
<div class="container">
<a id="anchor-main-content" class="anchor-hidden"></a>
<div class='content' aria-roledescription="Main content.">
{% block nav %}{% endblock %}
{% block body %}{% endblock %}
{% block javascripts %}{% endblock javascripts %}
</div>
</div>
</body>
</html>

1
templates/sidepanel/left/left.html.twig
View File

@ -2,6 +2,7 @@
<input type="checkbox" id="panel-left-toggle">
<label for="panel-left-toggle">{{ icon('menu', 'icon icon-left') | raw }}</label>
<a id="anchor-left-panel" class="anchor-hidden"></a>
<aside class="panel-content">
<nav class='profile-nav'>
{% if app.user %}

2
templates/sidepanel/right/right.html.twig
View File

@ -2,7 +2,9 @@
<input type="checkbox" id="panel-right-toggle">
<label for="panel-right-toggle">{{ icon('notes', 'icon icon-right') | raw }}</label>
<a id="anchor-right-panel" class="anchor-hidden"></a>
<aside class="panel-content">
{% if post_form is defined %}
<section class="section-widget" role="complementary" aria-label={{ 'Create a new note.' | trans }}>
<details class="section-title">