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

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

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

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>