From ea1906618df21d29bdb221ba54f81e4efa928c8e Mon Sep 17 00:00:00 2001
From: Matthieu Bessat <spamfree@matthieubessat.fr>
Date: Sat, 5 Sep 2020 19:59:31 +0200
Subject: [PATCH] fix(PublicPage): improve accesibility of schedule button

---
 assets/development/styles/organization.css | 13 +++++++++++++
 views/organization.twig                    |  4 ++--
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/assets/development/styles/organization.css b/assets/development/styles/organization.css
index 9750d44..14cddab 100644
--- a/assets/development/styles/organization.css
+++ b/assets/development/styles/organization.css
@@ -511,6 +511,19 @@ section {
   display: flex;
   justify-content: flex-end;
   align-items: center;
+
+  /* Revert button browser style */
+  font: inherit;
+  border: 0;
+  background: 0;
+  padding: initial;
+  cursor: pointer;
+}
+
+.schedule-category-collapse-icon-container:focus {
+  border: 0;
+  outline: 1px dashed black;
+  cursor: pointer;
 }
 
 .schedule-category-header .subtitle, .schedule-category-header .separator {
diff --git a/views/organization.twig b/views/organization.twig
index ea2241f..aba69e4 100644
--- a/views/organization.twig
+++ b/views/organization.twig
@@ -162,12 +162,12 @@
               <span class="separator">-</span><span class="subtitle"> {{ item.description|e }}</span>
               {% endif %}
             </div>
-            <div class="schedule-category-collapse-icon-container">
+            <button class="schedule-category-collapse-icon-container">
               <svg class="schedule-category-collapse-icon"
                 aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                 <path fill="currentColor" d="M8 256C8 119 119 8 256 8s248 111 248 248-111 248-248 248S8 393 8 256zm231-113.9L103.5 277.6c-9.4 9.4-9.4 24.6 0 33.9l17 17c9.4 9.4 24.6 9.4 33.9 0L256 226.9l101.6 101.6c9.4 9.4 24.6 9.4 33.9 0l17-17c9.4-9.4 9.4-24.6 0-33.9L273 142.1c-9.4-9.4-24.6-9.4-34 0z"></path>
               </svg>
-            </div>
+            </button>
           </div>
           <div class="schedule-category-table">
             <div class="schedule-category-days-container">