a11y: add group role to blocks (#88620) #1312
|
@ -77,6 +77,45 @@ 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.StringField(id='123', label='Test'),
|
||||
fields.StringField(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 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()
|
||||
|
|
|
@ -498,6 +498,17 @@ 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
|
||||
|
||||
if self.label_display != 'hidden':
|
||||
return 'group'
|
||||
return None
|
||||
|
||||
def set_value(self, value):
|
||||
from .fields.block import BlockRowValue
|
||||
|
||||
|
@ -566,7 +577,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>')
|
||||
fpeters
commented
J'étais parti pour totalement cacher ça (parce que le span prenait de la hauteur et je ne voyais pas son utilité), j'ai retrouvé l'utilité (servir d'ancre) mais j'ai transformé en div pour obtenir une hauteur de 0. J'étais parti pour totalement cacher ça (parce que le span prenait de la hauteur et je ne voyais pas son utilité), j'ai retrouvé l'utilité (servir d'ancre) mais j'ai transformé en div pour obtenir une hauteur de 0.
|
||||
|
||||
if self.label_display == 'normal':
|
||||
return super().render_title(title)
|
||||
|
|
|
@ -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 %}
|
||||
|
|
Loading…
Reference in New Issue
Mon intention initiale était d'également prendre en compte la présence d'au minimum 2 champs de données (cf https://git.entrouvert.org/entrouvert/wcs/commit/acab2c5f0) mais il me semble que se baser sur la présence d'un libellé affiché pour décréter que c'est un groupe de champs est suffisant par rapport aux usages.