feat(search): Make section inputs accessible #286

* restructure markup: Un-nest the input from its wrapping label, which
was not accessible and put it on the same level
* connect label and input by adding „label for“ and „input id“
attributes
* therefore, modularize and restructure template functions

modules/search.xqm

@@ -160,6 +160,48 @@ function search:section-checkbox-value-attribute-and-title($node, $model, $withi
         )
 };
 
+(:~
+ : Generates HTML attributes "value" and "id"
+ : @return  HTML attributes
+~:)
+declare
+    %templates:wrap
+function search:section-input-attributes($node, $model) {
+    let $section-id := $model?section/id
+    return
+        (
+            attribute value { $section-id },
+            attribute id { $section-id }
+        )
+};
+
+
+
+(:~
+ : Generates an HTML <label> attribute "for" and adds a span element containing the label text
+ : @return  HTML
+~:)
+declare
+    %templates:wrap
+function search:section-label($node, $model) {
+    let $section-id := $model?section/id
+    return
+        attribute for { $section-id },
+        search:sectionLabel($node, $model)
+};
+
+(:~
+ : Generates an HTML <span> element containing the section title
+ : @return  An HTML element containing a string
+~:)
+declare
+    %templates:replace
+function search:sectionLabel($node, $model) {
+    let $section-label := $model?section/label
+    return
+        <span class="c-indicator">{ $section-label/string() }</span>
+};
+
 (: TODO: Apply more plausible condition, needs removing the general trigger name="within" attribute for all checkboxes :)
 declare
     %templates:wrap
@@ -551,4 +593,7 @@ function search:paginate($node as node(), $model as map(*), $start as xs:int, $p
         }
     else
         ()
+};
+        templates:process($node/node(), $model)
+    }
 };

pages/search/_filter-sections.html

@@ -2,17 +2,19 @@
 <form method="get" action="$app/search" class="filter-form main-form" id="sectionFilter">
     <fieldset data-template="search:load-sections">
         <legend class="sr-only">Select sections</legend>
-            <div class="hsg-search-inputs-vertical">
-                <label id="entire-site-label" class="hsg-search-input-label">
-                    <input id="entire-site-input" type="checkbox" name="scope" value="entire_site" data-template="search:scope-checked"/>
-                    <span class="c-indicator">Entire Office of The Historian Website</span>
-                </label>
-                <div class="filter-subsections">
-                    <label class="hsg-search-input-label" data-template="templates:each"
-                           data-template-from="sections" data-template-to="section">
-                        <input class="hsg-search-input" type="checkbox" name="within" data-template="search:section-checkbox-value-attribute-and-title"/>
+            <ul class="hsg-search-inputs-vertical">
+                <li>
+                    <label id="entire-site-label" class="hsg-search-input-label">
+                        <input id="entire-site-input" type="checkbox" name="scope" value="entire_site" data-template="search:scope-checked"/>
+                        <span class="c-indicator">Entire Office of The Historian Website</span>
                     </label>
-                </div>
-            </div>
+                </li>
+                <ul class="filter-subsections">
+                    <li data-template="templates:each" data-template-from="sections" data-template-to="section">
+                        <input class="hsg-search-input" type="checkbox" name="within" data-template="search:section-input-attributes"/>
+                        <label class="hsg-search-input-label" data-template="search:section-label"/>
+                    </li>
+                </ul>
+            </ul>
     </fieldset>
 </form>