From 0efa5bc69790ffb45b56fe12deb610615d17533d Mon Sep 17 00:00:00 2001
From: "Morgane (morm)" <morm@odoo.com>
Date: Thu, 25 Jan 2024 09:57:47 +0100
Subject: [PATCH] [FIX] website_event: tweak mobile filter design

Prior to this commit, the design of all the `off-canvas filters` was wrong.
It was `list-group` with a `dropdown-item` class on the elements inside.
Also there was a wrong `border-top` class on the `accordion button`,
causing display issues on `hover.

`Aria-control` was also missing from the `categories filters`.

Checkboxes and radio buttons are also added to increases the usability.

task-3626957

Part-of: odoo/odoo#145064
---
 .../views/event_templates_list.xml            | 43 ++++++++++++-------
 1 file changed, 28 insertions(+), 15 deletions(-)

diff --git a/addons/website_event/views/event_templates_list.xml b/addons/website_event/views/event_templates_list.xml
index b4a9bacb971..aa106487f18 100644
--- a/addons/website_event/views/event_templates_list.xml
+++ b/addons/website_event/views/event_templates_list.xml
@@ -88,22 +88,26 @@
                         <t t-foreach="categories" t-as="category">
                             <div class="accordion-item">
                                 <h2 class="accordion-header">
-                                    <button class="accordion-button border-top collapsed"
+                                    <button class="accordion-button collapsed"
                                         type="button"
                                         data-bs-toggle="collapse"
+                                        t-attf-aria-controls="o_wevent_offcanvas_cat_#{category.name}"
                                         t-att-data-bs-target="'.o_wevent_offcanvas_cat_%s' % category.name"
                                         aria-expanded="false">
                                         <t t-out="category.name"/>
                                     </button>
                                 </h2>
-                                <div t-attf-class="o_wevent_offcanvas_cat_#{category.name} accordion-collapse collapse">
+                                <div t-attf-id="o_wevent_offcanvas_cat_#{category.name}" t-attf-class="o_wevent_offcanvas_cat_#{category.name} accordion-collapse collapse">
                                     <div class="accordion-body pt-0">
                                         <ul class="list-group list-group-flush">
                                             <t t-if="category.is_published and category.tag_ids and any(tag.color for tag in category.tag_ids)" t-foreach="category.tag_ids" t-as="tag">
                                                 <li t-if="tag.color" class="list-group-item border-0 px-0">
                                                     <a t-att-href="'/event?%s' % keep_query('*', tags=str((search_tags - tag).ids if tag in search_tags else (tag | search_tags).ids))"
-                                                        t-attf-class="dropdown-item d-flex align-items-center justify-content-between #{'active' if tag in search_tags else ''}">
-                                                        <t t-out="tag.name"/>
+                                                        class="text-reset">
+                                                        <div class="form-check">
+                                                            <input class="form-check-input pe-none" type="checkbox" t-attf-name="#{tag.color}" t-att-checked="tag in search_tags"/>
+                                                            <label class="form-check-label" t-attf-for="#{tag.color}" t-out="tag.name"/>
+                                                        </div>
                                                     </a>
                                                 </li>
                                             </t>
@@ -155,7 +159,7 @@
     <xpath expr="//span[hasclass('o_wevent_offcanvas_date')]" position="replace">
         <div class="accordion-item">
             <h2 class="accordion-header">
-                <button class="accordion-button border-top collapsed"
+                <button class="accordion-button collapsed"
                     type="button"
                     data-bs-toggle="collapse"
                     data-bs-target=".o_wevent_offcanvas_date"
@@ -170,9 +174,12 @@
                         <t t-foreach="dates" t-as="date">
                             <li t-if="date[3] or (date[0] in ('old','upcoming','all'))" class="list-group-item px-0 border-0">
                                 <t t-set="is_active" t-value="searches.get('date') == date[0]"/>
-                                <a t-att-href="keep('/event', date=date[0])" t-attf-class="dropdown-item d-flex align-items-center justify-content-between #{is_active and 'active'}">
-                                    <t t-out="date[1]"/>
-                                    <span t-if="date[3]" t-out="date[3]" t-attf-class="badge rounded-pill #{is_active and 'text-bg-light' or 'text-bg-primary'}"/>
+                                <a t-att-href="keep('/event', date=date[0])" class="d-flex align-items-center justify-content-between text-reset text-decoration-none">
+                                    <div class="form-check flex-basis-100">
+                                        <input class="form-check-input pe-none" type="radio" t-attf-name="#{date[1]}" t-att-checked="is_active"/>
+                                        <label class="form-check-label" t-attf-for="#{date[1]}" t-out="date[1]"/>
+                                    </div>
+                                    <span t-if="date[3]" t-out="date[3]" class="badge rounded-pill text-bg-light"/>
                                 </a>
                             </li>
                         </t>
@@ -214,7 +221,7 @@
     <xpath expr="//span[hasclass('o_wevent_offcanvas_country')]" position="replace">
         <div class="accordion-item">
             <h2 class="accordion-header">
-                <button class="accordion-button border-top collapsed"
+                <button class="accordion-button collapsed"
                     type="button"
                     data-bs-toggle="collapse"
                     data-bs-target=".o_wevent_offcanvas_country"
@@ -229,16 +236,22 @@
                         <li t-foreach="countries" t-as="country" class="list-group-item px-0 border-0">
                             <t t-if="country['country_id']">
                                 <t t-set="is_active" t-value="searches.get('country') == str(country['country_id'] and country['country_id'][0])"/>
-                                <a t-att-href="keep('/event', country=country['country_id'][0])" t-attf-class="dropdown-item d-flex align-items-center justify-content-between #{is_active and 'active'}">
-                                    <t t-out="country['country_id'][1]"/>
-                                    <span t-out="country['country_id_count']" t-attf-class="badge rounded-pill ms-auto #{is_active and 'text-bg-light' or 'text-bg-primary'}"/>
+                                <a t-att-href="keep('/event', country=country['country_id'][0])" class="d-flex align-items-center justify-content-between text-reset text-decoration-none">
+                                    <div class="form-check flex-basis-100">
+                                        <input class="form-check-input pe-none" type="radio" t-attf-name="#{country['country_id'][1]}" t-att-checked="is_active"/>
+                                        <label class="form-check-label" t-attf-for="#{country['country_id'][1]}" t-out="country['country_id'][1]"/>
+                                    </div>
+                                    <span t-out="country['country_id_count']" class="badge rounded-pill text-bg-light ms-auto"/>
                                 </a>
                             </t>
                             <t t-else="">
                                 <t t-set="is_active" t-value="searches.get('country') == 'online'"/>
-                                <a t-att-href="keep('/event', country='online')" t-attf-class="dropdown-item d-flex align-items-center justify-content-between #{is_active and 'active'}">
-                                    <span>Online Events</span>
-                                    <span t-out="country['country_id_count']" t-attf-class="badge rounded-pill ms-auto #{is_active and 'text-bg-light' or 'text-bg-primary'}"/>
+                                <a t-att-href="keep('/event', country='online')" class="d-flex align-items-center justify-content-between text-reset text-decoration-none">
+                                    <div class="form-check flex-basis-100">
+                                        <input class="form-check-input pe-none" type="radio" name="Online Events" t-att-checked="is_active"/>
+                                        <label class="form-check-label" for="Online Events">Online Events</label>
+                                    </div>
+                                    <span t-out="country['country_id_count']" class="badge rounded-pill px-2 text-bg-light ms-auto"/>
                                 </a>
                             </t>
                         </li>