[TWIG][CSS] Shortcut menu done. Can access various panel with proper visual feedback.
This commit is contained in:
parent
e73af2b887
commit
414b33f97b
|
@ -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;
|
||||
}
|
|
@ -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>
|
||||
|
||||
|
|
|
@ -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,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">
|
||||
|
|
Loading…
Reference in New Issue
Block a user