From 658217ca10f7b0766661143ff336dabc2c7f6b41 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Laur=C3=A9line=20Gu=C3=A9rin?= <zebuline@entrouvert.com>
Date: Tue, 24 Mar 2020 14:19:54 +0100
Subject: [PATCH] misc: more items & accessibility (#40883, #40884)

---
 combo/apps/wcs/templates/combo/wcs/forms_of_category.html | 6 ++++--
 combo/public/static/js/combo.public.js                    | 5 +++++
 combo/public/templates/combo/link-list-cell.html          | 7 +++++--
 tests/test_cells.py                                       | 4 ++--
 4 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/combo/apps/wcs/templates/combo/wcs/forms_of_category.html b/combo/apps/wcs/templates/combo/wcs/forms_of_category.html
index 30cfd8b..aa92320 100644
--- a/combo/apps/wcs/templates/combo/wcs/forms_of_category.html
+++ b/combo/apps/wcs/templates/combo/wcs/forms_of_category.html
@@ -25,11 +25,13 @@
   {% if form.description %}<div class="description">{{ form.description|safe }}</div>{% endif %}
   </li>
 {% endfor %}
+</ul>
 
 {% if more_forms %}
-<li class="more-items"><a>+</a></li>
+<button aria-expanded="false" aria-controls="wcs-more-forms-of-category-{{ cell.get_reference }}" aria-label="{% trans 'More forms' %}" id="btn-wcs-more-forms-of-category-{{ cell.get_reference }}" class="more-items">+</button>
+<ul style="display: none" class="additional-list" id="wcs-more-forms-of-category-{{ cell.get_reference }}" aria-labelledby="btn-wcs-more-forms-of-category-{{ cell.get_reference }}">
 {% for form in more_forms %}
-<li style="display: none" class="additional-form {% if form.authentication_required %}required-authentication{% endif %}
+<li class="additional-list {% if form.authentication_required %}required-authentication{% endif %}
            {% for context in form.required_authentication_contexts %}required-{{context}}-authentication {% endfor %}
            {% for keyword in form.keywords %}keyword-{{keyword|slugify}} {% endfor %}
            {% if form.redirection %}is-redirection{% endif %}"
diff --git a/combo/public/static/js/combo.public.js b/combo/public/static/js/combo.public.js
index aff535f..5d85b1f 100644
--- a/combo/public/static/js/combo.public.js
+++ b/combo/public/static/js/combo.public.js
@@ -99,6 +99,11 @@ $(function() {
     $(this).parent().hide();
     $(this).parent().nextAll().show();
   });
+  $(document).on('click', 'button.more-items', function() {
+    $(this).attr('aria-expanded', 'true');
+    $(this).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) {
diff --git a/combo/public/templates/combo/link-list-cell.html b/combo/public/templates/combo/link-list-cell.html
index 8b4a4eb..db4ad00 100644
--- a/combo/public/templates/combo/link-list-cell.html
+++ b/combo/public/templates/combo/link-list-cell.html
@@ -1,3 +1,4 @@
+{% load i18n %}
 {% block cell-content %}
 {% spaceless %}
 {% if title %}<h2>{{ title }}</h2>{% endif %}
@@ -7,11 +8,13 @@
   {% for link in links %}
     <li><a href="{{ link.url }}">{{ link.title }}</a></li>
   {% endfor %}
+  </ul>
 
   {% if more_links %}
-    <li class="more-items"><a>+</a></li>
+  <button aria-expanded="false" aria-controls="more-links-{{ cell.get_reference }}" aria-label="{% trans 'More links' %}" id="btn-more-links-{{ cell.get_reference }}" class="more-items">+</button>
+  <ul style="display: none" class="additional-list" id="more-links-{{ cell.get_reference }}" aria-labelledby="btn-more-links-{{ cell.get_reference }}">
   {% for link in more_links %}
-    <li style="display: none" class="additional-links"><a href="{{ link.url }}">{{ link.title }}</a></li>
+    <li class="additional-list"><a href="{{ link.url }}">{{ link.title }}</a></li>
   {% endfor %}
   {% endif %}
   </ul>
diff --git a/tests/test_cells.py b/tests/test_cells.py
index b50b2ea..d0b8a8a 100644
--- a/tests/test_cells.py
+++ b/tests/test_cells.py
@@ -243,9 +243,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="more-items">+</button>' not in cell.render(ctx)
     cell.limit = 1
-    assert '<li class="more-items"><a>+</a></li>' in cell.render(ctx)
+    assert 'class="more-items">+</button>' in cell.render(ctx)
 
 
 def test_link_list_cell_validity():
-- 
2.20.1

