a11y: add keyboard navigation to endpoint details toggler (#76437)

passerelle/static/css/style.scss

@@ -289,6 +289,9 @@ ul.get-params li {
 			text-align: center;
 			line-height: 2rem;
 		}
+		&:focus::before {
+			outline: 2px solid #386ede;
+		}
 	}
 	&.toggled {
 		> ul.params {

passerelle/static/js/passerelle.js

@@ -49,8 +49,13 @@ $(function() {
           $slug_field.val($.slugify($(this).val()));
         });
 
-  $('.toggler').on('click', function() {
+  $('.toggler').on('click keydown', function(e) {
+    if (e.type === 'keydown' && !(e.keyCode == 13 || e.keyCode == 32))  // enter || space
+      return;
+    e.preventDefault();
     $(this).parent().toggleClass('toggled');
+    var folded = $(this).parent().hasClass('toggled');
+    this.setAttribute('aria-expanded', `${folded}`);
   });
 
   if ($('#add-computed-property-form').length) {

passerelle/templates/passerelle/manage/endpoint.html

@@ -1,11 +1,11 @@
 {% load i18n passerelle %}
 <li class="{{ endpoint.http_method|default:"get" }}-method">
-  {% if endpoint.get_params or endpoint.body_schemas or endpoint.response_schemas or endpoint.post.input_example %}
-    <div class="toggler"></div>
-  {% endif %}
   <div class="description">{% if endpoint.description %}<span class="description--label">{{endpoint.description}}{% trans ':' %}</span>{% endif %}
     <a href="{{endpoint.example_url}}" class="example-url">{{ site_base_uri }}{{endpoint.example_url_as_html}}</a>
   </div>
+  {% if endpoint.get_params or endpoint.body_schemas or endpoint.response_schemas or endpoint.post.input_example %}
+    <div role="button" class="toggler" aria-expanded="false" tabindex="0"></div>
+  {% endif %}
   <ul class="params">
     {% if endpoint.get_params %}
       <li>