GNUsocial
/
gnu-social
4
0
Fork 1
Code Issues Releases Wiki Activity

[BASE][CSS] Accessibility menu fix when logged out. Proper selector for accesskey used now, ".accessibility-target".

This commit is contained in:
Eliseu Amaro 2021-09-08 17:27:28 +01:00 committed by Hugo Sales
parent c4b328c03b
commit 60af533fa4
Signed by: someonewithpc
GPG Key ID: 7D0C7EAFC9D835A0
5 changed files with 37 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -247,9 +247,7 @@ summary:hover .icon-details-open {
text-decoration: underline; text-decoration: underline;
} }
.h-entry a:focus { .h-entry a:focus {
animation-name: highlight; border: solid 2px var(--bg3);
animation-duration: 500ms;
animation-timing-function: ease-in-out;
} }
.h-entry .embed header { .h-entry .embed header {
@ -479,7 +477,7 @@ input {
display: block; display: block;
position: relative; position: relative;
color: var(--white); color: var(--white);
padding: 2px 8px; padding: 2px 6px;
border: 2px solid var(--bg2) !important; border: 2px solid var(--bg2) !important;
border-radius: var(--unit-size) !important; border-radius: var(--unit-size) !important;
background-color: var(--translucent); background-color: var(--translucent);
@ -575,35 +573,35 @@ input[type=file] {
} }
/* ACCESSIBILITY MENU */ /* ACCESSIBILITY MENU */
.accessibility-menu { #accessibility-menu {
display: block; display: block;
position: absolute; position: absolute;
z-index: 999; z-index: 999;
top: -100%; top: -90%;
left: -100%; left: -90%;
width: 1px;
height: 1px;
}
.accessibility-menu ul {
list-style-type: disc;
}
#anchor-menu:target + .accessibility-menu:focus-within,
.accessibility-menu:focus-within {
top: var(--unit-size);
left: var(--unit-size);
width: 30%; width: 30%;
height: min-content; height: min-content;
background-color: var(--bg1); background-color: var(--bg1);
padding: var(--unit-size); padding: var(--unit-size);
border: solid 2px var(--bg3); border: solid 2px var(--bg3);
border-radius: var(--unit-size); border-radius: var(--unit-size);
box-shadow: var(--shadow); box-shadow: var(--shadow);
} }
#accessibility-menu ul {
list-style-type: disc;
margin-left: var(--medium-size);
}
#accessibility-menu:focus-within {
top: var(--unit-size);
left: var(--unit-size);
}
.anchor-hidden { .anchor-hidden {
width: 1px; width: 1px;
height: 1px; height: 1px;
@ -684,7 +682,7 @@ input[type=file] {
max-width: 20%; max-width: 20%;
} }
a[id|="anchor"]:target + * { a[id|="anchor"]:target + .accessibility-target {
animation-name: highlight; animation-name: highlight;
animation-duration: 600ms; animation-duration: 600ms;
animation-timing-function: ease-in-out; animation-timing-function: ease-in-out;
@ -710,7 +708,7 @@ input[type=file] {
#panel-left-toggle:checked ~ .panel-content, #panel-left-toggle:checked ~ .panel-content,
#panel-right-toggle:checked ~ .panel-content, #panel-right-toggle:checked ~ .panel-content,
a[id|="anchor"]:target ~ .panel-content { a[id|="anchor"]:target ~ .panel-content {
display: flex !important; display: flex;
width: 100%; width: 100%;
background-color: var(--bg2); background-color: var(--bg2);

11
templates/base.html.twig
View File

@ -33,10 +33,11 @@
<body class="bg"> <body class="bg">
<a id="anchor-menu" href="#anchor-menu" class="anchor-hidden" aria-describedby="#accessibility-menu-title"></a> <aside id="accessibility-menu" aria-live="polite">
<aside class="accessibility-menu" aria-live="polite"> <a accesskey="z" href="#accessibility-menu" class="anchor-hidden"></a>
<h2 id="accessibility-menu-title" tabindex="0">{{ 'Accessibility menu.' | trans }}</h2> <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> <h3>{{ 'Here you can find fast shortcuts to various page regions!' | trans }}</h3>
<br> <br>
@ -70,7 +71,7 @@
{{ block("leftpanel", "stdgrid.html.twig") }} {{ block("leftpanel", "stdgrid.html.twig") }}
<a role="navigation" rel="help" id="anchor-main-page" class="anchor-hidden" title="{{ 'Press tab to access selected region!' | trans }}"></a> <a role="navigation" rel="help" id="anchor-main-page" class="anchor-hidden" title="{{ 'Press tab to access selected region!' | trans }}"></a>
<a id='instance' href="{{ path('main_public') }}" tabindex="0" title="{{ 'This instance\'s name. Access public timeline.' | trans }}"> <a class="accessibility-target" id='instance' href="{{ path('main_public') }}" tabindex="0" title="{{ 'This instance\'s name. Access public timeline.' | trans }}">
<h1>{{ icon('logo', 'icon icon-logo') | raw }}{{ config('site', 'name') }} </h1> <h1>{{ icon('logo', 'icon icon-logo') | raw }}{{ config('site', 'name') }} </h1>
</a> </a>
@ -82,7 +83,7 @@
<div class="container"> <div class="container">
<a role="navigation" rel="help" id="anchor-main-content" class="anchor-hidden" title="{{ 'Press tab to access selected region!' | trans }}"></a> <a role="navigation" rel="help" id="anchor-main-content" class="anchor-hidden" title="{{ 'Press tab to access selected region!' | trans }}"></a>
<div class='content'> <div class='content accessibility-target'>
{% block nav %}{% endblock %} {% block nav %}{% endblock %}
{% block body %}{% endblock %} {% block body %}{% endblock %}
{% block javascripts %}{% endblock javascripts %} {% block javascripts %}{% endblock javascripts %}

6
templates/note/view.html.twig
View File

@ -33,7 +33,7 @@
</div> </div>
{% endif %} {% endif %}
</header> </header>
<div tabindex="0" class="e-content entry-content note-content" title="{{ 'This note\'s content.' | trans }}" aria-relevant="all"> <section tabindex="0" role="dialog" class="e-content entry-content note-content">
{% block markdown %} {% block markdown %}
{% apply markdown_to_html %} {% apply markdown_to_html %}
{{ note.getContent() }} {{ note.getContent() }}
@ -51,14 +51,14 @@
{% endfor %} {% endfor %}
</div> </div>
{% endif %} {% endif %}
<div class="note-links" title="{{ 'Shared links in this note.' | trans }}"> <div tabindex="0" class="note-links" title="{{ 'Shared links in this note.' | trans }}">
{% for link in note.getLinks() %} {% for link in note.getLinks() %}
{% for block in handle_event('ViewLink', {'link': link, 'note': note}) %} {% for block in handle_event('ViewLink', {'link': link, 'note': note}) %}
{{ block | raw }} {{ block | raw }}
{% endfor %} {% endfor %}
{% endfor %} {% endfor %}
</div> </div>
</div> </section>
{% if replies is defined and replies is not empty %} {% if replies is defined and replies is not empty %}
<div class="u-in-reply-to replies"> <div class="u-in-reply-to replies">

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

@ -3,11 +3,11 @@
<label id="panel-left-icon" for="panel-left-toggle" aria-hidden="true" tabindex="-1">{{ icon('menu', 'icon icon-left') | raw }}</label> <label id="panel-left-icon" for="panel-left-toggle" aria-hidden="true" tabindex="-1">{{ icon('menu', 'icon icon-left') | raw }}</label>
<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 accessibility-target">
{% if app.user %} {% if app.user %}
<section tabindex="0" class='profile' title="{{ 'Your profile information.' | trans }}"> <section tabindex="0" class='profile' title="{{ 'Your profile information.' | trans }}">
<a id="user" href="{{ path('settings') }}"> <a id="user" href="{{ path('settings') }}" title="{{ 'Access main settngs.' | trans }}">
<img src='{{ user_avatar }}' title="{{ 'Your account\'s avatar.' | trans }}" class="icon icon-avatar"> <img src='{{ user_avatar }}' alt="{{ 'Your account\'s avatar.' | trans }}" class="icon icon-avatar">
<div id="user-info"> <div id="user-info">
<strong id="user-nickname" title="{{ 'Your account\' nickname.' | trans }}">{{ user_nickname }}</strong> <strong id="user-nickname" title="{{ 'Your account\' nickname.' | trans }}">{{ user_nickname }}</strong>
@ -21,7 +21,7 @@
{% endif %} {% endif %}
</nav> </nav>
<section tabindex="0" id="user-stats" title="{{ 'Your account statistics.' | trans }}"> <section 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,10 +33,10 @@
{% endfor %} #} {% endfor %} #}
</section> </section>
<nav tabindex="0" class="profile-navigation" title="{{ 'Navigate through account related pages.' | trans }}" aria-relevant="all"> <nav 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('settings') }}' class='{{ active("replies") }}' title="{{ '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='{{ active("replies") }}' title="{{ 'Replies to your notes.' | trans }}">Replies</a>
{% for link in handle_event('InsertLeftPanelLink', user_nickname) %} {% for link in handle_event('InsertLeftPanelLink', user_nickname) %}
{{ link | raw }} {{ link | raw }}
{% endfor %} {% endfor %}
@ -46,7 +46,7 @@
</nav> </nav>
{% else %} {% else %}
<nav tabindex="0" class="profile-navigation" title="{{ 'Navigate through account related pages.' | trans }}" aria-relevant="all"> <nav 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('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>

4
templates/sidepanel/right/right.html.twig
View File

@ -1,9 +1,9 @@
<div class="panel panel-right" tabindex="-1"> <div class="panel panel-right">
<input type="checkbox" id="panel-right-toggle" aria-hidden="true" tabindex="-1"> <input type="checkbox" id="panel-right-toggle" aria-hidden="true" tabindex="-1">
<label id="panel-right-icon" for="panel-right-toggle" aria-hidden="true" tabindex="-1">{{ icon('notes', 'icon icon-right') | raw }}</label> <label id="panel-right-icon" for="panel-right-toggle" aria-hidden="true" tabindex="-1">{{ icon('notes', 'icon icon-right') | raw }}</label>
<a id="anchor-right-panel" class="anchor-hidden" title="{{ 'Press tab to access selected region!' | trans }}"></a> <a id="anchor-right-panel" class="anchor-hidden" title="{{ 'Press tab to access selected region!' | trans }}"></a>
<aside class="panel-content"> <aside class="panel-content accessibility-target">
{% if post_form is defined %} {% if post_form is defined %}
<section class="section-widget" title={{ 'Create a new note.' | trans }}> <section class="section-widget" title={{ 'Create a new note.' | trans }}>