[TWIG][CSS] Shortcut menu done. Can access various panel with proper visual feedback.
This commit is contained in:
parent
e73af2b887
commit
414b33f97b
GPG Key ID:
7D0C7EAFC9D835A0
|
|
@ -516,4 +516,37 @@ input[type=file]:hover {
|
||||||
opacity: unset;
|
opacity: unset;
|
||||||
transform: none;
|
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;
|
||||||
}
|
}
|
||||||
|
|
@ -29,28 +29,48 @@
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body class="bg" aria-atomic="true">
|
<body class="bg" aria-atomic="true">
|
||||||
{% block header %}
|
<a id="anchor-menu" class="anchor-hidden"></a>
|
||||||
<header id='header' role="banner">
|
<aside class="accessibility-menu" accesskey="o" tabindex="0">
|
||||||
{{ block("leftpanel", "stdgrid.html.twig") }}
|
<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.">
|
<ul>
|
||||||
<div aria-hidden="true">{{ icon('logo', 'icon icon-logo') | raw }}</div>
|
<li><a href="#anchor-menu" accesskey="m">{{ 'This menu (press \'m\' to access).' | trans }}</a></li>
|
||||||
<h1> {{ config('site', 'name') }} </h1>
|
<li><a href="#anchor-main-page" accesskey="i">{{ 'Main page (press \'i\' to access).' | trans }}</a></li>
|
||||||
</a>
|
<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 header %}
|
||||||
{{ block("rightpanel", "stdgrid.html.twig") }}
|
<header id='header' role="banner">
|
||||||
{% endif %}
|
{{ block("leftpanel", "stdgrid.html.twig") }}
|
||||||
</header>
|
|
||||||
{% endblock header %}
|
|
||||||
|
|
||||||
<div class="container">
|
<a id="anchor-main-page" class="anchor-hidden"></a>
|
||||||
<div class='content' aria-roledescription="Main content.">
|
<a id='instance' href="{{ path('main_public') }}" tabindex="0" aria-roledescription="This instance name.">
|
||||||
{% block nav %}{% endblock %}
|
<div aria-hidden="true">{{ icon('logo', 'icon icon-logo') | raw }}</div>
|
||||||
{% block body %}{% endblock %}
|
<h1> {{ config('site', 'name') }} </h1>
|
||||||
{% block javascripts %}{% endblock javascripts %}
|
</a>
|
||||||
</div>
|
|
||||||
|
{% 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>
|
||||||
|
</div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -2,6 +2,7 @@
|
||||||
<input type="checkbox" id="panel-left-toggle">
|
<input type="checkbox" id="panel-left-toggle">
|
||||||
<label for="panel-left-toggle">{{ icon('menu', 'icon icon-left') | raw }}</label>
|
<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">
|
<aside class="panel-content">
|
||||||
<nav class='profile-nav'>
|
<nav class='profile-nav'>
|
||||||
{% if app.user %}
|
{% if app.user %}
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,9 @@
|
||||||
<input type="checkbox" id="panel-right-toggle">
|
<input type="checkbox" id="panel-right-toggle">
|
||||||
<label for="panel-right-toggle">{{ icon('notes', 'icon icon-right') | raw }}</label>
|
<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">
|
<aside class="panel-content">
|
||||||
|
|
||||||
{% if post_form is defined %}
|
{% if post_form is defined %}
|
||||||
<section class="section-widget" role="complementary" aria-label={{ 'Create a new note.' | trans }}>
|
<section class="section-widget" role="complementary" aria-label={{ 'Create a new note.' | trans }}>
|
||||||
<details class="section-title">
|
<details class="section-title">
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue