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

@@ -500,7 +500,7 @@ class BlockWidget(WidgetList):
 
     @property
     def a11y_labelledby(self):
-        return bool(self.title and self.label_display != 'hidden')
+        return bool(self.a11y_role)
 
     @property
     def a11y_role(self):
@@ -580,7 +580,7 @@ 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':
-            # add a tag even if there's no label to display as it's uses as an anchor point
+            # 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>')