Projet

Général

Profil

0005-a11y-put-radio-checkboxes-groups-in-fieldset-tags-62.patch

Frédéric Péters, 14 mars 2022 19:04

Télécharger (4,4 ko)

Voir les différences: 

Subject: [PATCH 5/5] a11y: put radio/checkboxes groups in <fieldset> tags
 (#62750)


 wcs/qommon/form.py                            | 12 ++++++++++--
 wcs/qommon/static/css/dc2/admin.scss          |  4 ++--
 wcs/qommon/static/css/qommon.scss             | 16 ++++++++++++----
 wcs/qommon/templates/qommon/forms/widget.html |  3 +++
 4 files changed, 27 insertions(+), 8 deletions(-)
wcs/qommon/form.py
100 100 
        if not getattr(self, 'has_inside_labels', False):
101 101 
            attrs['for'] = 'form_%s' % self.name
102 102 
        label = htmltag('label', **attrs)
103 
        return htmltext('<div class="title">') + label + htmltext('%s</label></div>') % title
103 
        tag = 'legend' if getattr(self, 'use_fieldset', False) else 'div'
104 
        return (
105 
            htmltext('<%s class="title">' % tag)
106 
            + label
107 
            + htmltext('%s</label>') % title
108 
            + htmltext('</%s>' % tag)
109 
        )
104 110 
    else:
105 111 
        return ''
106 112 

  		




  ......




  212
  218
  
    
class RadiobuttonsWidget(quixote.form.RadiobuttonsWidget):

  		




  213
  219
  
    
    template_name = 'qommon/forms/widgets/radiobuttons.html'

  		




  214
  220
  
    
    has_inside_labels = True

  		




  215
  
  
    
    content_extra_attributes = {'role': 'radiogroup'}

  		




  
  221
  
    
    use_fieldset = True

  		




  
  222
  
    
    fieldset_attributes = {'role': 'radiogroup'}

  		




  216
  223
  
    

  		




  217
  224
  
    
    def __init__(self, name, value=None, **kwargs):

  		




  218
  225
  
    
        self.extra_css_class = kwargs.pop('extra_css_class', None)

  		




  ......




  1481
  1488
  
    
    readonly = False

  		




  1482
  1489
  
    
    template_name = 'qommon/forms/widgets/checkboxes.html'

  		




  1483
  1490
  
    
    has_inside_labels = True

  		




  
  1491
  
    
    use_fieldset = True

  		




  1484
  1492
  
    

  		




  1485
  1493
  
    
    def __init__(self, name, value=None, options=None, **kwargs):

  		




  1486
  1494
  
    
        self.options = options

  		












  

    
      wcs/qommon/static/css/dc2/admin.scss
    
  





  1320
  1320
  
    
	margin: auto;

  		




  1321
  1321
  
    
}

  		




  1322
  1322
  
    

  		




  1323
  
  
    
fieldset.form-plus legend:after {

  		




  
  1323
  
    
fieldset.form-plus > legend:after {

  		




  1324
  1324
  
    
	content: "▼";

  		




  1325
  1325
  
    
	transition: transform ease 0.1s;

  		




  1326
  1326
  
    
}

  		




  1327
  1327
  
    

  		




  1328
  
  
    
fieldset.form-plus.closed legend:after {

  		




  
  1328
  
    
fieldset.form-plus.closed > legend:after {

  		




  1329
  1329
  
    
	transform: rotate(-90deg);

  		




  1330
  1330
  
    
}

  		




  1331
  1331
  
    

  		












  

    
      wcs/qommon/static/css/qommon.scss
    
  





  9
  9
  
    
	color: #028;

  		




  10
  10
  
    
}

  		




  11
  11
  
    

  		




  
  12
  
    
.fieldset-widget {

  		




  
  13
  
    
	border: none;

  		




  
  14
  
    
	padding: 0;

  		




  
  15
  
    
	margin: 0;

  		




  
  16
  
    
}

  		




  
  17
  
    

  		




  12
  18
  
    
div.TextWidget textarea,

  		




  13
  19
  
    
div.RankedItemsWidget input,

  		




  14
  20
  
    
div.StringWidget input,

  		




  ......




  469
  475
  
    
	border: 0;

  		




  470
  476
  
    
}

  		




  471
  477
  
    

  		




  472
  
  
    
fieldset.form-plus > div {

  		




  
  478
  
    
fieldset.form-plus > div,

  		




  
  479
  
    
fieldset.form-plus > fieldset {

  		




  473
  480
  
    
	display: block;

  		




  474
  481
  
    
}

  		




  475
  482
  
    

  		




  ......




  477
  484
  
    
	display: none;

  		




  478
  485
  
    
}

  		




  479
  486
  
    

  		




  480
  
  
    
fieldset.form-plus.closed > div {

  		




  
  487
  
    
fieldset.form-plus.closed > div,

  		




  
  488
  
    
fieldset.form-plus.closed > fieldset {

  		




  481
  489
  
    
	display: none;

  		




  482
  490
  
    
}

  		




  483
  491
  
    

  		




  484
  
  
    
fieldset.form-plus legend {

  		




  
  492
  
    
fieldset.form-plus > legend {

  		




  485
  493
  
    
	display: block;

  		




  486
  494
  
    
	width: 100%;

  		




  487
  495
  
    
	cursor: pointer;

  		




  ......




  490
  498
  
    
	border-bottom: 1px solid #aaa;

  		




  491
  499
  
    
}

  		




  492
  500
  
    

  		




  493
  
  
    
fieldset.form-plus legend:after {

  		




  
  501
  
    
fieldset.form-plus > legend:after {

  		




  494
  502
  
    
	content: "+";

  		




  495
  503
  
    
	position: absolute;

  		




  496
  504
  
    
	right: 1em;

  		












  

    
      wcs/qommon/templates/qommon/forms/widget.html
    
  





  
  1
  
    
{% if widget.use_fieldset %}<fieldset class="fieldset-widget"

  		




  
  2
  
    
        {% for attr in widget.fieldset_attributes.items %}{{attr.0}}="{{attr.1}}"{% endfor %}>{% endif %}

  		




  1
  3
  
    
<div class="{% block widget-css-classes %}widget {{widget.class_name}} {{widget.extra_css_class}}

  		




  2
  4
  
    
     {% if widget.readonly %}widget-readonly{% endif %}

  		




  3
  5
  
    
     {% if widget.get_error %}widget-with-error{% endif %}

  		




  ......




  39
  41
  
    
  <br class="content {{widget.content.content_extra_css_class}}">

  		




  40
  42
  
    
  {% endif %}

  		




  41
  43
  
    
</div>

  		




  
  44
  
    
{% if widget.use_fieldset %}</fieldset>{% endif %}

  		




  42
  
  
    
-