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

2021-08-21 07:05:54 +01:00 · 2021-08-21 07:05:54 +01:00 · b8bb845e24
commit b8bb845e24
parent d2760f1250
8 changed files with 32 additions and 23 deletions
--- a/public/assets/css/base.css
+++ b/public/assets/css/base.css
@ -47,7 +47,6 @@
    height: 3rem;
    font-size: var(--main-size);
    display: flex;
-    justify-content: space-between;
    position: fixed;
    top: 0;
    background-color: var(--bg1);
@ -68,6 +67,8 @@
    display: flex;
    align-items: center;
    align-self: center;
+    margin-left: auto;
+    margin-right: auto;
 }

 #instance:focus svg,
@ -270,10 +271,10 @@
 /* MEDIA RESIZE */
@media (min-width: 1200px) {
    /* no need to make the panels disappear at this size */
-    .icon-left,
+    /*.icon-left,
    .icon-right {
        visibility: hidden;
-    }
+    }*/

 }
@media (max-width: 1200px) {
@ -286,8 +287,11 @@
    /* we need to control panel's view at this size */
    .icon-left,
    .icon-right {
-        display: block;
-
+        display: flex;
+        align-self: center;
+        align-items: center;
+        width: 1em;
+        height: 1em;
    }

    /* by default they are hidden */
@ -413,7 +417,7 @@

 /* BUTTONS AND INPUT SHENANIGANS */
 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;
    background-image: linear-gradient(180deg, var(--bg2), transparent) !important;
    color: var(--white) !important;
@ -423,7 +427,8 @@ input:not([type=radio]):not([type=checkbox]):not([type=text]):not([type=password

 textarea,
 input[type=text],
-input[type=password] {
+input[type=password],
+input[type=email] {
    font-size: inherit !important;
    display: inline-block;
    position: relative;
--- a/public/assets/css/left/left.css
+++ b/public/assets/css/left/left.css
@ -51,7 +51,7 @@

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

--- a/public/assets/icons/menu.svg.twig
+++ b/public/assets/icons/menu.svg.twig
@ -1,6 +1,6 @@
 <!-- https://github.com/primer/octicons -->
 <!-- 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>
 <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>
--- a/public/assets/icons/notes.svg.twig
+++ b/public/assets/icons/notes.svg.twig
@ -1,6 +1,6 @@
 <!-- https://github.com/primer/octicons -->
 <!-- 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>
        Create a note
    </title>
--- a/templates/base.html.twig
+++ b/templates/base.html.twig
@ -28,32 +28,34 @@
    {% endfor %}
 </head>

-<body class="bg">
+<body class="bg" aria-atomic="true">
    {% block header %}
        <header id='header' role="banner">
-            <details class="panel" id="left-container" role="group" aria-hidden="true">
-                <summary tabindex="0">
+            <details class="panel" id="left-container" aria-live="polite">
+                <summary tabindex="0" aria-roledescription="Left Panel. Expand to login, register or navigate this instance.">
                    {{ icon('menu', 'icon icon-left') | raw }}
-                    {{ block("leftpanel", "stdgrid.html.twig") }}
                </summary>
+                {{ block("leftpanel", "stdgrid.html.twig") }}
            </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>
                <h1> {{ config('site', 'name') }} </h1>
            </a>

-            <details class="panel" id="right-container" role="group" aria-hidden="true">
-                <summary tabindex="0">
+            {% if app.user %}
+            <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 }}
-                    {{ block("rightpanel", "stdgrid.html.twig") }}
                </summary>
+                {{ block("rightpanel", "stdgrid.html.twig") }}
            </details>
+            {% endif %}
        </header>
    {% endblock header %}

    <div class="container">
-        <div class='content'>
+        <div class='content' aria-roledescription="Main content.">
            {% block nav %}{% endblock %}
            {% block body %}{% endblock %}
            {% block javascripts %}{% endblock javascripts %}
--- a/templates/note/view.html.twig
+++ b/templates/note/view.html.twig
@ -16,12 +16,13 @@
            {% trans with {'%name%': reply_to} %} in reply to %name% {% endtrans %}
        {% endif %}

+        {% if app.user %}
        <div class="note-actions" aria-roledescription={{ 'Favourite, reply and recycle this note' | trans }}>
            {% if have_user %}
                {% for current_action in get_note_actions(note) %}
                    {{ form_start(current_action) }}
                        {% 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) }}
                            </span>
                        {% endif %}
@ -29,8 +30,9 @@
                {% endfor %}
            {% endif %}
        </div>
+        {% endif %}
    </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 %}
            {% apply markdown_to_html %}
                {{ note.getContent() }}
--- a/templates/sidepanel/left/left.html.twig
+++ b/templates/sidepanel/left/left.html.twig
@ -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'>

        {% if app.user %}
--- a/templates/sidepanel/right/right.html.twig
+++ b/templates/sidepanel/right/right.html.twig
@ -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 %}
        <section class="section-widget" role="complementary" aria-label={{ 'Create a new note.' | trans }}>
            <details class="section-title">