wamo/gnu-social
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[CSS] There's no need to tab again after selecting accessibility menu!

Browse Source
This commit is contained in:
Eliseu Amaro 2021-09-07 20:07:46 +01:00 committed by Hugo Sales
parent 8123086881
commit 3abf71b707
No known key found for this signature in database
GPG Key ID: 7D0C7EAFC9D835A0
3 changed files with 47 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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 {

31
templates/base.html.twig
View File

@ -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>

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

@ -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') }}"