From 3071eff036e3df0aa245dac6dd603f1875d33830 Mon Sep 17 00:00:00 2001
From: Bart van der Schoor <bart@maykinmedia.nl>
Date: Mon, 9 Jan 2023 10:12:47 +0100
Subject: [PATCH 1/4] [#789] Changed search filter markup to fieldset/legend

---
 .../components/templates/components/Filter/Filter.html   | 9 ++++-----
 .../templates/components/Form/ChoiceCheckbox.html        | 4 ++--
 src/open_inwoner/scss/components/Filter/Filter.scss      | 4 +++-
 3 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/src/open_inwoner/components/templates/components/Filter/Filter.html b/src/open_inwoner/components/templates/components/Filter/Filter.html
index 069a3a96f5..31546f24bb 100644
--- a/src/open_inwoner/components/templates/components/Filter/Filter.html
+++ b/src/open_inwoner/components/templates/components/Filter/Filter.html
@@ -1,16 +1,15 @@
 {% load i18n filter_tags icon_tags form_tags %}
 
 <div>
-    <aside class="filter filter--open" aria-label="{% trans "Filter" %}">
-        <h4 class="h4 filter__title">
+    <fieldset class="filter filter--open" aria-label="{% trans "Filter" %}">
+        <legend class="filter__title">
             {{ field.label }}
-            {% icon icon="expand_more" %}
-        </h4>
+        </legend>
         <div class="filter__list">
             {% for option in field.field.choices %}
                 {% choice_checkbox choice=option name=field.name data=field.data index=forloop.counter %}
             {% endfor %}
         </div>
-    </aside>
+    </fieldset>
     <hr class="divider divider--small">
 </div>
diff --git a/src/open_inwoner/components/templates/components/Form/ChoiceCheckbox.html b/src/open_inwoner/components/templates/components/Form/ChoiceCheckbox.html
index 161944c44e..0070a0e24f 100644
--- a/src/open_inwoner/components/templates/components/Form/ChoiceCheckbox.html
+++ b/src/open_inwoner/components/templates/components/Form/ChoiceCheckbox.html
@@ -1,6 +1,6 @@
 {% load l10n form_tags %}
 
-<label class="checkbox">
+<div class="checkbox">
     <input
         class="checkbox__input"
         type="checkbox"
@@ -10,4 +10,4 @@
         {% if choice.0 in data or choice.0|add:0 in data %}checked="checked"{% endif %}
     />
     <label class="checkbox__label" for="id_{{ name }}_{{ index }}">{{ choice.1 }}</label>
-</label>
+</div>
diff --git a/src/open_inwoner/scss/components/Filter/Filter.scss b/src/open_inwoner/scss/components/Filter/Filter.scss
index e59b9b6a2e..9df009eba7 100644
--- a/src/open_inwoner/scss/components/Filter/Filter.scss
+++ b/src/open_inwoner/scss/components/Filter/Filter.scss
@@ -1,4 +1,6 @@
 .filter {
+  border: 0 solid transparent;
+
   &--open {
     .filter__list {
       display: grid;
@@ -6,7 +8,7 @@
   }
 
   &__title {
-    color: var(--color-gray-dark);
+    color: var(--font-color-heading-4);
     font-family: var(--font-family-heading);
     font-size: var(--font-size-heading-4);
     font-weight: bold;

From 307757520ceda141882306eafb746a033f88dd70 Mon Sep 17 00:00:00 2001
From: Bart van der Schoor <bart@maykinmedia.nl>
Date: Mon, 9 Jan 2023 10:23:05 +0100
Subject: [PATCH 2/4] [#789] Changed search results to display as H3

---
 .../scss/components/SearchResults/SearchResults.scss   | 10 +++++-----
 src/open_inwoner/templates/pages/search.html           |  2 +-
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/open_inwoner/scss/components/SearchResults/SearchResults.scss b/src/open_inwoner/scss/components/SearchResults/SearchResults.scss
index 9be4b9fad6..c71033713f 100644
--- a/src/open_inwoner/scss/components/SearchResults/SearchResults.scss
+++ b/src/open_inwoner/scss/components/SearchResults/SearchResults.scss
@@ -21,7 +21,7 @@
     font-weight: normal;
   }
 
-  .search-results__item {
+  &__item {
     color: var(--color-black);
     font-family: var(--font-family-body);
     font-size: var(--font-size-body);
@@ -30,7 +30,7 @@
     text-decoration: none;
   }
 
-  .search-results__item-title {
+  &__item-title {
     color: var(--color-black);
     font-family: var(--font-family-body);
     font-size: var(--font-size-heading-3);
@@ -40,14 +40,14 @@
     margin: 0 0 6px;
   }
 
-  .search-results__item-info-container {
+  &__item-info-container {
     display: grid;
     grid-template-columns: 1fr auto;
     gap: var(--spacing-large);
     align-items: end;
   }
 
-  .search-results__item-intro {
+  &__item-intro {
     color: var(--color-black);
     font-family: var(--font-family-body);
     font-size: var(--font-size-body);
@@ -56,7 +56,7 @@
     margin: 0;
   }
 
-  .search-results__item-type {
+  &__item-type {
     color: var(--color-black);
     font-family: var(--font-family-body);
     font-size: var(--font-size-body);
diff --git a/src/open_inwoner/templates/pages/search.html b/src/open_inwoner/templates/pages/search.html
index 7156ff8f41..72cc846a23 100644
--- a/src/open_inwoner/templates/pages/search.html
+++ b/src/open_inwoner/templates/pages/search.html
@@ -38,7 +38,7 @@ <h2 class="h2 search-results__title">
                         <div class="search-results__list">
                             {% for hit in page_obj %}
                                 <a class="search-results__item" href="{% url 'pdc:product_detail' hit.slug %}">
-                                    <p class="search-results__item-title">{{ hit.name }}</p>
+                                    <h3 class="search-results__item-title">{{ hit.name }}</h3>
                                     <div class="search-results__item-info-container">
                                         <p class="search-results__item-intro">{{ hit.summary }}</p>
                                         <p class="search-results__item-type">{% trans "product" %}</p>

From 11b582db6a47566727c81412906f78abadfb1c3b Mon Sep 17 00:00:00 2001
From: Bart van der Schoor <bart@maykinmedia.nl>
Date: Mon, 9 Jan 2023 10:51:27 +0100
Subject: [PATCH 3/4] [#789] Mark completed questionnaire step as aria-checked

---
 .../components/templates/components/Step/StepIndicator.html     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/open_inwoner/components/templates/components/Step/StepIndicator.html b/src/open_inwoner/components/templates/components/Step/StepIndicator.html
index 36ac75ecf0..206654fc58 100644
--- a/src/open_inwoner/components/templates/components/Step/StepIndicator.html
+++ b/src/open_inwoner/components/templates/components/Step/StepIndicator.html
@@ -4,7 +4,7 @@
     <aside class="step-indicator" aria-label="{% trans "Stappen indicator" %}">
         <ol class="step-indicator__list">
             {% for step in steps %}
-                <li class="step-indicator__list-item{% if step.is_current %} step-indicator__list-item--active{% elif step.is_completed %} step-indicator__list-item--completed{% endif %} P" data-step={{ step.step }}>
+                <li class="step-indicator__list-item{% if step.is_current %} step-indicator__list-item--active{% elif step.is_completed %} step-indicator__list-item--completed{% endif %} P" data-step={{ step.step }} aria-checked="{{ step.is_completed|yesno:"true,false" }}">
                     {% if step.object %}
                         {% link href=step.object.get_absolute_url secondary=True bold=True text=step.object_display %}
                     {% endif %}

From f6fe73af3cd7377dff4b47abbfd26a3be6ff1451 Mon Sep 17 00:00:00 2001
From: Bart van der Schoor <bart@maykinmedia.nl>
Date: Mon, 9 Jan 2023 11:20:13 +0100
Subject: [PATCH 4/4] [#789] Changed questionnaire markup to fieldset/legend

---
 .../scss/components/Questionnaire/Questionnaire.scss        | 6 ++++++
 .../templates/pages/questionnaire/questionnaire-step.html   | 5 +++--
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/open_inwoner/scss/components/Questionnaire/Questionnaire.scss b/src/open_inwoner/scss/components/Questionnaire/Questionnaire.scss
index 9eec3fd019..398fbcf037 100644
--- a/src/open_inwoner/scss/components/Questionnaire/Questionnaire.scss
+++ b/src/open_inwoner/scss/components/Questionnaire/Questionnaire.scss
@@ -1,4 +1,10 @@
 .questionnaire {
+  &__fieldset {
+    border: 0 solid transparent;
+    legend {
+      padding: 0;
+    }
+  }
   &__list {
     list-style: none;
     padding: var(--spacing-large) 0;
diff --git a/src/open_inwoner/templates/pages/questionnaire/questionnaire-step.html b/src/open_inwoner/templates/pages/questionnaire/questionnaire-step.html
index eda4f9ef9f..83385d056a 100644
--- a/src/open_inwoner/templates/pages/questionnaire/questionnaire-step.html
+++ b/src/open_inwoner/templates/pages/questionnaire/questionnaire-step.html
@@ -17,7 +17,8 @@ <h1 class="h1" data-title="{{ form.instance.get_title }}" data-code="{{ form.ins
 
             {% step_indicator form.instance.depth form.instance.depth object_list=form.instance.get_tree_path object_list_str='question_subject' %}
 
-            <h4 class="h4" id="question">{{ form.instance.question }}</h4>
+            <fieldset class="questionnaire__fieldset">
+            <legend class="h4" id="question">{{ form.instance.question }}</legend>
 
             {% if form.instance.help_text %}
                 <p class="p p--compact">{{ form.instance.help_text }}</p>
@@ -53,7 +54,7 @@ <h4 class="h4" id="question">{{ form.instance.question }}</h4>
                     {% card_container products=form.instance.related_products.published small=True %}
                 {% endif %}
             {% endrender_form %}
-
+            </fieldset>
         {% endrender_column %}
     {% endrender_grid %}
 {% endblock %}