[TWIG] Improved accessibility menu

[COMPONENTS][RightPanel] Content form row is now preceeded by the content type form row
This commit is contained in:
Eliseu Amaro 2022-01-17 02:29:40 +00:00 committed by Hugo Sales
parent 04431885aa
commit 077cbcf424
Signed by: someonewithpc
GPG Key ID: 7D0C7EAFC9D835A0
2 changed files with 44 additions and 27 deletions

View File

@ -32,6 +32,7 @@
{{ form_row(blocks['post_form'].in) }} {{ form_row(blocks['post_form'].in) }}
{% endif %} {% endif %}
{{ form_row(blocks['post_form'].visibility) }} {{ form_row(blocks['post_form'].visibility) }}
{{ form_row(blocks['post_form'].content_type) }}
{{ form_row(blocks['post_form'].content) }} {{ form_row(blocks['post_form'].content) }}
{{ form_row(blocks['post_form'].attachments) }} {{ form_row(blocks['post_form'].attachments) }}

View File

@ -15,10 +15,12 @@
</title> </title>
{% block stylesheets %} {% block stylesheets %}
<link rel='preload' type='text/css' as='style' href="{{ asset('assets/default_theme/fonts/opensans/opensans.css') }}"> <link rel='preload' type='text/css' as='style'
href="{{ asset('assets/default_theme/fonts/opensans/opensans.css') }}">
<link rel='stylesheet' type='text/css' href="{{ asset('assets/default_theme/fonts/opensans/opensans.css') }}"> <link rel='stylesheet' type='text/css' href="{{ asset('assets/default_theme/fonts/opensans/opensans.css') }}">
<link rel='preload' type='text/css' as='style' href="{{ asset('assets/default_theme/fonts/poppins/poppins.css') }}"> <link rel='preload' type='text/css' as='style'
href="{{ asset('assets/default_theme/fonts/poppins/poppins.css') }}">
<link rel='stylesheet' type='text/css' href="{{ asset('assets/default_theme/fonts/poppins/poppins.css') }}"> <link rel='stylesheet' type='text/css' href="{{ asset('assets/default_theme/fonts/poppins/poppins.css') }}">
<link rel='stylesheet' type='text/css' href="{{ asset('assets/default_theme/css/root.css') }}"> <link rel='stylesheet' type='text/css' href="{{ asset('assets/default_theme/css/root.css') }}">
@ -48,34 +50,48 @@
<body> <body>
<aside class="accessibility-menu"> <aside class="accessibility-menu">
<h2 class="accessibility-menu-title" tabindex="0">{{ 'Accessibility menu.' | trans }}</h2> <strong class="accessibility-menu-title" tabindex="0">{{ 'Accessibility menu' | trans }}</strong>
<p tabindex="0">{{ 'Here you can find fast shortcuts to various page regions!' | trans }}</p>
<p tabindex="0">{{ 'Provided the following keyboard shortcut, the link is targeted.' | trans }}</p>
<br> <br>
<p tabindex="0">{{ 'Be mindful that another ' | trans }}<kbd>Tab</kbd>{{ ' is needed in order to focus.' | trans }} <section tabindex="0">
<p>{{ 'Here you can find fast shortcuts to various page regions!' | trans }}</p>
<br>
<p>
{{ 'Be mindful that a ' | trans }}<em><kbd>Tab</kbd></em>{{ ' followed by a ' | trans }}<em><kbd>Space</kbd></em>
{{ ' is needed in order to focus each panel. Other anchors do only require a ' | trans }} <em><kbd>Tab</kbd></em>
{{ ' however. ' | trans }}
</p> </p>
<p tabindex="0"> </section>
<section tabindex="0">
<p>{% trans %}The accesskey default shortcut keybinding is as follows: {% endtrans %}</p>
<p>
{% if is_firefox() == true %} {% if is_firefox() == true %}
<em><kbd>Alt</kbd> + <kbd>Shift</kbd> + "access key"</em> <em><kbd>Alt</kbd> + <kbd>Shift</kbd></em>
{% else %} {% else %}
<em><kbd>Alt</kbd> + "access key"</em> <em><kbd>Alt</kbd></em>
{% endif %} {% endif %}
</p> </p>
<br> </section>
<section tabindex="0">
<a id="anchor-accessibility-menu" accesskey="z" href="#anchor-accessibility-menu"> <a id="anchor-accessibility-menu" accesskey="z" href="#anchor-accessibility-menu">
<strong>{{ 'The keyboard key ' | trans }}<kbd>Z</kbd>{{ ' accesses this menu.' | trans }}</strong> <strong tabindex="0">{% trans %}Combined with the previous keybinding, the keyboard key
<strong>{{ 'The other access keys are:' | trans }}</strong> <kbd>Z</kbd> returns focus to this menu.{% endtrans %}</strong>
<strong tabindex="0">{% trans %}Further access keys are provided via:{% endtrans %}</strong>
</a> </a>
<nav> <nav>
<ul> <ul>
<li><a href="#anchor-left-panel" accesskey="s"><kbd>S</kbd>{{ ' for the Left panel.' | trans }}</a></li> <li><a href="#anchor-left-panel" accesskey="s">{% trans %}Left panel is accessed with
<li><a href="#anchor-main-content" accesskey="n"><kbd>N</kbd>{{ ' for the main content.' | trans }}</a></li> <kbd>S</kbd>{% endtrans %}</a></li>
<li><a href="#anchor-main-page" accesskey="y"><kbd>Y</kbd>{{ ' for the main page.' | trans }}</a></li> <li><a href="#anchor-main-content" accesskey="n">{% trans %}Main content is accessed with
<li><a href="#anchor-right-panel" accesskey="j"><kbd>J</kbd>{{ ' for the right panel.' | trans }}</a></li> <kbd>N</kbd>{% endtrans %}</a></li>
<li><a href="#anchor-main-page" accesskey="y">{% trans %}Main instance page is accessed with
<kbd>Y</kbd>{% endtrans %}</a></li>
<li><a href="#anchor-right-panel" accesskey="j">{% trans %}Finally, the right panel is accessed with
<kbd>J</kbd>{% endtrans %}</a></li>
</ul> </ul>
</nav> </nav>
</section>
</aside> </aside>
{% block header %} {% block header %}