eliseuamaro/gnu-social
1
0
Fork 0
forked from GNUsocial/gnu-social
Code Issues Pull Requests Releases Wiki Activity

[CSS] Fixed accessibility issues with header and panel elements. Left, instance and right elements are now properly ordered when focused.

Browse Source 
Signed-off-by: Eliseu Amaro <mail@eliseuama.ro>
This commit is contained in:
Eliseu Amaro 2021-07-23 11:47:43 +01:00 committed by Diogo Peralta Cordeiro
parent 362be17aba
commit 37a2db3706
Signed by: diogo
GPG Key ID: 18D2D35001FBFAB0
3 changed files with 30 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -97,9 +97,9 @@ a:visited {
margin: 0;
padding: 0;
}
a:focus,
a:hover,
a:active {
a:hover {
border-radius: var(--unit-size);
padding: 0 var(--unit-size) 0 var(--unit-size);
background: var(--white);
@ -107,6 +107,20 @@ a:active {
transition: all 0.8s ease;
}
#instance a:focus svg,
#instance a:hover svg {
fill: var(--bg1);
transition: all 0.8s ease;
}
summary:hover > *,
summary:focus > * {
border-radius: var(--unit-size);
background: var(--white);
fill: var(--bg1);
transition: all 0.8s ease;
}
hr {
all: unset;
display: block;

4
public/assets/css/left/left.css
View File

@ -21,6 +21,10 @@
opacity: 100%;
}
#left-container[open] a {
tab-index: 0;
}
#left-container[open] {
width: calc(100vw / 4);
border-right: solid 1px var(--bg2);

20
templates/base.html.twig
View File

@ -29,19 +29,19 @@
</head>
<body>
{% block header %}
<div id='header'>
<nav id='instance'>
<a href="{{ path('main_public') }}">
{{ icon('logo', 'icon icon-logo') | raw }}
<h1> {{ config('site', 'name') }} </h1>
</a>
</nav>
</div>
<div id='header'>
<nav id='instance'>
<a href="{{ path('main_public') }}" tabindex="2">
{{ icon('logo', 'icon icon-logo') | raw }}
<h1> {{ config('site', 'name') }} </h1>
</a>
</nav>
</div>
{% endblock header %}
<div class="container">
<details class="panel" id="left-container">
<summary>
<summary tabindex="1">
{{ icon('person', 'icon icon-left') | raw }}
</summary>
{{ block("leftpanel", "stdgrid.html.twig") }}
@ -52,7 +52,7 @@
{% block javascripts %}{% endblock javascripts %}
<details class="panel" id="right-container">
<summary>
<summary tabindex="3">
{{ icon('notes', 'icon icon-right') | raw }}
</summary>
{{ block("rightpanel", "stdgrid.html.twig") }}