GNUsocial/gnu-social
4
0
Fork 1
Code Issues 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
Signed by: someonewithpc
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 */
.accessibility-menu { .accessibility-menu {
display: block;
position: absolute; position: absolute;
left: -1000px; z-index: 999;
top: -1000px;
top: -100%;
left: -100%;
width: 1px; width: 1px;
height: 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 { .accessibility-menu ul {
list-style-type: disc; list-style-type: disc;
} }
#anchor-menu:target ~ .accessibility-menu, #anchor-menu:target + .accessibility-menu:focus-within,
.accessibility-menu:focus-within, .accessibility-menu:focus-within {
.accessibility-menu a:focus { top: var(--unit-size);
top: var(--unit-size) !important; left: var(--unit-size);
left: var(--unit-size) !important; width: 30%;
width: 30% !important; height: min-content;
height: min-content !important;
background-color: var(--bg1);
padding: var(--unit-size);
border: solid 2px var(--bg3);
border-radius: var(--unit-size);
box-shadow: var(--shadow);
} }
.anchor-hidden { .anchor-hidden {

31
templates/base.html.twig
View File

@ -1,9 +1,10 @@
<!DOCTYPE html> <!DOCTYPE html>
<html xml:lang="en" lang="en"> <html lang="en">
<head> <head>
{% block meta %} {% block meta %}
<meta charset="UTF-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="home" href="/">
{% endblock %} {% endblock %}
<title> <title>
@ -31,10 +32,16 @@
</head> </head>
<body class="bg"> <body class="bg">
<a id="anchor-menu" class="anchor-hidden"></a>
<aside class="accessibility-menu" tabindex="0"> <a id="anchor-menu" href="#anchor-menu" class="anchor-hidden" aria-describedby="#accessibility-menu-title"></a>
<h2>{{ 'Select page section:' | trans }}</h2> <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> <br>
<p>Provided the following keyboard shortcut, the link is targeted, making navigation faster.</p>
<p> <p>
{% if is_firefox() == true %} {% if is_firefox() == true %}
<em><kbd>Alt</kbd> + <kbd>Shift</kbd> + "access key"</em> <em><kbd>Alt</kbd> + <kbd>Shift</kbd> + "access key"</em>
@ -43,13 +50,17 @@
{% endif %} {% endif %}
</p> </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> <nav>
<ul> <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"><kbd>H</kbd>{{' for the Left panel.' | 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"><kbd>K</kbd>{{ ' for the main content.' | 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"><kbd>J</kbd>{{ ' for the main page.' | 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"><kbd>L</kbd>{{ ' for the right panel.' | trans }}</a></li>
<li><a href="#anchor-right-panel" accesskey="l">{{ 'Right panel (press \'l\' to access).' | trans }}</a></li>
</ul> </ul>
</nav> </nav>
</aside> </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> <a id="anchor-left-panel" class="anchor-hidden" title="{{ 'Press tab to access selected region!' | trans }}"></a>
<aside class="panel-content"> <aside class="panel-content">
{% if app.user %} {% if app.user %}
<section class='profile'> <section tabindex="0" class='profile' title="{{ 'Your profile information.' | trans }}">
<a id="user" href="{{ path('settings') }}"> <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"> <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"> <nav id="user-tags">
{% if user_tags %} {% if user_tags %}
@ -21,7 +21,7 @@
{% endif %} {% endif %}
</nav> </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_followers %}<h2>{{ 'Followers' | trans }} {{ user_followers }}</h2> {% endif %}
{% if user_followed %}<h2>{{ 'Followed' | trans }} {{ user_followed }}</h2> {% endif %} {% if user_followed %}<h2>{{ 'Followed' | trans }} {{ user_followed }}</h2> {% endif %}
</section> </section>
@ -33,7 +33,7 @@
{% endfor %} #} {% endfor %} #}
</section> </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='#' title="{{ 'Check your messages.' | trans }}">Messages</a>
<a href="{{ path("replies", {'nickname' : user_nickname}) }}" <a href="{{ path("replies", {'nickname' : user_nickname}) }}"
class='hover-effect {{ active("replies") }}' title="{{ 'Replies to your notes.' | trans }}">Replies</a> class='hover-effect {{ active("replies") }}' title="{{ 'Replies to your notes.' | trans }}">Replies</a>
@ -46,16 +46,16 @@
</nav> </nav>
{% else %} {% else %}
<nav class="profile-navigation"> <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 through your existing account.' | trans }}">Login</a> <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> <a href="{{ path('register') }}" title="{{ 'Register a new account!' | trans }}">Register</a>
</nav> </nav>
{% endif %} {% endif %}
<div class="timeline-nav"> <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> <ul>
<li> <li>
<a href="{{ path('main_public') }}" <a href="{{ path('main_public') }}"