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

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

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 Hugo Sales
parent 8bff04dae1
commit 03fb7b43e8
Signed by: someonewithpc
GPG Key ID: 7D0C7EAFC9D835A0
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; margin: 0;
padding: 0; padding: 0;
} }
a:focus, a:focus,
a:hover, a:hover {
a:active {
border-radius: var(--unit-size); border-radius: var(--unit-size);
padding: 0 var(--unit-size) 0 var(--unit-size); padding: 0 var(--unit-size) 0 var(--unit-size);
background: var(--white); background: var(--white);
@ -107,6 +107,20 @@ a:active {
transition: all 0.8s ease; 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 { hr {
all: unset; all: unset;
display: block; display: block;

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

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

20
templates/base.html.twig
View File

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