[IMP] Improve compatibility with screen readers (accessibility) (#24574)

Today, Odoo is really tricky to use without seeing the screen, it must be improved to be usable.

This PR forbid to use labels without a "for" attribute, add some title, rule and aria attributes in HTML. With that, Odoo will be fully usable with a screen reader.


* [IMP] Labels must have a for attribute. Improve accessibility.
* [IMP] Better error message when trying to read a missing cached value
* [FIX] Add some aria-label and title attributes for screen readers.
* [FIX] Template name is not included in the error message in case of SyntaxError in QWeb
* [FIX] Improve the Tour failed at step error message to be more explicit.
* [IMP] Add aria-labels
* [FIX] Add missing aria-label on failing test
* [IMP] aria-hidden means hidden. Fix all bad aria-hidden and hide aria-hidden for all.
* [IMP] Color names on kanban views and many2many tags
* [IMP] Add some checks on views for accessibility.
* [IMP] Add `alt` attribute on `img` tags.
* [IMP] Add aria-label and title on non-described icons
* [IMP] Add button role to widgets with btn class
* [IMP] Translate aria and formatted attributes.
* [IMP] Remove wrong aria-labelledby
* [IMP] Add menu role on dropdowns
* [IMP] Buttons must be focusable
* [IMP] Add aria attributes on progress bars
* [IMP] Improve accessibility of basic widgets
* [IMP] Change main layout to more semantic tags
* [IMP] Add menuitem role when missing
* [IMP] Remove wrong role='presentation'
* [IMP] Improve accessibility of tab panels
* [IMP] Add aria-invalid on invalid fields
* [IMP] Add aria-sort on ordered columns
* [IMP] Add role on alerts
* [IMP] Use dialog role, header, main and footer tags for modals
* [IMP] Add labels on o_status
* [IMP] Improve accessibility of kanban view with feeds and articles
* [IMP] Add alerts in case of new messages
* [IMP] Add widget, navigation or img role to aria-labelled items

3 files changed, 8 insertions, 8 deletions

diff --git a/addons/website/static/src/js/content/snippets.animation.js b/addons/website/static/src/js/content/snippets.animation.js
index 602556c03cc..7221ee40e6c 100644
--- a/addons/website/static/src/js/content/snippets.animation.js
+++ b/addons/website/static/src/js/content/snippets.animation.js
@@ -740,7 +740,7 @@ registry.gallery = Animation.extend({
             $(this).siblings().filter('.modal-backdrop').remove(); // bootstrap leaves a modal-backdrop
             $(this).remove();
         });
-        $modal.find('.modal-content, .modal-body.o_slideshow').css('height', '100%');
+        $modal.find('[role="dialog"] .modal-content, main.modal-body.o_slideshow').css('height', '100%');
         $modal.appendTo(document.body);
 
         this.carousel = new registry.gallery_slider($modal.find('.carousel').carousel());
diff --git a/addons/website/static/src/js/menu/mobile_view.js b/addons/website/static/src/js/menu/mobile_view.js
index acfd28042c9..0969efda7a1 100644
--- a/addons/website/static/src/js/menu/mobile_view.js
+++ b/addons/website/static/src/js/menu/mobile_view.js
@@ -17,7 +17,7 @@ var MobilePreviewDialog = Dialog.extend({
     start: function () {
         var self = this;
         this.$modal.addClass('oe_mobile_preview');
-        this.$modal.on('click', '.modal-header', function () {
+        this.$modal.on('click', 'header.modal-header', function () {
             self.$el.toggleClass('o_invert_orientation');
         });
         this.$iframe = $('<iframe/>', {
diff --git a/addons/website/static/src/js/tours/rte.js b/addons/website/static/src/js/tours/rte.js
index fb2a0cacea1..cc828154722 100644
--- a/addons/website/static/src/js/tours/rte.js
+++ b/addons/website/static/src/js/tours/rte.js
@@ -9,15 +9,15 @@ tour.register('rte_translator', {
     wait_for: base.ready(),
 }, [{
     content: "click on Add a language",
-    trigger: '.js_language_selector a:has(i.fa)',
+    trigger: '.js_language_selector a:has(span.fa)',
 }, {
     content: "select french",
     trigger: 'select[name="lang"]',
     run: 'text "fr_BE"',
 }, {
     content: "load french",
-    trigger: '.modal-footer button:first',
-    extra_trigger: '.modal select[name="lang"]:propValueContains(fr_BE)',
+    trigger: 'footer.modal-footer button:first',
+    extra_trigger: '[role="dialog"] select[name="lang"]:propValueContains(fr_BE)',
 }, {
     content : "click language dropdown",
     trigger : '.js_language_selector .dropdown-toggle',
@@ -72,7 +72,7 @@ tour.register('rte_translator', {
     trigger: 'html:not(:has(#wrap p span)) .o_menu_systray a[data-action="translate"]',
 }, {
     content: "close modal",
-    trigger: '.modal-footer .btn-default',
+    trigger: 'footer.modal-footer .btn-default',
 }, {
     content: "check if translation is activate",
     trigger: '[data-oe-translation-id]',
@@ -101,8 +101,8 @@ tour.register('rte_translator', {
     run: 'text test french placeholder',
 }, {
     content: "close modal",
-    trigger: '.modal-footer > .btn-primary',
-    extra_trigger: '.modal input:propValue(test french placeholder)',
+    trigger: 'footer.modal-footer .btn-primary',
+    extra_trigger: '[role="dialog"] input:propValue(test french placeholder)',
 }, {
     content: "save translation",
     trigger: 'button[data-action=save]',