[REF] web, *: BS4, use custom BS4 checkbox everywhere

Before this commit, Odoo used checkboxes in three different ways:

- A simple <input type="checkbox"/>, mainly in the frontend. The style
  is browser dependant.

- Same as above but with the BS3, checkbox structure. The style is still
  the same, but the alignement is supposed to be better (which is not
  always the case).

- The Odoo official structure:
	```
	<div class="o_checkbox">
	    <input type="checkbox"/>
	    <span/>
	</div>
	```
  which allows to have a cross-browser checkbox style and correct
  alignements.

The goal after this commit is to only use the BS4 *custom* checkbox
structure to achieve the same goal as our official structure (and
remove that one):

```
<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="customCheck1">
  <label class="custom-control-label" for="customCheck1">...</label>
</div>
```

/!\ Labels are now required (use a zero-width space if necessary)

2 files changed, 35 insertions, 23 deletions

diff --git a/addons/web/static/src/xml/base.xml b/addons/web/static/src/xml/base.xml
index 02d976a2fe3..2a07ccaffeb 100644
--- a/addons/web/static/src/xml/base.xml
+++ b/addons/web/static/src/xml/base.xml
@@ -868,10 +868,10 @@
                 <div role="menuitem" class="o_hide_in_kanban"
                      t-att-data-id="tag_id"
                      t-att-data-color="0">
-                    <div class="o_checkbox">
-                        <input type="checkbox"/>
-                        <span/>
-                    </div> Hide in Kanban
+                    <div class="custom-control custom-checkbox">
+                        <input type="checkbox" id="o_hide_in_kanban_checkbox" class="custom-control-input"/>
+                        <label for="o_hide_in_kanban_checkbox" class="custom-control-label">Hide in Kanban</label>
+                    </div>
                 </div>
             </li>
         </ul>
@@ -1283,10 +1283,16 @@
             <input type="text" class="o_input"></input>
         </div>
         <div role="menuitem" class="dropdown-item-text o_save_name">
-            <span><div class="o_checkbox"><input type="checkbox"/><span/></div> Use by default</span>
+            <div class="custom-control custom-checkbox">
+                <input type="checkbox" id="o_fav_menu_use_by_default" class="custom-control-input"/>
+                <label for="o_fav_menu_use_by_default" class="custom-control-label">Use by default</label>
+            </div>
         </div>
         <div role="menuitem" class="dropdown-item-text o_save_name">
-            <span><div class="o_checkbox"><input type="checkbox"/><span/></div> Share with all users </span><span class="fa fa-users" role="img" aria-label="Users" title="Users"/>
+            <div class="custom-control custom-checkbox">
+                <input type="checkbox" id="o_fav_menu_share_all_users" class="custom-control-input"/>
+                <label for="o_fav_menu_share_all_users" class="custom-control-label">Share with all users <span class="fa fa-users" role="img" aria-label="Users" title="Users"/></label>
+            </div>
         </div>
         <div class="dropdown-item-text o_save_name">
             <button role="menuitem" type="button" class="btn btn-primary">Save</button>
@@ -1392,11 +1398,10 @@
     <div aria-atomic="true">
         <div t-foreach="widget.m2mValues" t-as="m2m_value">
             <t t-set="id_for_label" t-value="'o_many2many_checkbox_' + _.uniqueId()"/>
-            <div class="o_checkbox">
-                <input type="checkbox" t-att-id="id_for_label" t-att-data-record-id="JSON.stringify(m2m_value[0])"/>
-                <span/>
+            <div class="custom-control custom-checkbox">
+                <input type="checkbox" t-att-id="id_for_label" class="custom-control-input" t-att-data-record-id="JSON.stringify(m2m_value[0])"/>
+                <label t-att-for="id_for_label" class="custom-control-label o_form_label"><t t-esc="m2m_value[1]"/></label>
             </div>
-            <label t-att-for="id_for_label" class="o_form_label"><t t-esc="m2m_value[1]"/></label>
         </div>
     </div>
 </t>
diff --git a/addons/web/static/src/xml/web_calendar.xml b/addons/web/static/src/xml/web_calendar.xml
index b406e03d760..85b7a168e49 100644
--- a/addons/web/static/src/xml/web_calendar.xml
+++ b/addons/web/static/src/xml/web_calendar.xml
@@ -40,22 +40,29 @@
             <h3 t-if="widget.title"><t t-esc="widget.title"/></h3>
             <div class="o_calendar_filter_items">
                 <div t-foreach="widget.filters" t-as="filter" t-if="filter.display == null || filter.display" class="o_calendar_filter_item" t-att-data-value="filter.value" t-att-data-id="filter.id">
-                    <div class="o_checkbox">
-                        <input type="checkbox" name="selection" t-att-checked="(filter.active ? true : undefined)"/><span/>
+                    <div class="custom-control custom-checkbox">
+                        <input type="checkbox"
+                            t-attf-id="o_calendar_filter_item_#{filter_index}"
+                            name="selection"
+                            class="custom-control-input"
+                            t-att-checked="(filter.active ? true : undefined)"/>
+                        <label t-attf-for="o_calendar_filter_item_#{filter_index}"
+                            class="custom-control-label">
+                            <t t-if="filter.value == 'all'">
+                                <span><i class="fa fa-users fa-fw o_cal_avatar" role="img" aria-label="Avatar" title="Avatar"/></span>
+                            </t>
+                            <t t-if="widget.avatar_field &amp;&amp; (filter.value != 'all')">
+                                <img t-attf-src="/web/image/#{widget.avatar_model}/#{filter.value}/#{widget.avatar_field}" class="o_cal_avatar" alt="Avatar"/>
+                            </t>
+                            <t t-set="color" t-value="widget.getColor(filter.color_index)"/>
+                            <span t-if="typeof color === 'number'" t-attf-class="color_filter o_underline_color_#{widget.getColor(filter.color_index)}"><t t-esc="filter.label"/></span>
+                            <span t-elif="color" t-attf-style="border-bottom: 4px solid #{color};"><t t-esc="filter.label"/></span>
+                            <span t-else=""><t t-esc="filter.label"/></span>
+                        </label>
                     </div>
-                    <t t-if="filter.value == 'all'">
-                        <span><i class="fa fa-users fa-fw o_cal_avatar" role="img" aria-label="Avatar" title="Avatar"/></span>
-                    </t>
-                    <t t-if="widget.avatar_field &amp;&amp; (filter.value != 'all')">
-                        <img t-attf-src="/web/image/#{widget.avatar_model}/#{filter.value}/#{widget.avatar_field}" class="o_cal_avatar" alt="Avatar"/>
-                    </t>
-                    <t t-set="color" t-value="widget.getColor(filter.color_index)"/>
-                    <span t-if="typeof color === 'number'" t-attf-class="color_filter o_underline_color_#{widget.getColor(filter.color_index)}"><t t-esc="filter.label"/></span>
-                    <span t-elif="color" t-attf-style="border-bottom: 4px solid #{color};"><t t-esc="filter.label"/></span>
-                    <span t-else=""><t t-esc="filter.label"/></span>
                     <t t-if="filter.id">
                         <span class="o_remove fa fa-times" title="Remove this favorite from the list" role="img" aria-label="Remove this favorite from the list"/>
-                   </t>
+                    </t>
                 </div>
             </div>
         </div>