a11y: add group role to blocks (#88620)

wcs/blocks.py

@@ -461,6 +461,7 @@ class BlockSubWidget(CompositeWidget):
 class BlockWidget(WidgetList):
     template_name = 'qommon/forms/widgets/block.html'
     always_include_add_button = True
+    a11y_role = 'group'
 
     def __init__(
         self,
@@ -498,6 +499,10 @@ class BlockWidget(WidgetList):
             **kwargs,
         )
 
+    @property
+    def a11y_labelledby(self):
+        return bool(self.title and self.label_display != 'hidden')
+
     def set_value(self, value):
         from .fields.block import BlockRowValue
 
@@ -566,7 +571,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 uses 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 %}