From 569f33da3a77970a0c4304a13d2f106447c17c36 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fr=C3=A9d=C3=A9ric=20P=C3=A9ters?= <fpeters@entrouvert.com>
Date: Sat, 28 Mar 2020 10:18:01 +0100
Subject: [PATCH 1/2] a11y: mark widgets as groups (#41119)

---
 tests/test_admin_pages.py                     | 11 +++++------
 wcs/qommon/form.py                            |  5 ++++-
 wcs/qommon/templates/qommon/forms/widget.html |  1 +
 3 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/tests/test_admin_pages.py b/tests/test_admin_pages.py
index e14f89021..57d2f9bdc 100644
--- a/tests/test_admin_pages.py
+++ b/tests/test_admin_pages.py
@@ -1305,10 +1305,10 @@ def test_form_edit_field_advanced(pub):
     resp = resp.click('Edit', href='1/')
     assert resp.forms[0]['label'].value == '1st field'
     assert '<legend>Additional parameters</legend>' in resp.text
-    assert '<label class="field--label" for="form_prefill">Prefill</label>' in resp.text
+    assert '>Prefill</label>' in resp.text
     # check the "prefill" field is under additional parameters
     assert resp.text.index('<legend>Additional parameters</legend>') < \
-            resp.text.index('<label class="field--label" for="form_prefill">Prefill</label>')
+            resp.text.index('>Prefill</label>')
 
     # complete the "prefill" field
     resp.forms[0]['prefill$type'] = 'String / Template'
@@ -1323,10 +1323,10 @@ def test_form_edit_field_advanced(pub):
     resp = resp.click('Edit', href='1/')
     assert resp.forms[0]['label'].value == '1st field'
     assert '<legend>Additional parameters</legend>' in resp.text
-    assert '<label class="field--label" for="form_data_source">Data Source</label>' in resp.text
+    assert '>Data Source</label>' in resp.text
     # check the "data source" field is under additional parameters
     assert resp.text.index('<legend>Additional parameters</legend>') < \
-            resp.text.index('<label class="field--label" for="form_data_source">Data Source</label>')
+            resp.text.index('>Data Source</label>')
 
     # start filling the "data source" field
     resp.forms[0]['data_source$type'] = 'json'
@@ -1336,8 +1336,7 @@ def test_form_edit_field_advanced(pub):
 
     # it should now appear before the additional parameters section
     resp = resp.click('Edit', href='1/')
-    assert resp.text.index('<legend>Additional parameters</legend>') > \
-            resp.text.index('<label class="field--label" for="form_data_source">Data Source</label>')
+    assert resp.text.index('<legend>Additional parameters</legend>') > resp.text.index('>Data Source</label>')
 
 
 def test_form_prefill_field(pub):
diff --git a/wcs/qommon/form.py b/wcs/qommon/form.py
index 736f5b01c..53ea12042 100644
--- a/wcs/qommon/form.py
+++ b/wcs/qommon/form.py
@@ -109,7 +109,7 @@ def render_title(self, title):
             title += htmltext('<span title="%s" class="required">*</span>') % _(
                     'This field is required.')
         return htmltext('<div class="title"><label class="field--label" '
-                        'for="form_%s">%s</label></div>') % (self.name, title)
+                        'id="form_label_%s" for="form_%s">%s</label></div>') % (self.name, self.name, title)
     else:
         return ''
 
@@ -211,6 +211,7 @@ class SubmitWidget(quixote.form.widget.SubmitWidget):
 class RadiobuttonsWidget(quixote.form.RadiobuttonsWidget):
     template_name = 'qommon/forms/widgets/radiobuttons.html'
     has_inside_labels = True
+    content_extra_attributes = {'role': 'radiogroup'}
 
     def __init__(self, name, value=None, **kwargs):
         self.options_with_attributes = kwargs.pop('options_with_attributes', None)
@@ -472,6 +473,8 @@ class CommentWidget(Widget):
 
 
 class CompositeWidget(quixote.form.CompositeWidget):
+    content_extra_attributes = {'role': 'group'}
+
     def render_as_thead(self):
         r = TemplateIO(html=True)
         r += htmltext('<tr>\n')
diff --git a/wcs/qommon/templates/qommon/forms/widget.html b/wcs/qommon/templates/qommon/forms/widget.html
index 2d81acc99..169851f68 100644
--- a/wcs/qommon/templates/qommon/forms/widget.html
+++ b/wcs/qommon/templates/qommon/forms/widget.html
@@ -25,6 +25,7 @@
   {% endblock %}
   {% block widget-content %}
   <div class="content {{widget.content.content_extra_css_class}}"
+       aria-labelledby="form_label_{{widget.name}}"
      {% for attr, value in widget.content_extra_attributes.items %}
      {{attr}}="{{value}}"
      {% endfor %}
-- 
2.26.0

