Projet

Général

Profil

0001-cells-more-items-accessibility-40883-40884.patch

Lauréline Guérin, 23 avril 2020 11:42

Télécharger (5,02 ko)

Voir les différences: 

Subject: [PATCH 1/3] cells: more items & accessibility (#40883, #40884)


 .../templates/combo/wcs/forms_of_category.html    | 15 ++++++++++-----
 combo/public/static/js/combo.public.js            | 12 +++++++++---
 combo/public/templates/combo/link-list-cell.html  | 11 +++++++++--
 tests/test_cells.py                               |  4 ++--
 4 files changed, 30 insertions(+), 12 deletions(-)
combo/apps/wcs/templates/combo/wcs/forms_of_category.html
22 22 
  {% if form.description %}<div class="description">{{ form.description|safe }}</div>{% endif %}
23 23 
  </li>
24 24 
{% endfor %}
25 
{% if more_forms %}
26 
  <li class="add-more-items">
27 
    <a role="button" tabindex="0" aria-expanded="false" aria-controls="more-items-{{ cell.get_reference }}" aria-label="{% trans 'More items' %}" id="btn-more-items-{{ cell.get_reference }}" class="add-more-items--button">{% block cell-more-items-btn-label %}+{% endblock %}</a>
28 
  </li>
29 
{% endif %}
30 
</ul>
25 31 

  		




  26
  32
  
    
{% if more_forms %}

  		




  27
  
  
    
<li class="more-items"><a>+</a></li>

  		




  
  33
  
    
<ul style="display: none" class="more-items" id="more-items-{{ cell.get_reference }}" aria-labelledby="btn-wcs-more-items-{{ cell.get_reference }}">

  		




  28
  34
  
    
{% for form in more_forms %}

  		




  29
  
  
    
<li style="display: none" class="additional-form {{ form.css_classes|join:" " }}"

  		




  30
  
  
    
  ><a href="{{ form.url }}tryauth">{{ form.title }}</a>

  		




  
  35
  
    
<li class="more-items--item {{ form.css_classes|join:" " }}">

  		




  
  36
  
    
  <a href="{{ form.url }}tryauth">{{ form.title }}</a>

  		




  31
  37
  
    
  {% if form.description %}<div class="description">{{ form.description|safe }}</div>{% endif %}

  		




  32
  
  
    
  </li>

  		




  
  38
  
    
</li>

  		




  33
  39
  
    
{% endfor %}

  		




  34
  40
  
    
{% endif %}

  		




  35
  
  
    

  		




  36
  41
  
    
</ul>

  		




  37
  42
  
    
</div>

  		




  38
  43
  
    
{% endif %}

  		












  

    
      combo/public/static/js/combo.public.js
    
  





  96
  96
  
    
    });

  		




  97
  97
  
    
  }

  		




  98
  98
  
    

  		




  99
  
  
    
  $(document).on('click', '.more-items a', function() {

  		




  100
  
  
    
    $(this).parent().hide();

  		




  101
  
  
    
    $(this).parent().nextAll().show();

  		




  
  99
  
    
  $(document).on('click keypress', '.add-more-items--button', function(e) {

  		




  
  100
  
    
    if (e.type === 'keypress' && !(e.key === ' ' || e.key === 'Enter'))

  		




  
  101
  
    
      return;

  		




  
  102
  
    

  		




  
  103
  
    
    e.preventDefault();

  		




  
  104
  
    
    $(this).attr('aria-expanded', 'true');

  		




  
  105
  
    
    $(this).parent('.add-more-items').hide();

  		




  
  106
  
    
    $('#' + $(this).attr('aria-controls')).show().focus();

  		




  102
  107
  
    
  });

  		




  103
  108
  
    

  		




  
  109
  
    

  		




  104
  110
  
    
  var menu_page_ids = $.makeArray($('[data-menu-page-id]').map(function() { return $(this).data('menu-page-id'); }));

  		




  105
  111
  
    
  if (menu_page_ids.length && $('body').data('check-badges') === true) {

  		




  106
  112
  
    
    $.ajax({url: $('body').data('api-root') + 'menu-badges/',

  		












  

    
      combo/public/templates/combo/link-list-cell.html
    
  





  
  1
  
    
{% load i18n %}

  		




  1
  2
  
    
{% block cell-content %}

  		




  2
  3
  
    
{% spaceless %}

  		




  3
  4
  
    
{% if title %}<h2>{{ title }}</h2>{% endif %}

  		




  ......




  7
  8
  
    
  {% for link in links %}

  		




  8
  9
  
    
  <li class="{{ link.css_classes|default:""|join:" " }}"><a href="{{ link.url }}">{{ link.title }}</a></li>

  		




  9
  10
  
    
  {% endfor %}

  		




  
  11
  
    
  {% if more_links %}

  		




  
  12
  
    
  <li class="add-more-items">

  		




  
  13
  
    
    <a role="button" tabindex="0" aria-expanded="false" aria-controls="more-items-{{ cell.get_reference }}" aria-label="{% trans 'More items' %}" id="btn-more-items-{{ cell.get_reference }}" class="add-more-items--button">{% block cell-more-items-btn-label %}+{% endblock %}</a>

  		




  
  14
  
    
  </li>

  		




  
  15
  
    
  {% endif %}

  		




  
  16
  
    
  </ul>

  		




  10
  17
  
    

  		




  11
  18
  
    
  {% if more_links %}

  		




  12
  
  
    
    <li class="more-items"><a>+</a></li>

  		




  
  19
  
    
  <ul style="display: none" class="more-items" id="more-items-{{ cell.get_reference }}" aria-labelledby="btn-more-items-{{ cell.get_reference }}">

  		




  13
  20
  
    
  {% for link in more_links %}

  		




  14
  
  
    
    <li style="display: none" class="additional-links {{ link.css_classes|default:""|join:" " }}"><a href="{{ link.url }}">{{ link.title }}</a></li>

  		




  
  21
  
    
    <li class="more-items--item {{ link.css_classes|default:""|join:" " }}"><a href="{{ link.url }}">{{ link.title }}</a></li>

  		




  15
  22
  
    
  {% endfor %}

  		




  16
  23
  
    
  {% endif %}

  		




  17
  24
  
    
  </ul>

  		












  

    
      tests/test_cells.py
    
  





  273
  273
  
    
        order=1,

  		




  274
  274
  
    
    )

  		




  275
  275
  
    
    ctx = {'page_cells': [item, item2]}

  		




  276
  
  
    
    assert '<li class="more-items"><a>+</a></li>' not in cell.render(ctx)

  		




  
  276
  
    
    assert 'class="add-more-items--button">+</a>' not in cell.render(ctx)

  		




  277
  277
  
    
    cell.limit = 1

  		




  278
  
  
    
    assert '<li class="more-items"><a>+</a></li>' in cell.render(ctx)

  		




  
  278
  
    
    assert 'class="add-more-items--button">+</a>' in cell.render(ctx)

  		




  279
  279
  
    

  		




  280
  280
  
    

  		




  281
  281
  
    
def test_link_list_cell_validity():

  		




  282
  
  
    
-