From ea157971fc93b7563fc3263b20d21d541a78ec16 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fr=C3=A9d=C3=A9ric=20P=C3=A9ters?= <fpeters@entrouvert.com>
Date: Sat, 7 Jan 2023 15:17:41 +0100
Subject: [PATCH] a11y: add accordion pattern to form view sections (#73116)

---
 wcs/forms/common.py                     |  8 ++++++--
 wcs/qommon/static/js/qommon.forms.js    | 18 +++++++++++++++---
 wcs/templates/wcs/formdata_history.html |  5 +++--
 wcs/templates/wcs/formdata_summary.html |  5 +++--
 4 files changed, 27 insertions(+), 9 deletions(-)

diff --git a/wcs/forms/common.py b/wcs/forms/common.py
index cd4b6a5dc..d3c83396d 100644
--- a/wcs/forms/common.py
+++ b/wcs/forms/common.py
@@ -636,8 +636,12 @@ class FormStatusPage(Directory, FormTemplateMixin):
             return
         r = TemplateIO(html=True)
         r += htmltext('<div class="section foldable">')
-        r += htmltext('<h2>%s</h2>') % _('Backoffice Data')
-        r += htmltext('<div class="dataview">')
+        r += htmltext(
+            '<h2><span role="button" aria-expanded="true" '
+            'aria-controls="sect-backoffice-data" '
+            'id="sect-backoffice-data-label">%s</span></h2>'
+        ) % _('Backoffice Data')
+        r += htmltext('<div class="dataview" id="sect-backoffice-data">')
         r += content
         r += htmltext('</div>')
         r += htmltext('</div>')
diff --git a/wcs/qommon/static/js/qommon.forms.js b/wcs/qommon/static/js/qommon.forms.js
index f62ffe99a..f3f88631b 100644
--- a/wcs/qommon/static/js/qommon.forms.js
+++ b/wcs/qommon/static/js/qommon.forms.js
@@ -124,10 +124,22 @@ Responsive_table_widget.prototype.init = function () {
 };
 
 $(function() {
-  $('.section.foldable > h2').click(function() {
-     if (document.body.dataset.gadjo !== 'true') {
-       $(this).parent().toggleClass('folded');
+  $('.section.foldable > h2 [role=button]').each(function() {
+     $(this).attr('tabindex', '0');
+  });
+  $('.section.foldable > h2 [role=button]').on('keydown', function(ev) {
+    if (ev.keyCode == 13 || ev.keyCode == 32) {  // enter || space
+      $(this).trigger('click');
+      return false;
+    }
+  });
+  $('.section.foldable > h2').off('click').click(function() {
+     var folded = $(this).parent().hasClass('folded');
+     var $button = $(this).find('[role=button]').first();
+     if ($button.length) {
+       $button[0].setAttribute('aria-expanded', `${folded}`);
      }
+     $(this).parent().toggleClass('folded');
      $(this).parent().find('.qommon-map').trigger('qommon:invalidate');
   });
 
diff --git a/wcs/templates/wcs/formdata_history.html b/wcs/templates/wcs/formdata_history.html
index 9a5e2ea2d..31de53fc4 100644
--- a/wcs/templates/wcs/formdata_history.html
+++ b/wcs/templates/wcs/formdata_history.html
@@ -1,9 +1,10 @@
 {% load i18n %}
 <div class="section foldable {% if view.should_fold_history %}folded{% endif %}" id="evolution-log">
   {% block log-section-title %}
-    <h2>{% trans "Log" %}</h2>
+    <h2><span role="button" aria-expanded="{{ view.should_fold_history|yesno:'false,true' }}"
+              aria-controls="sect-evolutions" id="sect-evolutions-label">{% trans "Log" %}</span></h2>
   {% endblock %}
-  <div>
+  <div id="sect-evolutions" role="region" aria-labelledby="sect-evolutions-label">
     <ul id="evolutions">
       {% for evolution in formdata.get_visible_evolution_parts %}
         {% with status=evolution.get_status display_parts=evolution.display_parts %}
diff --git a/wcs/templates/wcs/formdata_summary.html b/wcs/templates/wcs/formdata_summary.html
index 23c8757c5..1ef90f532 100644
--- a/wcs/templates/wcs/formdata_summary.html
+++ b/wcs/templates/wcs/formdata_summary.html
@@ -1,11 +1,12 @@
 {% load i18n %}
 <div class="section foldable {% if should_fold_summary %}folded{% endif %}" id="summary">
-  <h2>{% trans "Summary" %}
+  <h2><span role="button" aria-expanded="{{ should_fold_summary|yesno:'false,true' }}"
+            aria-controls="sect-dataview" id="sect-dataview-label">{% trans "Summary" %}</span>
     {% if not publisher.get_request.is_in_backoffice %}
       <span class="disclose-message">({% trans "display form details" %})</span>
     {% endif %}
   </h2>
-  <div class="dataview">
+  <div id="sect-dataview" role="region" aria-labelledby="sect-dataview-label" class="dataview">
     {% if user %}
       <div class="field username">
         <p class="label">{% trans "User name" %}</p>
-- 
2.39.2