Merge branch '240-add-skip-link' into 'main'

Resolve "Accessibility : Add a skip link in base template"

Closes #240

See merge request yaal/canaille!244

Author: azmeuk

canaille/static/css/base.css

@@ -43,12 +43,23 @@ body {
 
 .menu-container {
     margin-bottom: 1em;
+    margin-top: 1rem;
 }
 
 .menu-container .ui.item.menu {
     justify-content: normal;
 }
 
+#skip-link {
+    position:absolute;
+    top:-200px;
+}
+
+#skip-link:focus {
+    position:absolute;
+    top:8px;
+}
+
 footer {
     font-size: x-small;
     text-align: center;

canaille/templates/base.html

@@ -59,6 +59,7 @@
         {% block menu %}
             {% if menu %}
                 <div class="ui container menu-container">
+                    <a id="skip-link" href="#submenu">{% trans %}Skip main menu{% endtrans %}</a>
                     <nav class="ui stackable labeled icon seven item {% if self.submenu() | trim %}{% if not no_secret_key %}top {% endif %}attached{% endif %} menu">
                         {% if logo_url %}
                             <a href="/" class="item logo">
@@ -114,7 +115,7 @@
                         {% endif %}
                     </nav>
                     {% if self.submenu() | trim %}
-                        <nav class="ui bottom attached equal width borderless menu">
+                        <nav id="submenu" class="ui bottom attached equal width borderless menu">
                             {% block submenu %}{% endblock %}
                         </nav>
                     {% endif %}