From a97141daff4bbf4636e5f6411465e3774f86fb01 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 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(-)

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 dcf3be5..97f578f 100644
--- a/combo/apps/wcs/templates/combo/wcs/forms_of_category.html
+++ b/combo/apps/wcs/templates/combo/wcs/forms_of_category.html
@@ -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 %}
diff --git a/combo/public/static/js/combo.public.js b/combo/public/static/js/combo.public.js
index 46cbe72..58e474a 100644
--- a/combo/public/static/js/combo.public.js
+++ b/combo/public/static/js/combo.public.js
@@ -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/',
diff --git a/combo/public/templates/combo/link-list-cell.html b/combo/public/templates/combo/link-list-cell.html
index 9c8f353..3b9c8e4 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,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>
diff --git a/tests/test_cells.py b/tests/test_cells.py
index 1e379d3..d78d94f 100644
--- a/tests/test_cells.py
+++ b/tests/test_cells.py
@@ -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():
-- 
2.20.1

