Merge pull request #4776 from open-formulieren/feature/4720-accessibi…

…lity-improvements-visibility-navigation Feature/4720 accessibility improvements visibility navigation
open-formulieren · Oct 28, 2024 · 7bae4ca · 7bae4ca
2 parents 2cfc111 + 9d3b9ba
commit 7bae4ca
Show file tree

Hide file tree

Showing 8 changed files with 22 additions and 7 deletions.
diff --git a/src/openforms/js/lang/formio/en.json b/src/openforms/js/lang/formio/en.json
@@ -35,6 +35,8 @@
   "maxFileSizeMessage": "The maximum file size is {{maxFileSize}}.",
   "removeFileMessage": "Remove {{fileName}}",
   "The uploaded file is not of an allowed type. It must be: {{ pattern }}.": "The uploaded file is not of an allowed type. It must be: {{ pattern }}.",
+  "browseFile": "select '{{ fileFieldLabel }}' file",
+  "browseFiles": "select '{{ fileFieldLabel }}' files",
   "{{ labels }} or {{ lastLabel }}": "{{ labels }} or {{ lastLabel }}",
   "invalid_time": "Only times between {{ minTime }} and {{ maxTime }} are allowed.",
   "You must select at least {{minCount}} items.": "Ensure this field has at least {{minCount}} checked options.",

diff --git a/src/openforms/js/lang/formio/nl.json b/src/openforms/js/lang/formio/nl.json
@@ -48,6 +48,8 @@
   "Press to open ": "Klik om te openen ",
   "or": "of",
   "browse": "blader",
+  "browseFile": "selecteer een '{{ fileFieldLabel }}'-bestand",
+  "browseFiles": "selecteer '{{ fileFieldLabel }}'-bestanden",
   "Switch to file upload": "Overschakelen naar bestandsupload",
   "Complete": "Afgerond",
   "File API & FileReader API not supported": "File API en FileReader API worden niet ondersteund",

diff --git a/src/openforms/submissions/templates/report/submission_report.html b/src/openforms/submissions/templates/report/submission_report.html
@@ -6,7 +6,11 @@
 <html lang="{{ LANG }}" class="{{ theme.get_classname }}">
     <head>
         <meta charset="utf-8">
-        <title>{% block title %}{% trans "Summary PDF" %}{% endblock %}</title>
+        <title>{% block title %}
+            {% blocktrans with form_name=report.form.name trimmed %}
+                {{ form_name }}: PDF report
+            {% endblocktrans %}
+        {% endblock %}</title>
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <link href="{% static 'bundles/pdf-css.css' %}" media="all" rel="stylesheet" />
         {% block extra_css %}{% endblock %}

diff --git a/src/openforms/templates/404.html b/src/openforms/templates/404.html
@@ -1,6 +1,7 @@
 {% extends 'master.html' %}
 
 {% block extra_css %}{% endblock %}
+{% block skiplink %}{% endblock %}
 
 {% block content %}
   <h1>Sorry, the requested page could not be found (404)</h1>

diff --git a/src/openforms/templates/account_blocked.html b/src/openforms/templates/account_blocked.html
@@ -1,6 +1,7 @@
 {% extends 'master.html' %}
 
 {% block extra_css %}{% endblock %}
+{% block skiplink %}{% endblock %}
 
 {% block content %}
 

diff --git a/src/openforms/templates/master.html b/src/openforms/templates/master.html
@@ -30,6 +30,10 @@
 </head>
 
 <body class="utrecht-page">
+    {% block skiplink %}
+        <a class="skiplink utrecht-link" href="#main-content">{% translate "Show content." %}</a>
+    {% endblock %}
+
     {# No point in putting this in a <template> tag, since it targets noscript #}
     {% if enable_analytics and analytics_tools_config.enable_google_analytics and analytics_tools_config.gtm_code %}
         {# Load the second part of the Google tag manager snippet #}
@@ -42,12 +46,10 @@
     {% block content %}
         {% block header %}
             {% include "includes/page-header.html" %}
-            <a class="skiplink" href="#main-content">{% translate "Show content." %}</a>
         {% endblock %}
 
         <div class="utrecht-page__content utrecht-page-content">
-            <main class="utrecht-page-content__main">
-                <span class="skiplink-target" id="main-content"></span>
+            <main class="utrecht-page-content__main" id="main-content">
                 {% block inner-content %}
                     Override <code>{% verbatim %}{% block inner-content %}{% endverbatim %}</code>
                     to get some actual content.

diff --git a/src/openforms/tests/e2e/test_file_upload.py b/src/openforms/tests/e2e/test_file_upload.py
@@ -69,7 +69,7 @@ def setUpTestData():
 
                 await page.wait_for_load_state("networkidle")
 
-                uploaded_file = page.get_by_text("test.txt")
+                uploaded_file = page.get_by_role("link", name="test.txt")
                 await expect(uploaded_file).to_be_visible()
 
                 await page.get_by_role("button", name="Volgende").click()

diff --git a/src/openforms/ui/static/ui/scss/components/skiplink/_skiplink.scss b/src/openforms/ui/static/ui/scss/components/skiplink/_skiplink.scss
@@ -1,7 +1,10 @@
 .skiplink {
   position: absolute;
-  top: -100vh;
-  left: -100vh;
+
+  &:not(&:focus) {
+    top: -100vh;
+    left: -100vh;
+  }
 
   @media print {
     display: none;