[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

1 files changed, 22 insertions, 9 deletions

diff --git a/addons/web/static/src/js/core/dialog.js b/addons/web/static/src/js/core/dialog.js
index 7d4796886b7..6ebd94ef13e 100644
--- a/addons/web/static/src/js/core/dialog.js
+++ b/addons/web/static/src/js/core/dialog.js
@@ -17,12 +17,13 @@ var _t = core._t;
  *   always exists during the lifecycle of the dialog.
  **/
 var Dialog = Widget.extend({
+    tagName: 'main',
     xmlDependencies: ['/web/static/src/xml/dialog.xml'],
     custom_events: _.extend({}, Widget.prototype.custom_events, {
         focus_control_button: '_onFocusControlButton',
     }),
     events: _.extend({} , Widget.prototype.events, {
-        'keydown .modal-footer button':'_onFooterButtonKeyDown',
+        'keydown footer.modal-footer button':'_onFooterButtonKeyDown',
     }),
     /**
      * @param {Widget} parent
@@ -92,7 +93,7 @@ var Dialog = Widget.extend({
                     self.$modal.find('.modal-dialog').addClass('modal-sm');
                     break;
             }
-            self.$footer = self.$modal.find(".modal-footer");
+            self.$footer = self.$modal.find("footer");
             self.set_buttons(self.buttons);
             self.$modal.on('hidden.bs.modal', _.bind(self.destroy, self));
         });
@@ -168,7 +169,17 @@ var Dialog = Widget.extend({
 
         var self = this;
         this.appendTo($('<div/>')).then(function () {
-            self.$modal.find(".modal-body").replaceWith(self.$el);
+            var $main = self.$modal.find("main:first");
+            if ($main.length === 0) {
+                $main = self.$modal.find(".modal-body:first");
+            }
+            if (self.$el.tagName !== 'MAIN') {
+                self.$el.removeClass(".modal-body");
+                self.$el = $('<main class="modal-body"/>').append(self.$el);
+            }
+            $main.replaceWith(self.$el);
+            self.$modal.attr('open', true);
+            self.$modal.removeAttr("aria-hidden");
             self.$modal.modal('show');
             self._opened.resolve();
         });
@@ -201,11 +212,13 @@ var Dialog = Widget.extend({
         $('.tooltip').remove(); //remove open tooltip if any to prevent them staying when modal has disappeared
         if (this.$modal) {
             this.$modal.modal('hide');
+            this.$modal.removeAttr('open');
+            this.$modal.attr('aria-hidden', true);
             this.$modal.remove();
         }
 
         if (!isFocusSet) {
-            var modals = $('body > .modal').filter(':visible');
+            var modals = $('body > [role="dialog"]').filter(':visible');
             if (modals.length) {
                 modals.last().focus();
                 // Keep class modal-open (deleted by bootstrap hide fnct) on body to allow scrolling inside the modal
@@ -287,9 +300,9 @@ Dialog.alert = function (owner, message, options) {
     return new Dialog(owner, _.extend({
         size: 'medium',
         buttons: buttons,
-        $content: $('<div>', {
+        $content: $('<main role="alert"/>').append($('<p>', {
             text: message,
-        }),
+        })),
         title: _t("Alert"),
     }, options)).open({shouldFocusButtons:true});
 };
@@ -312,9 +325,9 @@ Dialog.confirm = function (owner, message, options) {
     return new Dialog(owner, _.extend({
         size: 'medium',
         buttons: buttons,
-        $content: $('<div>', {
+        $content: $('<main role="alert">').append($('<p>', {
             text: message,
-        }),
+        })),
         title: _t("Confirmation"),
     }, options)).open({shouldFocusButtons:true});
 };
@@ -345,7 +358,7 @@ Dialog.safeConfirm = function (owner, message, options) {
             text: message,
         });
     }
-    $content = $('<div/>').append($content, $securityCheck);
+    $content = $('<main role="alert"/>').append($content, $securityCheck);
 
     var buttons = [
         {