a11y: add group role to blocks (#88620)

tests/form_pages/test_block.py

@@ -77,6 +77,54 @@ def test_block_simple(pub):
     assert '>bar<' in resp
 
 
+def test_block_a11y(pub):
+    FormDef.wipe()
+    BlockDef.wipe()
+
+    block = BlockDef()
+    block.name = 'foobar'
+    block.fields = [
+        fields.CommentField(id='123', label='Test'),
+        fields.CommentField(id='234', label='Test2'),
+    ]
+    block.store()
+
+    formdef = FormDef()
+    formdef.name = 'form title'
+    formdef.fields = [
+        fields.BlockField(id='1', label='test', block_slug='foobar'),
+    ]
+    formdef.store()
+
+    app = get_app(pub)
+    resp = app.get(formdef.get_url())
+    assert not resp.pyquery('.BlockWidget')[0].attrib.get('role')
+    assert not resp.pyquery('.BlockWidget')[0].attrib.get('aria-labelledby')
+
+    block.fields = [
+        fields.StringField(id='123', label='Test'),
+        fields.StringField(id='234', label='Test2'),
+    ]
+    block.store()
+    resp = app.get(formdef.get_url())
+    assert resp.pyquery('.BlockWidget')[0].attrib.get('role') == 'group'
+    assert resp.pyquery('.BlockWidget')[0].attrib.get('aria-labelledby')
+    assert resp.pyquery('#' + resp.pyquery('.BlockWidget')[0].attrib.get('aria-labelledby'))
+
+    formdef.fields[0].label_display = 'subtitle'
+    formdef.store()
+    resp = app.get(formdef.get_url())
+    assert resp.pyquery('.BlockWidget')[0].attrib.get('role')
+    assert resp.pyquery('.BlockWidget')[0].attrib.get('aria-labelledby')
+    assert resp.pyquery('#' + resp.pyquery('.BlockWidget')[0].attrib.get('aria-labelledby'))
+
+    formdef.fields[0].label_display = 'hidden'
+    formdef.store()
+    resp = app.get(formdef.get_url())
+    assert not resp.pyquery('.BlockWidget')[0].attrib.get('role')
+    assert not resp.pyquery('.BlockWidget')[0].attrib.get('aria-labelledby')
+
+
 def test_block_required(pub):
     FormDef.wipe()
     BlockDef.wipe()

wcs/blocks.py

@@ -498,6 +498,20 @@ class BlockWidget(WidgetList):
             **kwargs,
         )
 
+    @property
+    def a11y_labelledby(self):
+        return bool(self.a11y_role)
+
+    @property
+    def a11y_role(self):
+        # don't mark block as a group if it has no label or no multiple data fields
+        if (
+            self.label_display != 'hidden'
+            and len([x for x in (self.block.fields or []) if not x.is_no_data_field]) > 1
+        ):
+            return 'group'
+        return None
+
     def set_value(self, value):
         from .fields.block import BlockRowValue
 
@@ -566,7 +580,9 @@ class BlockWidget(WidgetList):
     def render_title(self, title):
         attrs = {'id': 'form_label_%s' % self.get_name_for_id()}
         if not title or self.label_display == 'hidden':
-            return htmltag('span', **attrs) + htmltext('</span>')
+            # add a tag even if there's no label to display as it's used as an anchor point
+            # for links to errors.
+            return htmltag('div', **attrs) + htmltext('</div>')
 
         if self.label_display == 'normal':
             return super().render_title(title)

wcs/qommon/templates/qommon/forms/widgets/block.html

@@ -1,3 +1,5 @@
 {% extends "qommon/forms/widget.html" %}
 
 {% block widget-css-classes %}{{ block.super }} {% if widget.had_add_clicked %}wcs-block-add-clicked{% endif %} {% if widget.remove_button %}wcs-block-with-remove-button{% endif %}{% endblock %}
+
+{% block widget-attrs %}id="form_{{ widget.field.id }}" {{ block.super }}{% endblock %}