Merge branch '1-barrierefreiheit' into 'preview'

fix accessability issues

See merge request !460

doc.zih.tu-dresden.de/mkdocs.yml

@@ -170,13 +170,17 @@ theme:
 
   logo: assets/images/TUD_Logo_weiss_57.png
   second_logo: assets/images/zih_weiss.png
-
-# extends base css
-
+  features:
+    - navigation.instant
+    
+# extends base css/js
 extra_css:
 
   - stylesheets/extra.css
 
+extra_javascript:
+  - javascripts/extra.js
+
 markdown_extensions:
     - admonition
     - pymdownx.details
@@ -190,8 +194,11 @@ markdown_extensions:
         alternate_style: true
 
 extra:
-  homepage: https://tu-dresden.de
+  tud_homepage: https://tu-dresden.de
+  tud_name: "TU Dresden"
+  # second logo
   zih_homepage: https://tu-dresden.de/zih
+  zih_name: "center for information services and high performance computing (ZIH)"
   hpcsupport_mail: hpcsupport@zih.tu-dresden.de
 
   # links in footer

doc.zih.tu-dresden.de/tud_theme/javascripts/extra.js

+// keyboard navigation
+// allow to expand navigation items with nested items by
+let nav_links = document.querySelectorAll('.md-nav__link');
+
+Array.from(nav_links).forEach(label => {
+    label.addEventListener('keydown', e => {
+      if (e.key === 'Enter' || e.key === ' ' || e.key === 'ArrowLeft'|| e.key === 'ArrowRight') {
+        e.preventDefault();
+        label.click();
+      };
+    });
+  });
\ No newline at end of file

doc.zih.tu-dresden.de/tud_theme/partials/header.html

@@ -24,24 +24,25 @@
   >
 
     <!-- Link to home -->
+    <!-- TUD Logo -->
     <a
-      href="{{ config.extra.homepage | d(nav.homepage.url, true) | url }}"
-      title="{{ config.site_name | e }}"
+      href="{{ config.extra.tud_homepage | d(nav.homepage.url, true) | url }}"
+      title="{{ config.extra.tud_name | e }}"
       class="md-header__button md-logo"
-      aria-label="{{ config.site_name }}"
+      aria-label="link to {{ config.extra.tud_name }}"
       data-md-component="logo"
     >
-      {% include "partials/logo.html" %}
+      <img src="{{ config.theme.logo | url }}" alt="tu dresden logo" />
     </a>
-
+    <!-- ZIH Logo -->
     <a
     href="{{ config.extra.zih_homepage | url }}"
-    title="{{ config.zih_name | e }}"
+    title="{{ config.extra.zih_name | e }}"
     class="md-header__button zih-logo"
-    aria-label="{{ config.zih_name }}"
+    aria-label="link to{{ config.extra.zih_name }}"
     data-md-component="logo"
     >
-      <img src="{{ config.theme.second_logo | url }}" alt="logo" />
+      <img src="{{ config.theme.second_logo | url }}" alt="zih logo" />
     </a>
 
     <!-- Button to open drawer -->

doc.zih.tu-dresden.de/tud_theme/partials/nav-item.html

+<!--
+  Copyright (c) 2016-2021 Martin Donath <martin.donath@squidfunk.com>
+  Permission is hereby granted, free of charge, to any person obtaining a copy
+  of this software and associated documentation files (the "Software"), to
+  deal in the Software without restriction, including without limitation the
+  rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
+  sell copies of the Software, and to permit persons to whom the Software is
+  furnished to do so, subject to the following conditions:
+  The above copyright notice and this permission notice shall be included in
+  all copies or substantial portions of the Software.
+  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+  FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
+  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+  FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+  IN THE SOFTWARE.
+-->
+
+<!-- Wrap everything with a macro to reduce file roundtrips (see #2213) -->
+{% macro render(nav_item, path, level) %}
+
+  <!-- Determine class according to state -->
+  {% set class = "md-nav__item" %}
+  {% if nav_item.active %}
+    {% set class = class ~ " md-nav__item--active" %}
+  {% endif %}
+
+  <!-- Main navigation item with nested items -->
+  {% if nav_item.children %}
+
+    <!-- Determine whether to render item as a section -->
+    {% if "navigation.sections" in features and level == 1 + (
+      "navigation.tabs" in features
+    ) %}
+      {% set class = class ~ " md-nav__item--section" %}
+    {% endif %}
+
+    <!-- Render item with nested items -->
+    <li class="{{ class }} md-nav__item--nested">
+
+      <!-- Active checkbox expands items contained within nested section -->
+      {% set checked = "checked" if nav_item.active %}
+      {% if "navigation.expand" in features and not checked %}
+        <input
+          class="md-nav__toggle md-toggle"
+          data-md-toggle="{{ path }}"
+          data-md-state="indeterminate"
+          type="checkbox"
+          id="{{ path }}"
+          checked
+        />
+      {% else %}
+        <input
+          class="md-nav__toggle md-toggle"
+          data-md-toggle="{{ path }}"
+          type="checkbox"
+          id="{{ path }}"
+          {{ checked }}
+        />
+      {% endif %}
+
+      <!-- Expand active pages -->
+      <label class="md-nav__link" for="{{ path }}" tabindex="0" aria-haspopup="true">
+        {{ nav_item.title }}
+        <span class="md-nav__icon md-icon"></span>
+      </label>
+      <nav
+        class="md-nav"
+        data-md-level="{{ level }}"
+      >
+        <label class="md-nav__title" for="{{ path }}">
+          <span class="md-nav__icon md-icon"></span>
+          {{ nav_item.title }}
+        </label>
+        <ul 
+          class="md-nav__list"
+          data-md-scrollfix 
+          aria-hidden="true" 
+          aria-expanded="false"
+        >
+          <!-- Render nested item list -->
+          {% for nav_item in nav_item.children %}
+            {{ render(nav_item, path ~ "_" ~ loop.index, level + 1) }}
+          {% endfor %}
+        </ul>
+      </nav>
+    </li>
+
+  <!-- Currently active page -->
+  {% elif nav_item == page %}
+    <li class="{{ class }}">
+      {% set toc = page.toc %}
+
+      <!-- Active checkbox expands items contained within nested section -->
+      <input
+        class="md-nav__toggle md-toggle"
+        data-md-toggle="toc"
+        type="checkbox"
+        id="__toc"
+      />
+
+      <!-- Hack: see partials/toc.html for more information -->
+      {% set first = toc | first %}
+      {% if first and first.level == 1 %}
+        {% set toc = first.children %}
+      {% endif %}
+
+      <!-- Render table of contents, if not empty -->
+      {% if toc %}
+        <label class="md-nav__link md-nav__link--active" for="__toc">
+          {{ nav_item.title }}
+          <span class="md-nav__icon md-icon"></span>
+        </label>
+      {% endif %}
+      <a
+        href="{{ nav_item.url | url }}"
+        class="md-nav__link md-nav__link--active"
+      >
+        {{ nav_item.title }}
+      </a>
+
+      <!-- Show table of contents -->
+      {% if toc %}
+        {% include "partials/toc.html" %}
+      {% endif %}
+    </li>
+
+  <!-- Main navigation item -->
+  {% else %}
+    <li class="{{ class }}">
+      <a href="{{ nav_item.url | url }}" class="md-nav__link">
+        {{ nav_item.title }}
+      </a>
+    </li>
+  {% endif %}
+{% endmacro %}
+
+<!-- Render current and nested navigation items -->
+{{ render(nav_item, path, level) }}
\ No newline at end of file

doc.zih.tu-dresden.de/tud_theme/stylesheets/extra.css

@@ -11,6 +11,10 @@
         local('Open Sans Semibold'),
         url('./Open_Sans/OpenSans-Semibold-webfont.woff') format('woff')
 }
+/*  
+    change colors via "css color variables"
+    https://squidfunk.github.io/mkdocs-material/setup/changing-the-colors/#custom-colors
+*/
 :root {
     --md-text-font-family: 'Open Sans Regular', sans-serif;
     /* TUD CD colors */
@@ -31,7 +35,7 @@
     --tud-grey-70:                rgb(245, 245, 245);
     /* interaction color */
     --tud-red-90:                 rgb(221, 29, 29);
-
+    --fg-color--light:              rgba(0, 0, 0, 0.6);
 }
 
 .md-typeset h1, 
@@ -83,7 +87,14 @@ strong {
 .md-grid {
     max-width: 1600px;
 }
+/* accessabilty */
 
+/* hide toogles */
+.md-toggle {
+    left: -100vw;
+    position: absolute;
+}
+/* admonitions */
 .md-typeset code {
     word-break: normal;
     #background-color: var(--grey-75);
@@ -91,6 +102,14 @@ strong {
     background-color: var(--ms-blue);
 }
 
+* { 
+    --md-code-hl-comment-color:   var(--fg-color--light);
+}
+
+.md-clipboard {
+    color: var(--fg-color--light)
+}
+
 .md-typeset .admonition,
 .md-typeset details,
 .md-typeset code {