[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:
parent
d2760f1250
commit
b8bb845e24
GPG Key ID:
7D0C7EAFC9D835A0
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 433 B After Width: | Height: | Size: 432 B |
|
|
@ -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>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 916 B After Width: | Height: | Size: 915 B |
|
|
@ -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 %}
|
||||
|
|
|
|||
|
|
@ -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() }}
|
||||
|
|
|
|||
|
|
@ -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 %}
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
Loading…
Reference in New Issue