Merge branch '1-accessibility' into 'main'

Resolve "Accessibility"

Closes #1

See merge request !7

templates/base.html

@@ -30,6 +30,11 @@
         .transition-opacity {
             transition: opacity .25s ease-in;
         }
+
+        .link-secondary {
+            color: #495057 !important;
+        }
+
         {% block extra_css %}{% endblock %}
     </style>
 </head>
@@ -39,14 +44,14 @@
     <div class="py-5 text-center">
         <img class="d-block mx-auto mb-4" src="{{ url_for('static', filename='img/logo.svg') }}" alt="PTB Logo"
              width="96" height="96">
-        <h2>{{ config["LOCALISATIONS"]["title"][request.language] }}</h2>
+        <h1 class="h2">{{ config["LOCALISATIONS"]["title"][request.language] }}</h1>
         <p class="lead">{% autoescape false %}{{ config["LOCALISATIONS"]["leadtext"][request.language] }}{% endautoescape %}</p>
     </div>
     {% block content %}{% endblock %}
 </main>
 
 <footer class="footer mt-auto">
-    <div class="container text-muted text-center text-small">
+    <div class="container text-center text-small">
         <p class="mb-1">
             {% for l in config["ENABLED_LOCALISATIONS"] %}
             {% if request.language == l -%}{{ l }}

templates/success.html

@@ -3,7 +3,7 @@
 {% block content %}
 <div class="pt-5 text-center">
     <img class="mx-auto mb-4 spinner processing transition-opacity" src="{{ url_for('static', filename='img/arrow-repeat.svg') }}" alt="Spinning arrow" height="136" aria-hidden="true">
-    <img class="mx-auto mb-4 success hidden transition-opacity" src="{{ url_for('static', filename='img/cloud-check.svg') }}" alt="Checkmark" height="136" aria-hidden="true" hidden>
+    <img class="mx-auto mb-4 success hidden transition-opacity" src="{{ url_for('static', filename='img/cloud-check.svg') }}" alt="Cloud with checkmark" height="136" aria-hidden="true" hidden>
     <p class="pt-4 lead processing transition-opacity">{% autoescape false %}{{ config["LOCALISATIONS"]["processingtext"][request.language] }}{% endautoescape %}</p>
     <p class="pt-4 lead success hidden transition-opacity" hidden>{% autoescape false %}{{ config["LOCALISATIONS"]["successtext"][request.language] }}{% endautoescape %}</p>
     <a class="pt-4 fs-1 lead success hidden transition-opacity icon-link icon-link-hover link-offset-2" style="--bs-icon-link-transform: translate3d(-.125rem, 0, 0);" href="{{ url_for('upload', language=request.language) }}">

templates/upload.html

@@ -11,16 +11,16 @@
                 {% else %}
                 {{ form.email.label(class="form-label") }}
                 {% endif %}
-                <a class="d-inline-block" tabindex="0" data-bs-toggle="popover" data-bs-trigger="hover focus" data-bs-placement="top" data-bs-custom-class="custom-popover" data-bs-delay='{"show":0,"hide":150}' data-bs-content="{{ config["LOCALISATIONS"]["email"]["helptext"][request.language] }}">
-                    <img src="{{ url_for('static', filename='img/info-circle-fill.svg') }}" alt="Checkmark" height="16" style="vertical-align: -0.155em;">
+                <a class="d-inline-block" data-bs-toggle="popover" data-bs-trigger="hover focus" data-bs-placement="top" data-bs-custom-class="custom-popover" data-bs-delay='{"show":0,"hide":150}' data-bs-content="{{ config["LOCALISATIONS"]["email"]["helptext"][request.language] }}">
+                    <img src="{{ url_for('static', filename='img/info-circle-fill.svg') }}" alt="Info circle" height="16" style="vertical-align: -0.155em;">
                 </a>
                 <div class="input-group">
                     {% if form.email.errors %}
-                    {{ form.email(class="form-control is-invalid", placeholder=config["LOCALISATIONS"]["email"]["placeholder"][request.language]) }}
+                    <input class="form-control is-invalid" id="email" name="email" placeholder="{{ config["LOCALISATIONS"]["email"]["placeholder"][request.language] }}" required="" type="text" value="" aria-label="{{ config["LOCALISATIONS"]["email"]["helptext"][request.language] }}">
                     {% elif form.language.data %}
-                    {{ form.email(class="form-control is-valid", placeholder=config["LOCALISATIONS"]["email"]["placeholder"][request.language]) }}
+                    <input class="form-control is-valid" id="email" name="email" placeholder="{{ config["LOCALISATIONS"]["email"]["placeholder"][request.language] }}" required="" type="text" value="" aria-label="{{ config["LOCALISATIONS"]["email"]["helptext"][request.language] }}">
                     {% else %}
-                    {{ form.email(class="form-control", placeholder=config["LOCALISATIONS"]["email"]["placeholder"][request.language]) }}
+                    <input class="form-control" id="email" name="email" placeholder="{{ config["LOCALISATIONS"]["email"]["placeholder"][request.language] }}" required="" type="text" value="" aria-label="{{ config["LOCALISATIONS"]["email"]["helptext"][request.language] }}">
                     {% endif %}
                     <span class="input-group-text">@ptb.de</span>
                     {% if form.email.errors %}
@@ -36,15 +36,15 @@
         <div class="row justify-content-center">
             <div class="col-sm-3 col-md-2 pt-2">
                 {{ form.language.label(class="form-label") }}
-                <a class="d-inline-block" tabindex="0" data-bs-toggle="popover" data-bs-trigger="hover focus" data-bs-placement="top" data-bs-custom-class="custom-popover" data-bs-delay='{"show":0,"hide":150}' data-bs-html="true" data-bs-content="{{ config["LOCALISATIONS"]["language"]["helptext"][request.language] }}">
-                    <img src="{{ url_for('static', filename='img/info-circle-fill.svg') }}" alt="Checkmark" height="16" style="vertical-align: -0.155em;">
+                <a class="d-inline-block" data-bs-toggle="popover" data-bs-trigger="hover focus" data-bs-placement="top" data-bs-custom-class="custom-popover" data-bs-delay='{"show":0,"hide":150}' data-bs-html="true" data-bs-content="{{ config["LOCALISATIONS"]["language"]["helptext"][request.language] }}">
+                    <img src="{{ url_for('static', filename='img/info-circle-fill.svg') }}" alt="Info circle" height="16" style="vertical-align: -0.155em;">
                 </a>
                 {% if form.language.errors %}
-                <select class="form-select is-invalid" id="{{ form.language.id }}" name="{{ form.language.name }}" required>
+                <select class="form-select is-invalid" id="{{ form.language.id }}" name="{{ form.language.name }}" required aria-label="{{ config["LOCALISATIONS"]["language"]["helptext"][request.language] }}">
                 {% elif form.language.data %}
-                <select class="form-select is-valid" id="{{ form.language.id }}" name="{{ form.language.name }}" required>
+                <select class="form-select is-valid" id="{{ form.language.id }}" name="{{ form.language.name }}" required aria-label="{{ config["LOCALISATIONS"]["language"]["helptext"][request.language] }}">
                 {% else %}
-                <select class="form-select" id="{{ form.language.id }}" name="{{ form.language.name }}" required>
+                <select class="form-select" id="{{ form.language.id }}" name="{{ form.language.name }}" required aria-label="{{ config["LOCALISATIONS"]["language"]["helptext"][request.language] }}">
                 {% endif %}
                     {% if not form.language.data %}
                     <option value="" disabled selected>{{ config["LOCALISATIONS"]["language"]["choose"][request.language] }}</option>
@@ -86,7 +86,7 @@
         </div>
     </form>
     <div class="py-5 text-center processing transition-opacity hidden" hidden>
-        <img id="processing_img" class="mx-auto mb-4 spinner" src="{{ url_for('static', filename='img/arrow-repeat.svg') }}" alt="Checkmark" height="136">
+        <img id="processing_img" class="mx-auto mb-4 spinner" src="{{ url_for('static', filename='img/arrow-repeat.svg') }}" alt="Spinning arrow" height="136">
         <p id="processing_text" class="pt-4 lead">{% autoescape false %}{{config["LOCALISATIONS"]["uploadingtext"][request.language]}}{% endautoescape %}</p>
     </div>
 </div>