[CSS] There's no need to tab again after selecting accessibility menu!
This commit is contained in:
parent
8123086881
commit
3abf71b707
GPG Key ID:
7D0C7EAFC9D835A0
|
|
@ -562,31 +562,32 @@ input[type=file] {
|
|||
|
||||
/* ACCESSIBILITY MENU */
|
||||
.accessibility-menu {
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: -1000px;
|
||||
top: -1000px;
|
||||
z-index: 999;
|
||||
|
||||
top: -100%;
|
||||
left: -100%;
|
||||
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-within,
|
||||
.accessibility-menu a:focus {
|
||||
top: var(--unit-size) !important;
|
||||
left: var(--unit-size) !important;
|
||||
width: 30% !important;
|
||||
height: min-content !important;
|
||||
#anchor-menu:target + .accessibility-menu:focus-within,
|
||||
.accessibility-menu:focus-within {
|
||||
top: var(--unit-size);
|
||||
left: var(--unit-size);
|
||||
width: 30%;
|
||||
height: min-content;
|
||||
|
||||
background-color: var(--bg1);
|
||||
padding: var(--unit-size);
|
||||
border: solid 2px var(--bg3);
|
||||
border-radius: var(--unit-size);
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.anchor-hidden {
|
||||
|
|
|
|||
|
|
@ -1,9 +1,10 @@
|
|||
<!DOCTYPE html>
|
||||
<html xml:lang="en" lang="en">
|
||||
<html lang="en">
|
||||
<head>
|
||||
{% block meta %}
|
||||
<meta charset="UTF-8">
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="home" href="/">
|
||||
{% endblock %}
|
||||
|
||||
<title>
|
||||
|
|
@ -31,10 +32,16 @@
|
|||
</head>
|
||||
|
||||
<body class="bg">
|
||||
<a id="anchor-menu" class="anchor-hidden"></a>
|
||||
<aside class="accessibility-menu" tabindex="0">
|
||||
<h2>{{ 'Select page section:' | trans }}</h2>
|
||||
|
||||
<a id="anchor-menu" href="#anchor-menu" class="anchor-hidden" aria-describedby="#accessibility-menu-title"></a>
|
||||
<aside class="accessibility-menu" aria-live="polite">
|
||||
<h2 id="accessibility-menu-title" tabindex="0">{{ 'Accessibility menu.' | trans }}</h2>
|
||||
<a href="#anchor-menu" accesskey="z">{{ 'Accessibility menu. Here you can find fast shortcuts to various page regions!' | trans }}</a>
|
||||
|
||||
<br>
|
||||
|
||||
<p>Provided the following keyboard shortcut, the link is targeted, making navigation faster.</p>
|
||||
|
||||
<p>
|
||||
{% if is_firefox() == true %}
|
||||
<em><kbd>Alt</kbd> + <kbd>Shift</kbd> + "access key"</em>
|
||||
|
|
@ -43,13 +50,17 @@
|
|||
{% endif %}
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<strong tabindex="0">{{'The keyboard key ' | trans }}<kbd>Z</kbd>{{' accesses this menu.' | trans }}</strong>
|
||||
<strong>{{ 'The other access keys are:' | trans }}</strong>
|
||||
</p>
|
||||
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#anchor-menu" accesskey="m">{{ 'This menu, (press \'m\' to access).' | trans }}</a></li>
|
||||
<li><a href="#anchor-left-panel" accesskey="h">{{ 'Left panel (press \'h\' 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-main-page" accesskey="j">{{ 'Main page (press \'j\' to access).' | trans }}</a></li>
|
||||
<li><a href="#anchor-right-panel" accesskey="l">{{ 'Right panel (press \'l\' to access).' | trans }}</a></li>
|
||||
<li><a href="#anchor-left-panel" accesskey="h"><kbd>H</kbd>{{' for the Left panel.' | trans }}</a></li>
|
||||
<li><a href="#anchor-main-content" accesskey="k"><kbd>K</kbd>{{ ' for the main content.' | trans }}</a></li>
|
||||
<li><a href="#anchor-main-page" accesskey="j"><kbd>J</kbd>{{ ' for the main page.' | trans }}</a></li>
|
||||
<li><a href="#anchor-right-panel" accesskey="l"><kbd>L</kbd>{{ ' for the right panel.' | trans }}</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</aside>
|
||||
|
|
|
|||
|
|
@ -5,11 +5,11 @@
|
|||
<a id="anchor-left-panel" class="anchor-hidden" title="{{ 'Press tab to access selected region!' | trans }}"></a>
|
||||
<aside class="panel-content">
|
||||
{% if app.user %}
|
||||
<section class='profile'>
|
||||
<section tabindex="0" class='profile' title="{{ 'Your profile information.' | trans }}">
|
||||
<a id="user" href="{{ path('settings') }}">
|
||||
<img src='{{ user_avatar }}' alt="{{ 'Your avatar.' | trans }}" title="{{ 'Your avatar.' | trans }}" class="icon icon-avatar">
|
||||
<img src='{{ user_avatar }}' title="{{ 'Your account\'s avatar.' | trans }}" class="icon icon-avatar">
|
||||
<div id="user-info">
|
||||
<strong id="user-nickname" title="{{ 'Your nickname.' | trans }}">{{ user_nickname }}</strong>
|
||||
<strong id="user-nickname" title="{{ 'Your account\' nickname.' | trans }}">{{ user_nickname }}</strong>
|
||||
|
||||
<nav id="user-tags">
|
||||
{% if user_tags %}
|
||||
|
|
@ -21,7 +21,7 @@
|
|||
{% endif %}
|
||||
</nav>
|
||||
|
||||
<section id="user-stats">
|
||||
<section tabindex="0" id="user-stats" title="{{ 'Your account statistics.' | trans }}">
|
||||
{% if user_followers %}<h2>{{ 'Followers' | trans }} {{ user_followers }}</h2> {% endif %}
|
||||
{% if user_followed %}<h2>{{ 'Followed' | trans }} {{ user_followed }}</h2> {% endif %}
|
||||
</section>
|
||||
|
|
@ -33,7 +33,7 @@
|
|||
{% endfor %} #}
|
||||
</section>
|
||||
|
||||
<nav class="profile-navigation">
|
||||
<nav tabindex="0" class="profile-navigation" title="{{ 'Navigate through account related pages.' | trans }}" aria-relevant="all">
|
||||
<a href='#' title="{{ 'Check your messages.' | trans }}">Messages</a>
|
||||
<a href="{{ path("replies", {'nickname' : user_nickname}) }}"
|
||||
class='hover-effect {{ active("replies") }}' title="{{ 'Replies to your notes.' | trans }}">Replies</a>
|
||||
|
|
@ -46,16 +46,16 @@
|
|||
</nav>
|
||||
|
||||
{% else %}
|
||||
<nav class="profile-navigation">
|
||||
<a href="{{ path('login') }}" class='hover-effect {{ active('login') }}' title="{{ 'Login through your existing account.' | trans }}">Login</a>
|
||||
<nav tabindex="0" class="profile-navigation" title="{{ 'Navigate through account related pages.' | trans }}" aria-relevant="all">
|
||||
<a href="{{ path('login') }}" class='hover-effect {{ active('login') }}' title="{{ 'Login with your existing account.' | trans }}">Login</a>
|
||||
<a href="{{ path('register') }}" title="{{ 'Register a new account!' | trans }}">Register</a>
|
||||
</nav>
|
||||
{% endif %}
|
||||
|
||||
<div class="timeline-nav">
|
||||
<strong id="timeline-nav-header">Timeline</strong>
|
||||
<strong id="timeline-nav-header" title="{{ 'Navigate each timeline.' | trans }}" aria-relevant="all">Timeline</strong>
|
||||
|
||||
<nav class='sec-nav' role="navigation" title="{{ 'Navigate through the different timelines.' | trans }}">
|
||||
<nav class='sec-nav'>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="{{ path('main_public') }}"
|
||||
|
|
|
|||
Loading…
Reference in New Issue