[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, 23 insertions, 23 deletions

diff --git a/odoo/addons/test_main_flows/static/src/js/tour.js b/odoo/addons/test_main_flows/static/src/js/tour.js
index 925e86c9bef..c74d473fcbc 100644
--- a/odoo/addons/test_main_flows/static/src/js/tour.js
+++ b/odoo/addons/test_main_flows/static/src/js/tour.js
@@ -122,7 +122,7 @@ tour.register('main_flow_tour', {
     position: 'right',
 }, {
     trigger:  ".o_field_widget[name=name] input",
-    extra_trigger: ".modal-dialog",
+    extra_trigger: "[role=\"dialog\"]",
     content: _t('Select a seller'),
     position: 'top',
     run: "text the_flow.vendor",
@@ -135,12 +135,12 @@ tour.register('main_flow_tour', {
     position: 'right',
     run: "text 1",
 }, {
-    trigger:  ".modal-footer .btn-primary:first",
+    trigger:  "footer.modal-footer .btn-primary:first",
     extra_trigger: ".o_field_widget[name=name] > .o_external_button", // Wait name_create
     content: _t('Save & Close'),
     position: 'bottom',
 }, {
-    trigger: ".modal-footer .btn-primary",
+    trigger: "footer.modal-footer .btn-primary",
     content: _t('Save'),
     position: 'bottom',
 },
@@ -176,7 +176,7 @@ tour.register('main_flow_tour', {
     position: 'right',
 }, {
     trigger:  ".o_field_widget[name=name] input",
-    extra_trigger: ".modal-dialog",
+    extra_trigger: "[role=\"dialog\"]",
     content: _t('Select a seller'),
     position: 'top',
     run: "text the_flow.vendor",
@@ -190,11 +190,11 @@ tour.register('main_flow_tour', {
     position: 'right',
     run: "text 1",
 }, {
-    trigger:  ".modal-footer .btn-primary:first",
+    trigger:  "footer.modal-footer .btn-primary:first",
     content: _t('Save & Close'),
     position: 'bottom',
 }, {
-    trigger: ".modal-footer .btn-primary",
+    trigger: "footer.modal-footer .btn-primary",
     // Wait Save & Close and check value
     extra_trigger: ".o_field_widget[name=seller_ids] .o_data_row td:nth-child(2):contains('the_flow.vendor')",
     content: _t('Save'),
@@ -326,8 +326,8 @@ tour.register('main_flow_tour', {
     run: function (actions) {
         actions.auto();
         // if the one2many isn't editable, we have to close the dialog
-        if ($(".modal-footer .btn-primary").length) {
-            actions.auto(".modal-footer .btn-primary");
+        if ($("footer.modal-footer .btn-primary").length) {
+            actions.auto("footer.modal-footer .btn-primary");
         }
     },
 }, {
@@ -338,7 +338,7 @@ tour.register('main_flow_tour', {
     trigger: ".o_field_widget[name=product_id] input",
     // the one2many may be editable or not according to the modules installed, so
     // we have to handle both cases
-    extra_trigger: '.o_field_widget[name=order_line] .o_data_row:nth(1).o_selected_row, .modal-dialog',
+    extra_trigger: '.o_field_widget[name=order_line] .o_data_row:nth(1).o_selected_row, [role="dialog"]',
     content: _t("Select a product"),
     position: "right",
     run: "text the_flow.service",
@@ -349,8 +349,8 @@ tour.register('main_flow_tour', {
     run: function (actions) {
         actions.auto();
         // if the one2many isn't editable, we have to close the dialog
-        if ($(".modal-footer .btn-primary").length) {
-            actions.auto(".modal-footer .btn-primary");
+        if ($("footer.modal-footer .btn-primary").length) {
+            actions.auto("footer.modal-footer .btn-primary");
         }
     },
 }, {
@@ -368,11 +368,11 @@ tour.register('main_flow_tour', {
     position: "right",
     run: "text test@the_flow.com",
 },{
-    trigger: ".modal-footer .btn-primary",
+    trigger: "footer.modal-footer .btn-primary",
     content: _t("Save your changes"),
     position: "bottom",
 },  {
-    trigger: ".modal-footer .btn-primary span:contains('Send')",
+    trigger: "footer.modal-footer .btn-primary span:contains('Send')",
     content: _t("Try to send it to email"),
     position: "bottom",
 }, {
@@ -440,8 +440,8 @@ tour.register('main_flow_tour', {
     content: _t("Click on schedulers"),
     position: "bottom"
 }, {
-    trigger: ".modal-footer .btn-primary",
-    extra_trigger: ".modal-dialog",
+    trigger: "footer.modal-footer .btn-primary",
+    extra_trigger: "[role=\"dialog\"]",
     content: _t("Run Schedulers"),
     position: "bottom",
 }, {
@@ -471,8 +471,8 @@ tour.register('main_flow_tour', {
     content: _t("Validate"),
     position: "bottom",
 }, {
-    trigger: ".modal-footer .btn-primary",
-    extra_trigger: ".modal-dialog",
+    trigger: "footer.modal-footer .btn-primary",
+    extra_trigger: "[role=\"dialog\"]",
     content: _t("Apply"),
     position: "bottom",
 }, {
@@ -497,12 +497,12 @@ tour.register('main_flow_tour', {
     position: "bottom",
 }, {
     trigger: "select.o_field_widget[name=journal_id]",
-    extra_trigger: ".modal-dialog",
+    extra_trigger: "[role=\"dialog\"]",
     content: _t("Select Journal"),
     position: "bottom",
     run: 'text(Bank (USD))',
 }, {
-    trigger: ".modal-footer .btn-primary",
+    trigger: "footer.modal-footer .btn-primary",
     extra_trigger: ".o_field_widget[name=payment_method_id]", // FIXME: Wait onchange
     content: _t("Validate"),
     position: "bottom",
@@ -528,7 +528,7 @@ tour.register('main_flow_tour', {
     content: _t("Produce"),
     position: "bottom",
 }, {
-    trigger:  ".modal-footer .btn-primary:first",
+    trigger:  "footer.modal-footer .btn-primary:first",
     content: _t('Record Production'),
     position: 'bottom',
 }, {
@@ -607,7 +607,7 @@ tour.register('main_flow_tour', {
     content: _t("Validate"),
     position: "bottom",
 }, {
-    trigger: ".modal-footer .btn-primary",
+    trigger: "footer.modal-footer .btn-primary",
     content: _t("Create and View Invoices"),
     position: "bottom",
 }, {
@@ -620,12 +620,12 @@ tour.register('main_flow_tour', {
     position: "bottom",
 }, {
     trigger: "select.o_field_widget[name=journal_id]",
-    extra_trigger: ".modal-dialog",
+    extra_trigger: "[role=\"dialog\"]",
     content: _t("Select Journal"),
     position: "bottom",
     run: 'text(Bank (USD))',
 }, {
-    trigger: ".modal-footer .btn-primary",
+    trigger: "footer.modal-footer .btn-primary",
     content: _t("Validate"),
     position: "bottom",
 }, {