Merge pull request #419 from maykinmedia/fix/search-usables

[#789] Search and questionnaire accesibility fixes

Author: alextreme

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>

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>

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 %}

src/open_inwoner/scss/components/Filter/Filter.scss

@@ -1,12 +1,14 @@
 .filter {
+  border: 0 solid transparent;
+
   &--open {
     .filter__list {
       display: grid;
     }
   }
 
   &__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;

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;

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);

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 %}

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>