[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

addons/web/static/tests/fields/basic_fields_tests.js

@@ -1842,7 +1842,7 @@ QUnit.module('basic_fields', {
 
         // Actual flow: click on an element of the m2m to get its form view
         form.$('tbody td:contains(gold)').click();
-        assert.strictEqual($('.modal-dialog').length, 1,
+        assert.strictEqual($('[role="dialog"]').length, 1,
             'The modal should have opened');
         assert.verifySteps([
             "The view's image should have been fetched",
@@ -2570,7 +2570,7 @@ QUnit.module('basic_fields', {
 
         // switch to form view
         form.$('.o_field_widget[name=p] .o_data_row').click();
-        assert.strictEqual($('.modal .o_field_date[name=datetime]').text(), '02/07/2017',
+        assert.strictEqual($('[role="dialog"] .o_field_date[name=datetime]').text(), '02/07/2017',
             'the datetime (date widget) should be correctly displayed in form view');
 
         form.destroy();
@@ -2614,7 +2614,7 @@ QUnit.module('basic_fields', {
 
         // switch to form view
         form.$('.o_field_widget[name=p] .o_data_row').click();
-        assert.strictEqual($('.modal .o_field_date[name=datetime]').text(), '02/08/2017',
+        assert.strictEqual($('[role="dialog"] .o_field_date[name=datetime]').text(), '02/08/2017',
             'the datetime (date widget) should be correctly displayed in form view');
 
         form.destroy();
@@ -4602,13 +4602,13 @@ QUnit.module('basic_fields', {
 
         // open the selection
         form.$(".o_domain_show_selection_button").click();
-        assert.strictEqual($('.modal .o_list_view .o_data_row').length, 2,
+        assert.strictEqual($('[role="dialog"] .o_list_view .o_data_row').length, 2,
             "should have open a list view with 2 records in a dialog");
 
         // click on a record -> should not open the record
         // we don't actually check that it doesn't open the record because even
         // if it tries to, it will crash as we don't define an arch in this test
-        $('.modal .o_list_view .o_data_row:first .o_data_cell').click();
+        $('[role="dialog"] .o_list_view .o_data_row:first .o_data_cell').click();
 
         form.destroy();
     });