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

[TWIG][CSS][Accessibility] Note view accessibility improvements. Left and right panels icon rework (width and height weren't correct, position needs further work).

This commit is contained in:
Eliseu Amaro 2021-08-21 07:05:54 +01:00 committed by Hugo Sales
parent d2760f1250
commit b8bb845e24
Signed by: someonewithpc
GPG Key ID: 7D0C7EAFC9D835A0
8 changed files with 32 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -47,7 +47,6 @@
height: 3rem; height: 3rem;
font-size: var(--main-size); font-size: var(--main-size);
display: flex; display: flex;
justify-content: space-between;
position: fixed; position: fixed;
top: 0; top: 0;
background-color: var(--bg1); background-color: var(--bg1);
@ -68,6 +67,8 @@
display: flex; display: flex;
align-items: center; align-items: center;
align-self: center; align-self: center;
margin-left: auto;
margin-right: auto;
} }
#instance:focus svg, #instance:focus svg,
@ -270,10 +271,10 @@
/* MEDIA RESIZE */ /* MEDIA RESIZE */
@media (min-width: 1200px) { @media (min-width: 1200px) {
/* no need to make the panels disappear at this size */ /* no need to make the panels disappear at this size */
.icon-left, /*.icon-left,
.icon-right { .icon-right {
visibility: hidden; visibility: hidden;
} }*/
} }
@media (max-width: 1200px) { @media (max-width: 1200px) {
@ -286,8 +287,11 @@
/* we need to control panel's view at this size */ /* we need to control panel's view at this size */
.icon-left, .icon-left,
.icon-right { .icon-right {
display: block; display: flex;
align-self: center;
align-items: center;
width: 1em;
height: 1em;
} }
/* by default they are hidden */ /* by default they are hidden */
@ -413,7 +417,7 @@
/* BUTTONS AND INPUT SHENANIGANS */ /* BUTTONS AND INPUT SHENANIGANS */
button, button,
input:not([type=radio]):not([type=checkbox]):not([type=text]):not([type=password]) { input:not([type=radio]):not([type=checkbox]):not([type=text]):not([type=password]):not([type=email]) {
font-size: var(--small-size) !important; font-size: var(--small-size) !important;
background-image: linear-gradient(180deg, var(--bg2), transparent) !important; background-image: linear-gradient(180deg, var(--bg2), transparent) !important;
color: var(--white) !important; color: var(--white) !important;
@ -423,7 +427,8 @@ input:not([type=radio]):not([type=checkbox]):not([type=text]):not([type=password
textarea, textarea,
input[type=text], input[type=text],
input[type=password] { input[type=password],
input[type=email] {
font-size: inherit !important; font-size: inherit !important;
display: inline-block; display: inline-block;
position: relative; position: relative;

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

@ -51,7 +51,7 @@
#user-avatar:hover img, #user-avatar:hover img,
#user-avatar:focus img { #user-avatar:focus img {
border-radius: var(--unit-size) !important; border-radius: 50% !important;
box-shadow: var(--shadow-light) !important; box-shadow: var(--shadow-light) !important;
} }

2
public/assets/icons/menu.svg.twig
View File

@ -1,6 +1,6 @@
<!-- https://github.com/primer/octicons --> <!-- https://github.com/primer/octicons -->
<!-- MIT License --> <!-- MIT License -->
<svg class="{{ iconClass|default('') }}" xmlns="http://www.w3.org/2000/svg" width="16" height="16"> <svg class="{{ iconClass|default('') }}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1em 1em">
<title>Open left sidepanel.</title> <title>Open left sidepanel.</title>
<path fill-rule="evenodd" d="M1 2.75A.75.75 0 011.75 2h12.5a.75.75 0 110 1.5H1.75A.75.75 0 011 2.75zm0 5A.75.75 0 011.75 7h12.5a.75.75 0 110 1.5H1.75A.75.75 0 011 7.75zM1.75 12a.75.75 0 100 1.5h12.5a.75.75 0 100-1.5H1.75z"/> <path fill-rule="evenodd" d="M1 2.75A.75.75 0 011.75 2h12.5a.75.75 0 110 1.5H1.75A.75.75 0 011 2.75zm0 5A.75.75 0 011.75 7h12.5a.75.75 0 110 1.5H1.75A.75.75 0 011 7.75zM1.75 12a.75.75 0 100 1.5h12.5a.75.75 0 100-1.5H1.75z"/>
</svg> </svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 433 B

After

Width:  |  Height:  |  Size: 432 B

2
public/assets/icons/notes.svg.twig
View File

@ -1,6 +1,6 @@
<!-- https://github.com/primer/octicons --> <!-- https://github.com/primer/octicons -->
<!-- MIT License --> <!-- MIT License -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="{{ iconClass|default('') }}"> <svg xmlns="http://www.w3.org/2000/svg" class="{{ iconClass|default('') }}" viewBox="0 0 1em 1em">
<title> <title>
Create a note Create a note
</title> </title>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 916 B

After

Width:  |  Height:  |  Size: 915 B

20
templates/base.html.twig
View File

@ -28,32 +28,34 @@
{% endfor %} {% endfor %}
</head> </head>
<body class="bg"> <body class="bg" aria-atomic="true">
{% block header %} {% block header %}
<header id='header' role="banner"> <header id='header' role="banner">
<details class="panel" id="left-container" role="group" aria-hidden="true"> <details class="panel" id="left-container" aria-live="polite">
<summary tabindex="0"> <summary tabindex="0" aria-roledescription="Left Panel. Expand to login, register or navigate this instance.">
{{ icon('menu', 'icon icon-left') | raw }} {{ icon('menu', 'icon icon-left') | raw }}
{{ block("leftpanel", "stdgrid.html.twig") }}
</summary> </summary>
{{ block("leftpanel", "stdgrid.html.twig") }}
</details> </details>
<a id='instance' href="{{ path('main_public') }}" tabindex="0"> <a id='instance' href="{{ path('main_public') }}" tabindex="0" aria-roledescription="This instance name.">
<div aria-hidden="true">{{ icon('logo', 'icon icon-logo') | raw }}</div> <div aria-hidden="true">{{ icon('logo', 'icon icon-logo') | raw }}</div>
<h1> {{ config('site', 'name') }} </h1> <h1> {{ config('site', 'name') }} </h1>
</a> </a>
<details class="panel" id="right-container" role="group" aria-hidden="true"> {% if app.user %}
<summary tabindex="0"> <details class="panel" id="right-container" aria-live="polite">
<summary tabindex="0" aria-roledescription="Right Panel. Expand to create a new note.">
{{ icon('notes', 'icon icon-right') | raw }} {{ icon('notes', 'icon icon-right') | raw }}
{{ block("rightpanel", "stdgrid.html.twig") }}
</summary> </summary>
{{ block("rightpanel", "stdgrid.html.twig") }}
</details> </details>
{% endif %}
</header> </header>
{% endblock header %} {% endblock header %}
<div class="container"> <div class="container">
<div class='content'> <div class='content' aria-roledescription="Main content.">
{% 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

@ -16,12 +16,13 @@
{% trans with {'%name%': reply_to} %} in reply to %name% {% endtrans %} {% trans with {'%name%': reply_to} %} in reply to %name% {% endtrans %}
{% endif %} {% endif %}
{% if app.user %}
<div class="note-actions" aria-roledescription={{ 'Favourite, reply and recycle this note' | trans }}> <div class="note-actions" aria-roledescription={{ 'Favourite, reply and recycle this note' | trans }}>
{% if have_user %} {% if have_user %}
{% for current_action in get_note_actions(note) %} {% for current_action in get_note_actions(note) %}
{{ form_start(current_action) }} {{ form_start(current_action) }}
{% if current_action.submit_fav is defined %} {% if current_action.submit_fav is defined %}
<span title="Favourite this note." class="favourite-button-container" aria-atomic="true"> <span title="Favourite this note." class="favourite-button-container">
{{ form_widget(current_action.submit_fav) }} {{ form_widget(current_action.submit_fav) }}
</span> </span>
{% endif %} {% endif %}
@ -29,8 +30,9 @@
{% endfor %} {% endfor %}
{% endif %} {% endif %}
</div> </div>
{% endif %}
</div> </div>
<div class="e-content entry-content note-content" aria-roledescription=""> <div class="e-content entry-content note-content" aria-roledescription={{ 'This note content.' | trans }}>
{% block markdown %} {% block markdown %}
{% apply markdown_to_html %} {% apply markdown_to_html %}
{{ note.getContent() }} {{ note.getContent() }}

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

@ -1,4 +1,4 @@
<aside id='left-panel' tabindex="-1" role="feed" aria-label={{ 'Left page panel.' | trans }}> <aside id='left-panel' role="region" tabindex="-1">
<nav class='profile-nav'> <nav class='profile-nav'>
{% if app.user %} {% if app.user %}

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

@ -1,4 +1,4 @@
<aside id='right-panel' tabindex="-1" role="region" aria-label={{ 'Right page panel.' | trans }}> <aside id='right-panel' role="region" tabindex="-1">
{% if post_form is defined %} {% if post_form is defined %}
<section class="section-widget" role="complementary" aria-label={{ 'Create a new note.' | trans }}> <section class="section-widget" role="complementary" aria-label={{ 'Create a new note.' | trans }}>
<details class="section-title"> <details class="section-title">