From 93686b2ef08b615abfcfdb38fd8da2f0ee1fe84d Mon Sep 17 00:00:00 2001
From: Bram Pauwelyn <brampauwelyn@users.noreply.github.com>
Date: Mon, 8 Jan 2024 12:49:22 +0100
Subject: [PATCH 1/3] WID-544 - Make form labels accessible

---
 .../group-filter-select_multiple.html.twig    |  4 ++--
 .../group-filter-select_single.html.twig      |  6 ++---
 .../search-form-widget.html.twig              | 22 +++++++++----------
 3 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/views/widgets/search-form-widget/group-filter-select_multiple.html.twig b/views/widgets/search-form-widget/group-filter-select_multiple.html.twig
index 2cbc522df..3cd3a3255 100644
--- a/views/widgets/search-form-widget/group-filter-select_multiple.html.twig
+++ b/views/widgets/search-form-widget/group-filter-select_multiple.html.twig
@@ -1,8 +1,8 @@
 <div class="cnw_form-check">
     <span class="cnw_form-check--label">{{  label }}</span>
     {% for option_key, option in options %}
-        <label class="form-check-label">
-            <input type="checkbox" name="{{ name }}" value="{{ option_key }}">
+        <label for="{{ option.label | lower| replace({' ': '-'}) }}" class="form-check-label">
+            <input id="{{ option.label | lower| replace({' ': '-'}) }}" type="checkbox" name="{{ name }}" value="{{ option_key }}">
             {{ option.label }}
         </label>
     {% endfor %}
diff --git a/views/widgets/search-form-widget/group-filter-select_single.html.twig b/views/widgets/search-form-widget/group-filter-select_single.html.twig
index aa5bfc362..4eb18c8d5 100644
--- a/views/widgets/search-form-widget/group-filter-select_single.html.twig
+++ b/views/widgets/search-form-widget/group-filter-select_single.html.twig
@@ -1,10 +1,10 @@
 <div class="cnw_form-group">
     {% if label %}
-        <label>
+        <label for="{{ label | lower | replace({' ': '-'}) }}">
            {{ label }}
         </label>
     {% endif %}
-    <select class="cnw_form-control" name="{{ name }}" data-default-value="{{ default_option }}">
+    <select id="{{ label | lower | replace({' ': '-'}) }}" class="cnw_form-control" name="{{ name }}" data-default-value="{{ default_option }}">
         {% if placeholder %}
             <option value="" {% if -1 == default_option %} selected{% endif %}>{{ placeholder }}</option>
         {% endif %}
@@ -12,4 +12,4 @@
            <option value="{{ option_key }}" {% if option_key == default_option %} selected{% endif %}>{{ option.label }}</option>
         {% endfor %}
     </select>
-</div>
+</div>
\ No newline at end of file
diff --git a/views/widgets/search-form-widget/search-form-widget.html.twig b/views/widgets/search-form-widget/search-form-widget.html.twig
index 3b89da3a3..1b897fda9 100644
--- a/views/widgets/search-form-widget/search-form-widget.html.twig
+++ b/views/widgets/search-form-widget/search-form-widget.html.twig
@@ -13,10 +13,10 @@
                 <div class="cnw_col">
                     {% if settings_fields.type.keyword_search.enabled %}
                         <div class="cnw_form-group cnw_zoek-wat">
-                            <label>
+                            <label for="{{ settings_fields.type.keyword_search.label | lower | replace({' ': '-'}) }}">
                                 {{  settings_fields.type.keyword_search.label }}
                             </label>
-                            <input type="text" class="cnw_form-control" name="search-form[{{ id }}][what]" placeholder="{{  settings_fields.type.keyword_search.placeholder }}">
+                            <input id="{{ settings_fields.type.keyword_search.label | lower | replace({' ': '-'}) }}" type="text" class="cnw_form-control" name="search-form[{{ id }}][what]" placeholder="{{  settings_fields.type.keyword_search.placeholder }}">
                         </div>
                     {% endif %}
 
@@ -32,10 +32,10 @@
                 <div class="cnw_col">
                     {% if  settings_fields.location.keyword_search.enabled %}
                         <div class="cnw_form-group cnw_zoek-waar">
-                            <label class="cnw_form-control-label">
-                                {{  settings_fields.location.keyword_search.label }}
+                            <label for="{{ settings_fields.location.keyword_search.label | lower | replace({' ': '-'}) }}" class="cnw_form-control-label">
+                                {{  settings_fields.location.keyword_search.label | lower | replace({' ': '-'}) }}
                             </label>
-                            <input type="text" class="cnw_form-control cnw_form-autocomplete" id="where-{{ id }}" name="search-form[{{ id }}][where]" placeholder="{{  settings_fields.location.keyword_search.placeholder }}" data-autocomplete-path="{{ when_autocomplete_path }}" data-autocomplete-language="{{ preferredLanguage }}">
+                            <input id="{{ settings_fields.location.keyword_search.label | lower | replace({' ': '-'}) }}" type="text" class="cnw_form-control cnw_form-autocomplete" id="where-{{ id }}" name="search-form[{{ id }}][where]" placeholder="{{  settings_fields.location.keyword_search.placeholder }}" data-autocomplete-path="{{ when_autocomplete_path }}" data-autocomplete-language="{{ preferredLanguage }}">
                             <p class="cnw_form-control-feedback element-invisible">{{ 'warning_no_city_selected' | transTo(preferredLanguage) }}</p>
                         </div>
                     {% endif %}
@@ -52,10 +52,10 @@
                 <div class="cnw_col">
                     {%  if  settings_fields.time.date_search.enabled %}
                         <div class="cnw_form-group cnw_zoek-wanneer">
-                            <label>
+                            <label for="{{ settings_fields.time.date_search.label | lower | replace({' ': '-'}) }}">
                                 {{  settings_fields.time.date_search.label }}
                             </label>
-                            <select class="cnw_form-control cnw_form-control-date" name="search-form[{{ id }}][when]" data-default-value="{{ defaults.when }}">
+                            <select id="{{ settings_fields.time.date_search.label | lower | replace({' ': '-'}) }}" class="cnw_form-control cnw_form-control-date" name="search-form[{{ id }}][when]" data-default-value="{{ defaults.when }}">
                                 {% if settings_fields.time.date_search.placeholder %}
                                     <option value="">{{ settings_fields.time.date_search.placeholder }}</option>
                                 {% endif %}
@@ -85,16 +85,16 @@
                             {% if settings_fields.time.date_search.options.custom_date %}
                                 <div class="cnw_form-custom-date"{% if defaults.when != 'custom_date' %} style="display: none;" {% endif %}>
                                     <div class="cnw_form-custom-date-group cnw_form-custom-date-group-start">
-                                        <label>
+                                        <label for="{{ 'from' | transTo(preferredLanguage, 'when') | lower | replace({' ': '-'}) }}">
                                             {{ 'from'| transTo(preferredLanguage, 'when') }}
                                         </label>
-                                        <input type="text" class="cnw_form-control cnw_col cnw_form-date-start" name="search-form[{{ id }}][date-start]" autocomplete="off"/>
+                                        <input id="{{ 'from' | transTo(preferredLanguage, 'when') | lower | replace({' ': '-'}) }}" type="text" class="cnw_form-control cnw_col cnw_form-date-start" name="search-form[{{ id }}][date-start]" autocomplete="off"/>
                                     </div>
                                     <div class="cnw_form-custom-date-group cnw_form-custom-date-group-end">
-                                        <label>
+                                        <label for="{{ 'to'| transTo(preferredLanguage, 'when') | lower | replace({' ': '-'})  }}">
                                             {{ 'to'| transTo(preferredLanguage, 'when') }}
                                         </label>
-                                        <input type="text" class="cnw_form-control cnw_col  cnw_form-date-end" name="search-form[{{ id }}][date-end]" autocomplete="off"/>
+                                        <input id="{{ 'to'| transTo(preferredLanguage, 'when') | lower | replace({' ': '-'})  }}" type="text" class="cnw_form-control cnw_col  cnw_form-date-end" name="search-form[{{ id }}][date-end]" autocomplete="off"/>
                                     </div>
                                 </div>
                             {% endif %}

From 78797803be10c39b1e381131371b45e7cf4764bf Mon Sep 17 00:00:00 2001
From: Bram Pauwelyn <brampauwelyn@users.noreply.github.com>
Date: Thu, 11 Jan 2024 09:38:02 +0100
Subject: [PATCH 2/3] WID-544 - postfix with id to make it more unique

---
 .../search-form-widget.html.twig              | 20 +++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/views/widgets/search-form-widget/search-form-widget.html.twig b/views/widgets/search-form-widget/search-form-widget.html.twig
index 1b897fda9..6f553125c 100644
--- a/views/widgets/search-form-widget/search-form-widget.html.twig
+++ b/views/widgets/search-form-widget/search-form-widget.html.twig
@@ -13,10 +13,10 @@
                 <div class="cnw_col">
                     {% if settings_fields.type.keyword_search.enabled %}
                         <div class="cnw_form-group cnw_zoek-wat">
-                            <label for="{{ settings_fields.type.keyword_search.label | lower | replace({' ': '-'}) }}">
+                            <label for="{{ settings_fields.type.keyword_search.label  | lower | replace({' ': '-'}) }}-{{ id }}">
                                 {{  settings_fields.type.keyword_search.label }}
                             </label>
-                            <input id="{{ settings_fields.type.keyword_search.label | lower | replace({' ': '-'}) }}" type="text" class="cnw_form-control" name="search-form[{{ id }}][what]" placeholder="{{  settings_fields.type.keyword_search.placeholder }}">
+                            <input id="{{ settings_fields.type.keyword_search.label   | lower | replace({' ': '-'}) }}-{{ id }}" type="text" class="cnw_form-control" name="search-form[{{ id }}][what]" placeholder="{{  settings_fields.type.keyword_search.placeholder }}">
                         </div>
                     {% endif %}
 
@@ -32,10 +32,10 @@
                 <div class="cnw_col">
                     {% if  settings_fields.location.keyword_search.enabled %}
                         <div class="cnw_form-group cnw_zoek-waar">
-                            <label for="{{ settings_fields.location.keyword_search.label | lower | replace({' ': '-'}) }}" class="cnw_form-control-label">
+                            <label for="{{ settings_fields.location.keyword_search.label | lower | replace({' ': '-'}) }}-{{id}}" class="cnw_form-control-label">
                                 {{  settings_fields.location.keyword_search.label | lower | replace({' ': '-'}) }}
                             </label>
-                            <input id="{{ settings_fields.location.keyword_search.label | lower | replace({' ': '-'}) }}" type="text" class="cnw_form-control cnw_form-autocomplete" id="where-{{ id }}" name="search-form[{{ id }}][where]" placeholder="{{  settings_fields.location.keyword_search.placeholder }}" data-autocomplete-path="{{ when_autocomplete_path }}" data-autocomplete-language="{{ preferredLanguage }}">
+                            <input id="{{ settings_fields.location.keyword_search.label | lower | replace({' ': '-'}) }}-{{id}}" type="text" class="cnw_form-control cnw_form-autocomplete" id="where-{{ id }}" name="search-form[{{ id }}][where]" placeholder="{{  settings_fields.location.keyword_search.placeholder }}" data-autocomplete-path="{{ when_autocomplete_path }}" data-autocomplete-language="{{ preferredLanguage }}">
                             <p class="cnw_form-control-feedback element-invisible">{{ 'warning_no_city_selected' | transTo(preferredLanguage) }}</p>
                         </div>
                     {% endif %}
@@ -52,10 +52,10 @@
                 <div class="cnw_col">
                     {%  if  settings_fields.time.date_search.enabled %}
                         <div class="cnw_form-group cnw_zoek-wanneer">
-                            <label for="{{ settings_fields.time.date_search.label | lower | replace({' ': '-'}) }}">
+                            <label for="{{ settings_fields.time.date_search.label | lower | replace({' ': '-'}) }}-{{id}}">
                                 {{  settings_fields.time.date_search.label }}
                             </label>
-                            <select id="{{ settings_fields.time.date_search.label | lower | replace({' ': '-'}) }}" class="cnw_form-control cnw_form-control-date" name="search-form[{{ id }}][when]" data-default-value="{{ defaults.when }}">
+                            <select id="{{ settings_fields.time.date_search.label | lower | replace({' ': '-'}) }}-{{id}}" class="cnw_form-control cnw_form-control-date" name="search-form[{{ id }}][when]" data-default-value="{{ defaults.when }}">
                                 {% if settings_fields.time.date_search.placeholder %}
                                     <option value="">{{ settings_fields.time.date_search.placeholder }}</option>
                                 {% endif %}
@@ -85,16 +85,16 @@
                             {% if settings_fields.time.date_search.options.custom_date %}
                                 <div class="cnw_form-custom-date"{% if defaults.when != 'custom_date' %} style="display: none;" {% endif %}>
                                     <div class="cnw_form-custom-date-group cnw_form-custom-date-group-start">
-                                        <label for="{{ 'from' | transTo(preferredLanguage, 'when') | lower | replace({' ': '-'}) }}">
+                                        <label for="{{ 'from' | transTo(preferredLanguage, 'when') | lower | replace({' ': '-'}) }}-{{id}}">
                                             {{ 'from'| transTo(preferredLanguage, 'when') }}
                                         </label>
-                                        <input id="{{ 'from' | transTo(preferredLanguage, 'when') | lower | replace({' ': '-'}) }}" type="text" class="cnw_form-control cnw_col cnw_form-date-start" name="search-form[{{ id }}][date-start]" autocomplete="off"/>
+                                        <input id="{{ 'from' | transTo(preferredLanguage, 'when') | lower | replace({' ': '-'}) }}-{{id}}" type="text" class="cnw_form-control cnw_col cnw_form-date-start" name="search-form[{{ id }}][date-start]" autocomplete="off"/>
                                     </div>
                                     <div class="cnw_form-custom-date-group cnw_form-custom-date-group-end">
-                                        <label for="{{ 'to'| transTo(preferredLanguage, 'when') | lower | replace({' ': '-'})  }}">
+                                        <label for="{{ 'to'| transTo(preferredLanguage, 'when') | lower | replace({' ': '-'})  }}-{{id}}">
                                             {{ 'to'| transTo(preferredLanguage, 'when') }}
                                         </label>
-                                        <input id="{{ 'to'| transTo(preferredLanguage, 'when') | lower | replace({' ': '-'})  }}" type="text" class="cnw_form-control cnw_col  cnw_form-date-end" name="search-form[{{ id }}][date-end]" autocomplete="off"/>
+                                        <input id="{{ 'to'| transTo(preferredLanguage, 'when') | lower | replace({' ': '-'})  }}-{{id}}" type="text" class="cnw_form-control cnw_col  cnw_form-date-end" name="search-form[{{ id }}][date-end]" autocomplete="off"/>
                                     </div>
                                 </div>
                             {% endif %}

From d7e0b29f4931fd7d3461f8e2173e9ece28da5552 Mon Sep 17 00:00:00 2001
From: Bram Pauwelyn <brampauwelyn@users.noreply.github.com>
Date: Thu, 11 Jan 2024 09:41:00 +0100
Subject: [PATCH 3/3] WID-544 - Fix lower casing of what search label

---
 views/widgets/search-form-widget/search-form-widget.html.twig | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/views/widgets/search-form-widget/search-form-widget.html.twig b/views/widgets/search-form-widget/search-form-widget.html.twig
index 6f553125c..023e6d3a1 100644
--- a/views/widgets/search-form-widget/search-form-widget.html.twig
+++ b/views/widgets/search-form-widget/search-form-widget.html.twig
@@ -33,7 +33,7 @@
                     {% if  settings_fields.location.keyword_search.enabled %}
                         <div class="cnw_form-group cnw_zoek-waar">
                             <label for="{{ settings_fields.location.keyword_search.label | lower | replace({' ': '-'}) }}-{{id}}" class="cnw_form-control-label">
-                                {{  settings_fields.location.keyword_search.label | lower | replace({' ': '-'}) }}
+                                {{  settings_fields.location.keyword_search.label }}
                             </label>
                             <input id="{{ settings_fields.location.keyword_search.label | lower | replace({' ': '-'}) }}-{{id}}" type="text" class="cnw_form-control cnw_form-autocomplete" id="where-{{ id }}" name="search-form[{{ id }}][where]" placeholder="{{  settings_fields.location.keyword_search.placeholder }}" data-autocomplete-path="{{ when_autocomplete_path }}" data-autocomplete-language="{{ preferredLanguage }}">
                             <p class="cnw_form-control-feedback element-invisible">{{ 'warning_no_city_selected' | transTo(preferredLanguage) }}</p>