diff --git a/templates/base/components/alert/layout.html.twig b/templates/base/components/alert/layout.html.twig
index 166ef1ceb..e945546f9 100644
--- a/templates/base/components/alert/layout.html.twig
+++ b/templates/base/components/alert/layout.html.twig
@@ -1,5 +1,6 @@
 <div id="{{ oUIBlock.GetId() }}"
-	 class="ibo-alert ibo-is-{{ oUIBlock.GetColor() }}{% if oUIBlock.IsOpenedByDefault() %} ibo-is-opened{% endif %}{% if oUIBlock.IsHidden() %} ibo-is-hidden{% endif %} {{ oUIBlock.GetAdditionalCSSClassesAsString() }}">
+	 class="ibo-alert ibo-is-{{ oUIBlock.GetColor() }}{% if oUIBlock.IsOpenedByDefault() %} ibo-is-opened{% endif %}{% if oUIBlock.IsHidden() %} ibo-is-hidden{% endif %} {{ oUIBlock.GetAdditionalCSSClassesAsString() }}"
+     data-role="ibo-alert">
 	{% if oUIBlock.IsCollapsible() %}
 		<div class="ibo-alert--action-button ibo-alert--maximize-button" data-role="ibo-alert--collapse-toggler">
 			<i class="fas fa-caret-down"></i>
diff --git a/templates/base/components/breadcrumbs/layout.html.twig b/templates/base/components/breadcrumbs/layout.html.twig
index 665952d42..938764178 100644
--- a/templates/base/components/breadcrumbs/layout.html.twig
+++ b/templates/base/components/breadcrumbs/layout.html.twig
@@ -1,4 +1,4 @@
-<div id="{{ oUIBlock.GetId() }}" class="ibo-breadcrumbs">
+<div id="{{ oUIBlock.GetId() }}" class="ibo-breadcrumbs" data-role="ibo-breadcrumbs">
     <span class="ibo-breadcrumbs--previous-items-container ibo-is-hidden" data-role="ibo-breadcrumbs--previous-items-container">
         <button class="ibo-breadcrumbs--previous-items-list-toggler ibo-button ibo-is-alternative ibo-is-neutral" data-role="ibo-breadcrumbs--previous-items-list-toggler"
            aria-label="{{ 'UI:Component:Breadcrumbs:PreviousItemsListToggler:Label'|dict_s }}"
diff --git a/templates/base/components/button/buttonjs.html.twig b/templates/base/components/button/buttonjs.html.twig
index 5c9f72034..02829fd2c 100644
--- a/templates/base/components/button/buttonjs.html.twig
+++ b/templates/base/components/button/buttonjs.html.twig
@@ -1,6 +1,7 @@
 {% set sAriaLabel = oUIBlock.GetLabel() is not empty ? oUIBlock.GetLabel() : (oUIBlock.GetTooltip() is not empty ? oUIBlock.GetTooltip() : '') %}
 <button id="{{ oUIBlock.GetId() }}"
         class="ibo-button ibo-is-{{ oUIBlock.GetActionType() }} ibo-is-{{ oUIBlock.GetColor() }} {{ oUIBlock.GetAdditionalCSSClassesAsString() }} {% if oUIBlock.IsHidden() %}ibo-is-hidden{% endif %}"
+        data-role="ibo-button"
         {% if oUIBlock.GetDataAttributes() %}
             {% for sName, sValue in oUIBlock.GetDataAttributes() %}
                 data-{{ sName }}="{{ sValue }}"
diff --git a/templates/base/components/button/buttonurl.html.twig b/templates/base/components/button/buttonurl.html.twig
index 9018f48ab..e62c13054 100644
--- a/templates/base/components/button/buttonurl.html.twig
+++ b/templates/base/components/button/buttonurl.html.twig
@@ -1,6 +1,7 @@
 {% set sAriaLabel = oUIBlock.GetLabel() is not empty ? oUIBlock.GetLabel() : (oUIBlock.GetTooltip() is not empty ? oUIBlock.GetTooltip() : '') %}
 <a id="{{ oUIBlock.GetId() }}"
         class="ibo-button ibo-is-{{ oUIBlock.GetActionType() }} ibo-is-{{ oUIBlock.GetColor() }} {{ oUIBlock.GetAdditionalCSSClassesAsString() }} {% if oUIBlock.IsHidden() %}ibo-is-hidden{% endif %}"
+        data-role="ibo-button"
         {% if oUIBlock.GetDataAttributes() %}
             {% for sName, sValue in oUIBlock.GetDataAttributes() %}
                 data-{{ sName }}="{{ sValue }}"
diff --git a/templates/base/components/button/layout.html.twig b/templates/base/components/button/layout.html.twig
index 190395b95..8e5e54971 100644
--- a/templates/base/components/button/layout.html.twig
+++ b/templates/base/components/button/layout.html.twig
@@ -1,6 +1,7 @@
 {% set sAriaLabel = oUIBlock.GetLabel() is not empty ? oUIBlock.GetLabel() : (oUIBlock.GetTooltip() is not empty ? oUIBlock.GetTooltip() : '') %}
 <button id="{{ oUIBlock.GetId() }}"
         class="ibo-button ibo-is-{{ oUIBlock.GetActionType() }} ibo-is-{{ oUIBlock.GetColor() }} {{ oUIBlock.GetAdditionalCSSClassesAsString() }} {% if oUIBlock.IsHidden() %}ibo-is-hidden{% endif %}"
+        data-role="ibo-button"
         {% if oUIBlock.GetDataAttributes() %}
                 {% for sName, sValue in oUIBlock.GetDataAttributes() %}
                         data-{{ sName }}="{{ sValue }}"
diff --git a/templates/base/components/collapsible-section/layout.html.twig b/templates/base/components/collapsible-section/layout.html.twig
index c4ff754d3..db6d1a791 100644
--- a/templates/base/components/collapsible-section/layout.html.twig
+++ b/templates/base/components/collapsible-section/layout.html.twig
@@ -1,14 +1,12 @@
 <div id="{{ oUIBlock.GetId() }}"
-	 class="ibo-collapsible-section {{ oUIBlock.GetAdditionalCSSClassesAsString() }}{% if oUIBlock.IsOpenedByDefault() %} ibo-is-opened{% endif %}{% if oUIBlock.IsHidden() %} ibo-is-hidden{% endif %}">
+	 class="ibo-collapsible-section {{ oUIBlock.GetAdditionalCSSClassesAsString() }}{% if oUIBlock.IsOpenedByDefault() %} ibo-is-opened{% endif %}{% if oUIBlock.IsHidden() %} ibo-is-hidden{% endif %}"
+     data-role="ibo-collapsible-section">
 	<div class="ibo-collapsible-section--header" data-role="ibo-collapsible-section--collapse-toggler">
-		<div class="ibo-collapsible-section--action-button ibo-collapsible-section--maximize-button"><i
-					class="fas fa-caret-down"></i></div>
-		<div class="ibo-collapsible-section--action-button ibo-collapsible-section--minimize-button"><i
-					class="fas fa-caret-up"></i>
-		</div>
+		<div class="ibo-collapsible-section--action-button ibo-collapsible-section--maximize-button"><i class="fas fa-caret-down"></i></div>
+		<div class="ibo-collapsible-section--action-button ibo-collapsible-section--minimize-button"><i class="fas fa-caret-up"></i></div>
 		<div class="ibo-collapsible-section--title">{{ oUIBlock.GetTitle() }}</div>
 	</div>
-	<div class="ibo-collapsible-section--body">
+	<div class="ibo-collapsible-section--body" data-role="ibo-collapsible-section--body">
 		{% block iboPanelBody %}
 			{% for oMainBlock in oUIBlock.GetSubBlocks() %}
 				{{ render_block(oMainBlock, {aPage: aPage}) }}
diff --git a/templates/base/components/datatable/config/layout.html.twig b/templates/base/components/datatable/config/layout.html.twig
index e4edd7ba0..375bd9cb6 100644
--- a/templates/base/components/datatable/config/layout.html.twig
+++ b/templates/base/components/datatable/config/layout.html.twig
@@ -5,7 +5,7 @@
             <input id="dtbl_dlg_settings_{{ oUIBlock.GetTableId() }}" type="radio" name="settings" {% if (oUIBlock.GetOption("bUseCustomSettings") == false) %} checked {% endif %} value="defaults">
             <label for="dtbl_dlg_settings_{{ oUIBlock.GetTableId() }}">&nbsp;{{ 'UI:UseDefaultSettings'|dict_s }}</label>
         </p>
-        <div class="ibo-panel ibo-is-neutral ibo-is-opened">
+        <div class="ibo-panel ibo-is-neutral ibo-is-opened" data-role="ibo-panel">
             <div class="ibo-panel--header">
                 <div class="ibo-panel--header-left">
                     <input id="dtbl_dlg_specific_{{ oUIBlock.GetTableId() }}" type="radio" class="specific_settings" name="settings" {% if oUIBlock.GetOption("bUseCustomSettings") %} checked {% endif %} value="specific">
@@ -25,7 +25,7 @@
                 <p> {{ 'UI:Display_X_ItemsPerPage_prefix'|dict_s }}<input type="text" size="4" name="page_size" value="{{ oUIBlock.GetOption("iPageSize") }}">{{ 'UI:Display_X_ItemsPerPage_suffix'|dict_s }}</p>
             </div>
         </div>
-        <div class="ibo-panel ibo-is-neutral ibo-is-opened">
+        <div class="ibo-panel ibo-is-neutral ibo-is-opened" data-role="ibo-panel">
             <div class="ibo-panel--header">
                 <div class="ibo-panel--header-left">
                     <input id="dtbl_dlg_save_{{ oUIBlock.GetTableId() }}" type="checkbox" {% if oUIBlock.GetOption("sTableId") != null %}checked{% endif %} name="save_settings">
@@ -41,8 +41,8 @@
         </div>
         <div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">
             <div class=" ui-dialog-buttonset">
-                <button type="button" class="ibo-button ibo-is-alternative ibo-is-neutral action cancel" onclick="$('#datatable_dlg_{{ oUIBlock.GetTableId() }}').dialog('close')">&nbsp;{{ 'UI:Button:Cancel'|dict_s }}</button>
-                <button type="submit" class="ibo-button ibo-is-regular ibo-is-primary action" onclick="$('#datatable_dlg_{{ oUIBlock.GetTableId() }}').DataTableSettings('onDlgOk'); ">&nbsp;{{ 'UI:Button:Ok'|dict_s }}</button>
+                <button type="button" class="ibo-button ibo-is-alternative ibo-is-neutral action cancel" data-role="ibo-button" onclick="$('#datatable_dlg_{{ oUIBlock.GetTableId() }}').dialog('close')">&nbsp;{{ 'UI:Button:Cancel'|dict_s }}</button>
+                <button type="submit" class="ibo-button ibo-is-regular ibo-is-primary action" data-role="ibo-button" onclick="$('#datatable_dlg_{{ oUIBlock.GetTableId() }}').DataTableSettings('onDlgOk'); ">&nbsp;{{ 'UI:Button:Ok'|dict_s }}</button>
             </div>
         </div>
     </form>
diff --git a/templates/base/components/datatable/layout.html.twig b/templates/base/components/datatable/layout.html.twig
index a77093020..af41a78da 100644
--- a/templates/base/components/datatable/layout.html.twig
+++ b/templates/base/components/datatable/layout.html.twig
@@ -12,7 +12,7 @@
     {% endif %}
 {% endif %}
 
-<table id="{{ oUIBlock.GetId() }}" width="100%" class="{{ oUIBlock.GetBlockCode() }}{% if oUIBlock.IsHidden() %} ibo-is-hidden{% endif %}">
+<table id="{{ oUIBlock.GetId() }}" width="100%" class="{{ oUIBlock.GetBlockCode() }}{% if oUIBlock.IsHidden() %} ibo-is-hidden{% endif %}" data-role="ibo-datatable">
     <thead>
     {% if oUIBlock.GetOption("select_mode") is not empty %}
         <th></th>
diff --git a/templates/base/components/datatable/static/formtable/layout.html.twig b/templates/base/components/datatable/static/formtable/layout.html.twig
index 526e00adb..2f3b9dbf3 100644
--- a/templates/base/components/datatable/static/formtable/layout.html.twig
+++ b/templates/base/components/datatable/static/formtable/layout.html.twig
@@ -4,7 +4,7 @@
 <input type="hidden" name="attr_{{ oUIBlock.GetRef() }}" value="">
 
 {% set columns = oUIBlock.GetColumns() %}
-<table id="{{ oUIBlock.GetId() }}" class="ibo-datatable listResults{% if oUIBlock.IsHidden() %} ibo-is-hidden{% endif %}" >
+<table id="{{ oUIBlock.GetId() }}" class="ibo-datatable listResults{% if oUIBlock.IsHidden() %} ibo-is-hidden{% endif %}" data-role="ibo-datatable">
     <thead>
     <tr>
         {% for column in columns %}
diff --git a/templates/base/components/datatable/static/layout.html.twig b/templates/base/components/datatable/static/layout.html.twig
index ca8191e2c..d6f594c3c 100644
--- a/templates/base/components/datatable/static/layout.html.twig
+++ b/templates/base/components/datatable/static/layout.html.twig
@@ -2,7 +2,7 @@
 {# @license     http://opensource.org/licenses/AGPL-3.0 #}
 
 {% set columns = oUIBlock.GetColumns() %}
-<table id="{{ oUIBlock.GetId() }}" width="100%" class="ibo-datatable listResults{% if oUIBlock.IsHidden() %} ibo-is-hidden{% endif %}">
+<table id="{{ oUIBlock.GetId() }}" width="100%" class="ibo-datatable listResults{% if oUIBlock.IsHidden() %} ibo-is-hidden{% endif %}" data-role="ibo-datatable">
     <thead>
     <tr>
         {% for column in columns %}
diff --git a/templates/base/components/fieldset/layout.html.twig b/templates/base/components/fieldset/layout.html.twig
index 12e29f82e..cc9afb759 100644
--- a/templates/base/components/fieldset/layout.html.twig
+++ b/templates/base/components/fieldset/layout.html.twig
@@ -1,5 +1,5 @@
 {% if oUIBlock.GetSubBlocks() %}
-    <fieldset class="ibo-fieldset{% if oUIBlock.IsHidden() %} ibo-is-hidden{% endif %} {{ oUIBlock.GetAdditionalCSSClassesAsString() }}" id="{{ oUIBlock.GetId() }}">
+    <fieldset class="ibo-fieldset {% if oUIBlock.IsHidden() %}ibo-is-hidden{% endif %} {{ oUIBlock.GetAdditionalCSSClassesAsString() }}" data-role="ibo-fieldset" id="{{ oUIBlock.GetId() }}">
         <legend class="ibo-fieldset-legend">{{ oUIBlock.GetLegend()| raw }}</legend>
         {% for oSubBlock in oUIBlock.GetSubBlocks() %}
             {{ render_block(oSubBlock, {aPage: aPage}) }}
diff --git a/templates/base/components/form/layout.html.twig b/templates/base/components/form/layout.html.twig
index 284bd42de..6066467e0 100644
--- a/templates/base/components/form/layout.html.twig
+++ b/templates/base/components/form/layout.html.twig
@@ -1,5 +1,6 @@
 <form method="post" enctype="multipart/form-data" id="{{ oUIBlock.GetId() }}"
-      class="{% if oUIBlock.IsHidden() %} ibo-is-hidden{% endif %}"
+      class="ibo-form {% if oUIBlock.IsHidden() %}ibo-is-hidden{% endif %}"
+      data-role="ibo-form"
         {% if oUIBlock.GetOnSubmitJsCode() %}
             onSubmit="{{ oUIBlock.GetOnSubmitJsCode() }}"
         {% endif %}
diff --git a/templates/base/components/input/layout.html.twig b/templates/base/components/input/layout.html.twig
index 3082b93f0..ec56c9d66 100644
--- a/templates/base/components/input/layout.html.twig
+++ b/templates/base/components/input/layout.html.twig
@@ -3,6 +3,7 @@
 {% block iboInput %}
     <input type="{{ oUIBlock.GetType() }}" id="{{ oUIBlock.GetId() }}" name="{{ oUIBlock.GetName() }}" value="{{ oUIBlock.GetValue()|raw }}"
            class="ibo-input {% if oUIBlock.IsHidden() %} ibo-is-hidden{% endif %}{% if oUIBlock.GetAdditionalCSSClassesAsString() %} {{ oUIBlock.GetAdditionalCSSClassesAsString() }}{% endif %}"
+           data-role="ibo-input"
             {% if oUIBlock.IsChecked() %} checked="checked"{% endif %}
             {% if oUIBlock.IsDisabled() %} disabled{% endif %}
             {% if oUIBlock.IsReadonly() %} readonly{% endif %}
diff --git a/templates/base/components/medallion-icon/layout.html.twig b/templates/base/components/medallion-icon/layout.html.twig
index 82f9c657d..cf745ef75 100644
--- a/templates/base/components/medallion-icon/layout.html.twig
+++ b/templates/base/components/medallion-icon/layout.html.twig
@@ -1,7 +1,7 @@
 {# @copyright   Copyright (C) 2010-2021 Combodo SARL #}
 {# @license     http://opensource.org/licenses/AGPL-3.0 #}
 {% apply spaceless %}
-<div id="{{ oUIBlock.GetId() }}" class="ibo-medallion-icon {{ oUIBlock.GetAdditionalCSSClassesAsString() }}">
+<div id="{{ oUIBlock.GetId() }}" class="ibo-medallion-icon {{ oUIBlock.GetAdditionalCSSClassesAsString() }}" data-role="ibo-medallion-icon">
     {% if oUIBlock.GetImageUrl() != '' %}
         <img class="ibo-medallion-icon--image" src="{{ oUIBlock.GetImageUrl() }}" />
     {% endif %}
diff --git a/templates/base/components/popover-menu/item/mode_separator.html.twig b/templates/base/components/popover-menu/item/mode_separator.html.twig
index e57df049d..909d8ebb1 100644
--- a/templates/base/components/popover-menu/item/mode_separator.html.twig
+++ b/templates/base/components/popover-menu/item/mode_separator.html.twig
@@ -1,6 +1,6 @@
 {% extends 'base/components/popover-menu/item/layout.html.twig' %}
 {% block iboPopoverMenuItem %}
-    <hr class="ibo-popover-menu--item ibo-popover-menu--separator"
+    <hr class="ibo-popover-menu--item ibo-popover-menu--separator" data-role="ibo-popover-menu--item ibo-popover-menu--separator"
             {% if oUIBlock.GetDataAttributes() %}
                 {% for sName, sValue in oUIBlock.GetDataAttributes() %}
                     data-{{ sName }}="{{ sValue }}"
diff --git a/templates/base/components/spinner/layout.html.twig b/templates/base/components/spinner/layout.html.twig
index b03508a48..7e1474c39 100644
--- a/templates/base/components/spinner/layout.html.twig
+++ b/templates/base/components/spinner/layout.html.twig
@@ -1,5 +1,5 @@
 {# @copyright   Copyright (C) 2010-2021 Combodo SARL #}
 {# @license     http://opensource.org/licenses/AGPL-3.0 #}
 {% apply spaceless %}
-    <i id="{{ oUIBlock.GetId() }}" class="fas fa-sync-alt fa-spin{% if oUIBlock.IsHidden() %} ibo-is-hidden{% endif %} {% if oUIBlock.GetAdditionalCSSClassesAsString() %}{{ oUIBlock.GetAdditionalCSSClassesAsString() }}{% endif %}" aria-hidden="true"></i>
+    <i id="{{ oUIBlock.GetId() }}" class="fas fa-sync-alt fa-spin {% if oUIBlock.IsHidden() %}ibo-is-hidden{% endif %} {% if oUIBlock.GetAdditionalCSSClassesAsString() %}{{ oUIBlock.GetAdditionalCSSClassesAsString() }}{% endif %}" aria-hidden="true"></i>
 {% endapply %}
\ No newline at end of file
diff --git a/templates/base/components/title/layout.html.twig b/templates/base/components/title/layout.html.twig
index ab025454f..f22e34847 100644
--- a/templates/base/components/title/layout.html.twig
+++ b/templates/base/components/title/layout.html.twig
@@ -1,5 +1,5 @@
 {% apply spaceless %}
-    <div id="{{ oUIBlock.GetId() }}" class="ibo-title {% if oUIBlock.HasIcon() %}ibo-has-icon{% endif %}{% if oUIBlock.IsHidden() %} ibo-is-hidden{% endif %}">
+    <div id="{{ oUIBlock.GetId() }}" class="ibo-title {% if oUIBlock.HasIcon() %}ibo-has-icon{% endif %}{% if oUIBlock.IsHidden() %} ibo-is-hidden{% endif %}" data-role="ibo-title">
         {% if oUIBlock.HasIcon() %}
             <div class="ibo-title--icon">
                 <div class="ibo-title--icon-background ibo-title--icon-background--must-{{ oUIBlock.GetIconCoverMethod() }}" style="background-image: url('{{ oUIBlock.GetIconUrl()|raw }}');"></div>
diff --git a/templates/base/components/toolbar/layout.html.twig b/templates/base/components/toolbar/layout.html.twig
index 6b6d586e3..a100b8660 100644
--- a/templates/base/components/toolbar/layout.html.twig
+++ b/templates/base/components/toolbar/layout.html.twig
@@ -3,7 +3,8 @@
 {# Toolbar #}
 {% apply spaceless %}
     <div id="{{ oUIBlock.GetId() }}"
-         class="ibo-toolbar {% if oUIBlock.GetAdditionalCSSClassesAsString() %}{{ oUIBlock.GetAdditionalCSSClassesAsString() }}{% endif %}{% if oUIBlock.IsHidden() %} ibo-is-hidden{% endif %}"
+         class="ibo-toolbar {% if oUIBlock.GetAdditionalCSSClassesAsString() %}{{ oUIBlock.GetAdditionalCSSClassesAsString() }}{% endif %} {% if oUIBlock.IsHidden() %}ibo-is-hidden{% endif %}"
+         data-role="ibo-toolbar"
     >
 
         {% for oSubBlock in oUIBlock.GetSubBlocks() %}
diff --git a/templates/base/layouts/content-block/layout.html.twig b/templates/base/layouts/content-block/layout.html.twig
index 9e8b4d59e..0934088a9 100644
--- a/templates/base/layouts/content-block/layout.html.twig
+++ b/templates/base/layouts/content-block/layout.html.twig
@@ -8,7 +8,7 @@
     {% block iboContentBlockContainer %}
         {% if bHasDiv %}
             <div id="{{ oUIBlock.GetId() }}"
-            class="{% if oUIBlock.GetAdditionalCSSClassesAsString() %}{{ oUIBlock.GetAdditionalCSSClassesAsString() }}{% endif %}{% if oUIBlock.IsHidden() %} ibo-is-hidden{% endif %}"
+            class="{% if oUIBlock.GetAdditionalCSSClassesAsString() %}{{ oUIBlock.GetAdditionalCSSClassesAsString() }}{% endif %} {% if oUIBlock.IsHidden() %}ibo-is-hidden{% endif %}"
             {% if oUIBlock.GetDataAttributes() %}
                 {% for sName, sValue in oUIBlock.GetDataAttributes() %}
                     data-{{ sName }}="{{ sValue }}"
diff --git a/templates/base/layouts/dashboard/layout.html.twig b/templates/base/layouts/dashboard/layout.html.twig
index 3e8823234..085ba886a 100644
--- a/templates/base/layouts/dashboard/layout.html.twig
+++ b/templates/base/layouts/dashboard/layout.html.twig
@@ -2,8 +2,8 @@
 {# @license     http://opensource.org/licenses/AGPL-3.0 #}
 {# Dashboard Layout #}
 {% apply spaceless %}
-    <div class="ibo-dashboard--top-bar">
-        <div class="ibo-dashboard--top-bar-title">{{ oUIBlock.GetTitle() }}</div>
+    <div class="ibo-dashboard--top-bar" data-role="ibo-dashboard--top-bar">
+        <div class="ibo-dashboard--top-bar-title" data-role="ibo-dashboard--top-bar-title">{{ oUIBlock.GetTitle() }}</div>
         {{ render_block(oUIBlock.GetToolbar(), {aPage: aPage}) }}
     </div>
     <div class="ibo-dashboard--grid" data-role="ibo-dashboard--grid">
diff --git a/templates/base/layouts/multi-column/column/layout.html.twig b/templates/base/layouts/multi-column/column/layout.html.twig
index 387a905d7..64b2cf6ca 100644
--- a/templates/base/layouts/multi-column/column/layout.html.twig
+++ b/templates/base/layouts/multi-column/column/layout.html.twig
@@ -1,6 +1,6 @@
 {# @copyright   Copyright (C) 2010-2021 Combodo SARL #}
 {# @license     http://opensource.org/licenses/AGPL-3.0 #}
-<div class="ibo-column">
+<div class="ibo-column" data-role="ibo-column">
     {% for oSubBlock in oUIBlock.GetSubBlocks() %}
         {{ render_block(oSubBlock, {aPage: aPage}) }}
     {% endfor %}
diff --git a/templates/base/layouts/multi-column/layout.html.twig b/templates/base/layouts/multi-column/layout.html.twig
index ad3983358..1655d653a 100644
--- a/templates/base/layouts/multi-column/layout.html.twig
+++ b/templates/base/layouts/multi-column/layout.html.twig
@@ -1,6 +1,6 @@
 {# @copyright   Copyright (C) 2010-2021 Combodo SARL #}
 {# @license     http://opensource.org/licenses/AGPL-3.0 #}
-<div class="ibo-multi-column">
+<div class="ibo-multi-column" data-role="ibo-multi-column">
     {% for oSubBlock in oUIBlock.GetSubBlocks() %}
         {{ render_block(oSubBlock, {aPage: aPage}) }}
     {% endfor %}
diff --git a/templates/base/layouts/page-content/layout.html.twig b/templates/base/layouts/page-content/layout.html.twig
index 3afe97c03..218eb5243 100644
--- a/templates/base/layouts/page-content/layout.html.twig
+++ b/templates/base/layouts/page-content/layout.html.twig
@@ -1,4 +1,4 @@
-<div id="ibo-center-container" class="ibo-center-container {% block iboPageCenterContainerExtraClasses %}{% endblock %}">
+<div id="ibo-center-container" class="ibo-center-container {% block iboPageCenterContainerExtraClasses %}{% endblock %}" data-role="ibo-center-container">
 	{% block iboPageCenterContainer %}
 		<main id="ibo-main-content">
 			{# Note: The header is inside the main content div to avoid glitches with other layouts (eg. in a side content layout) #}
diff --git a/templates/base/layouts/page-content/with-side-content.html.twig b/templates/base/layouts/page-content/with-side-content.html.twig
index da748ec4b..1d7ca4aac 100644
--- a/templates/base/layouts/page-content/with-side-content.html.twig
+++ b/templates/base/layouts/page-content/with-side-content.html.twig
@@ -7,7 +7,7 @@
 
 {% block iboPageCenterContainer %}
 	{{ parent() }}
-	<aside id="ibo-side-content">
+	<aside id="ibo-side-content" data-role="ibo-side-content">
 		{% block iboPageSideContent %}
 			{% for oSubBlock in oUIBlock.GetSideBlocks() %}
 				{{ render_block(oSubBlock, {aPage: aPage}) }}
diff --git a/templates/base/layouts/tab-container/tab/layout.html.twig b/templates/base/layouts/tab-container/tab/layout.html.twig
index 8791954fb..3610681fe 100644
--- a/templates/base/layouts/tab-container/tab/layout.html.twig
+++ b/templates/base/layouts/tab-container/tab/layout.html.twig
@@ -1,6 +1,6 @@
 {# @copyright   Copyright (C) 2010-2021 Combodo SARL #}
 {# @license     http://opensource.org/licenses/AGPL-3.0 #}
-<div id="{{ oUIBlock.GetId() }}" class="ibo-tab">
+<div id="{{ oUIBlock.GetId() }}" class="ibo-tab" data-role="ibo-tab">
     {% block iboContentBlockContainer %}
         {% for oSubBlock in oUIBlock.GetSubBlocks() %}
             {{ render_block(oSubBlock, {aPage: aPage}) }}
diff --git a/templates/base/layouts/top-bar/layout.html.twig b/templates/base/layouts/top-bar/layout.html.twig
index f7e11b8c4..27923955a 100644
--- a/templates/base/layouts/top-bar/layout.html.twig
+++ b/templates/base/layouts/top-bar/layout.html.twig
@@ -1,5 +1,5 @@
-<nav id="{{ oUIBlock.GetId() }}" class="ibo-top-bar">
-	<div class="ibo-top-bar--quick-actions">
+<nav id="{{ oUIBlock.GetId() }}" class="ibo-top-bar" data-role="ibo-top-bar">
+	<div class="ibo-top-bar--quick-actions" data-role="ibo-top-bar--quick-actions">
 		{% if oUIBlock.HasQuickCreate() %}
 			{{ render_block(oUIBlock.GetQuickCreate(), {aPage: aPage}) }}
 		{% endif %}
diff --git a/templates/pages/backoffice/itopwebpage/layout.html.twig b/templates/pages/backoffice/itopwebpage/layout.html.twig
index 9aa4ef07d..3ffe160e7 100644
--- a/templates/pages/backoffice/itopwebpage/layout.html.twig
+++ b/templates/pages/backoffice/itopwebpage/layout.html.twig
@@ -3,8 +3,8 @@
 {% extends "pages/backoffice/nicewebpage/layout.html.twig" %}
 {% block iboPageBodyHtml %}
 		{{ render_block(aLayouts.oNavigationMenu, {aPage: aPage}) }}
-		<div id="ibo-page-container">
-			<div id="ibo-top-container">
+		<div id="ibo-page-container" data-role="ibo-page-container">
+			<div id="ibo-top-container" data-role="ibo-top-container">
 				{{ include('pages/backoffice/extension-blocks/banner.html.twig') }}
 				{{ render_block(aLayouts.oTopBar, {aPage: aPage}) }}
 			</div>