entrouvert
/
combo
16
1
Fork 0
Code Issues Pull Requests 11 Releases Wiki Activity

cells: more items & accessibility (#40883, #40884)

This commit is contained in:
Lauréline Guérin 2020-03-24 14:19:54 +01:00
parent 157e12da26
commit 870e132867
No known key found for this signature in database
GPG Key ID: 1FAB9B9B4F93D473
4 changed files with 30 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
combo/apps/wcs/templates/combo/wcs/forms_of_category.html
View File

@ -22,17 +22,22 @@
{% if form.description %}<div class="description">{{ form.description|safe }}</div>{% endif %}
</li>
{% endfor %}
{% if more_forms %}
<li class="add-more-items">
<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>
</li>
{% endif %}
</ul>
{% if more_forms %}
<li class="more-items"><a>+</a></li>
<ul style="display: none" class="more-items" id="more-items-{{ cell.get_reference }}" aria-labelledby="btn-wcs-more-items-{{ cell.get_reference }}">
{% for form in more_forms %}
<li style="display: none" class="additional-form {{ form.css_classes|join:" " }}"
><a href="{{ form.url }}tryauth">{{ form.title }}</a>
<li class="more-items--item {{ form.css_classes|join:" " }}">
<a href="{{ form.url }}tryauth">{{ form.title }}</a>
{% if form.description %}<div class="description">{{ form.description|safe }}</div>{% endif %}
</li>
</li>
{% endfor %}
{% endif %}
</ul>
</div>
{% endif %}

12
combo/public/static/js/combo.public.js
View File

@ -96,11 +96,17 @@ $(function() {
});
}
$(document).on('click', '.more-items a', function() {
$(this).parent().hide();
$(this).parent().nextAll().show();
$(document).on('click keypress', '.add-more-items--button', function(e) {
if (e.type === 'keypress' && !(e.key === ' ' || e.key === 'Enter'))
return;
e.preventDefault();
$(this).attr('aria-expanded', 'true');
$(this).parent('.add-more-items').hide();
$('#' + $(this).attr('aria-controls')).show().focus();
});
var menu_page_ids = $.makeArray($('[data-menu-page-id]').map(function() { return $(this).data('menu-page-id'); }));
if (menu_page_ids.length && $('body').data('check-badges') === true) {
$.ajax({url: $('body').data('api-root') + 'menu-badges/',

11
combo/public/templates/combo/link-list-cell.html
View File

@ -1,3 +1,4 @@
{% load i18n %}
{% block cell-content %}
{% spaceless %}
{% if title %}<h2>{{ title }}</h2>{% endif %}
@ -7,11 +8,17 @@
{% for link in links %}
<li class="{{ link.css_classes|default:""|join:" " }}"><a href="{{ link.url }}">{{ link.title }}</a></li>
{% endfor %}
{% if more_links %}
<li class="add-more-items">
<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>
</li>
{% endif %}
</ul>
{% if more_links %}
<li class="more-items"><a>+</a></li>
<ul style="display: none" class="more-items" id="more-items-{{ cell.get_reference }}" aria-labelledby="btn-more-items-{{ cell.get_reference }}">
{% for link in more_links %}
<li style="display: none" class="additional-links {{ link.css_classes|default:""|join:" " }}"><a href="{{ link.url }}">{{ link.title }}</a></li>
<li class="more-items--item {{ link.css_classes|default:""|join:" " }}"><a href="{{ link.url }}">{{ link.title }}</a></li>
{% endfor %}
{% endif %}
</ul>

4
tests/test_cells.py
View File

@ -273,9 +273,9 @@ def test_link_list_cell():
order=1,
)
ctx = {'page_cells': [item, item2]}
assert '<li class="more-items"><a>+</a></li>' not in cell.render(ctx)
assert 'class="add-more-items--button">+</a>' not in cell.render(ctx)
cell.limit = 1
assert '<li class="more-items"><a>+</a></li>' in cell.render(ctx)
assert 'class="add-more-items--button">+</a>' in cell.render(ctx)
def test_link_list_cell_validity():