Merge pull request #375 from cultuurnet/feature/WID-544

WID-544 - Make form labels accessible
cultuurnet · Jan 11, 2024 · 34bc555 · 34bc555
2 parents 86cf326 + bbac101
commit 34bc555
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 15 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
@@ -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
@@ -1,15 +1,15 @@
 <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 %}
         {% for option_key, option in options %}
            <option value="{{ option_key }}" {% if option_key == default_option %} selected{% endif %}>{{ option.label }}</option>
         {% endfor %}
     </select>
-</div>
+</div>
diff --git 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({' ': '-'}) }}-{{ id }}">
                                 {{  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({' ': '-'}) }}-{{ 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 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 }}
                             </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({' ': '-'}) }}-{{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>
+                            <label for="{{ settings_fields.time.date_search.label | lower | replace({' ': '-'}) }}-{{id}}">
                                 {{  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({' ': '-'}) }}-{{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>
+                                        <label for="{{ 'from' | transTo(preferredLanguage, 'when') | lower | replace({' ': '-'}) }}-{{id}}">
                                             {{ '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({' ': '-'}) }}-{{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>
+                                        <label for="{{ 'to'| transTo(preferredLanguage, 'when') | lower | replace({' ': '-'})  }}-{{id}}">
                                             {{ '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({' ': '-'})  }}-{{id}}" type="text" class="cnw_form-control cnw_col  cnw_form-date-end" name="search-form[{{ id }}][date-end]" autocomplete="off"/>
                                     </div>
                                 </div>
                             {% endif %}