From 57174012c355be336a507ea1f81f9aa074ea8548 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          | 6 ++++--
 3 files changed, 13 insertions(+), 4 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 30cfd8be..5f2bd027 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' %}" class="more-items">+</button>
+<ul style="display: none" class="additional-forms" id="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-form {% 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 aff535f5..65a8cfd4 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();
+  });
 
   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 8b4a4eb3..cb9b5ce4 100644
--- a/combo/public/templates/combo/link-list-cell.html
+++ b/combo/public/templates/combo/link-list-cell.html
@@ -7,11 +7,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' %}" class="more-items">+</button>
+  <ul style="display: none" class="additional-links" id="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-link"><a href="{{ link.url }}">{{ link.title }}</a></li>
   {% endfor %}
   {% endif %}
   </ul>