Merge pull request #1248 from maykinmedia/issue/2349-A11y-1.3.1-statu…

…s-accordion-headings ♿ [#2349] Wrap headings around Case-status accordion buttons
maykinmedia · Jun 11, 2024 · 8b05f23 · 8b05f23
2 parents 9ea2955 + 54ea2eb
commit 8b05f23
Showing 1 changed file with 10 additions and 4 deletions.
diff --git a/src/open_inwoner/templates/pages/cases/statuses.html b/src/open_inwoner/templates/pages/cases/statuses.html
@@ -14,9 +14,13 @@ <h2 class="utrecht-heading-2" id="statuses">{% trans 'Status' %}</h2>
                 {% firstof 'content-'|add:id|add:'-id' as content_id %}
                     {% icon icon="circle" extra_classes="status-step" %}
                     <div class="status-list__notification status-list__notification--{{ status.status_indicator }}">
-                        <button class="button--borderless {% if case.end_statustype_data %}status-list__button{% endif %} {# Final status class #}{% if not case.end_statustype_data %}status-list__open-button{% endif %}" aria-controls="{{ content_id }}" aria-expanded="true" id="{{ id }}">
-                            <span class="link link--bold">{{ status.label }}</span>
-                            {% if case.end_statustype_data %}{% icon icon="expand_more" icon_position="after" outlined=True %}{% endif %} </button>
+                        <h3 class="utrecht-heading-3 utrecht-accordion__header">
+                            <button class="button--borderless {% if case.end_statustype_data %}status-list__button{% endif %} {# Final status class #}{% if not case.end_statustype_data %}status-list__open-button{% endif %}" aria-controls="{{ content_id }}" aria-expanded="true" id="{{ id }}">
+                                <span class="link link--bold">{{ status.label }}</span>
+                                {% if case.end_statustype_data %}{% icon icon="expand_more" icon_position="after" outlined=True %}{% endif %}
+                            </button>
+                        </h3>
+
                         <div class="status-list__notification-content {% if case.end_statustype_data %}status-content--open{% endif %} {% if not case.end_statustype_data %}status-content--open{% endif %}" id="{{ content_id }}">
                             <p class="utrecht-paragraph status-list__text utrecht-paragraph--oip utrecht-paragraph--oip-compact">
                                 {# Configurable texts #}
@@ -44,7 +48,9 @@ <h2 class="utrecht-heading-2" id="statuses">{% trans 'Status' %}</h2>
                 {% firstof 'completed-'|add:id|add:'-id' as completed_id %}
                     {% icon icon="task_alt" %}
                     <div class="status-list__notification">
-                        <button class="status-list__button button--borderless" aria-controls="{{ completed_id }}" aria-expanded="false" id="{{ id }}"><a href="#" class="link link-success">{{ status.label }}</a>{% icon icon="expand_more" icon_position="after" outlined=True %}</button>
+                        <h3 class="utrecht-heading-3 utrecht-accordion__header">
+                            <button class="status-list__button button--borderless" aria-controls="{{ completed_id }}" aria-expanded="false" id="{{ id }}"><a href="#" class="link link-success">{{ status.label }}</a>{% icon icon="expand_more" icon_position="after" outlined=True %}</button>
+                        </h3>
                         <div class="status-list__notification-content" id="{{ completed_id }}">
                             <p class="utrecht-paragraph status-list__text utrecht-paragraph--oip utrecht-paragraph--oip-compact">
                                 {# Configurable texts #}