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

diff --git a/addons/mail/static/tests/chatter_tests.js b/addons/mail/static/tests/chatter_tests.js
index 46de2e22d3f..f42170c696e 100644
--- a/addons/mail/static/tests/chatter_tests.js
+++ b/addons/mail/static/tests/chatter_tests.js
@@ -690,7 +690,7 @@ QUnit.test('chatter: Attachment viewer', function (assert) {
     assert.strictEqual($('.o_modal_fullscreen img.o_viewer_img[data-src="/web/image/1?unique=1"]').length, 1,
         "Modal popup should open with first image src");
     //  click on next button
-    $('.modal .arrow.arrow-right.move_next span').click();
+    $('[role="dialog"] .arrow.arrow-right.move_next span').click();
     assert.strictEqual($('.o_modal_fullscreen img.o_viewer_img[data-src="/web/image/2?unique=1"]').length, 1,
         "Modal popup should have now second image src");
     assert.strictEqual($('.o_modal_fullscreen .o_viewer_toolbar .o_download_btn').length, 1,
@@ -1172,8 +1172,8 @@ QUnit.test('followers widget: follow/unfollow, edit subtypes', function (assert)
 
     // click to unfollow
     form.$('.o_followers_follow_button').click(); // click to open the dropdown
-    assert.ok($('.modal').length, 'a confirm modal should be opened');
-    $('.modal .modal-footer .btn-primary').click(); // click on 'OK'
+    assert.ok($('[role="dialog"]').length, 'a confirm modal should be opened');
+    $('footer.modal-footer .btn-primary').click(); // click on 'OK'
     assert.strictEqual(form.$('.o_followers_count').text(), "0", 'should have no followers');
     assert.ok(form.$('.o_followers_follow_button.o_followers_notfollow').length,
         'should display the "Follow" button');
@@ -1366,9 +1366,9 @@ QUnit.test('fieldmany2many tags email', function (assert) {
     }).then(function (form) {
         // should read it 3 times (1 with the form view, one with the form dialog and one after save)
         assert.verifySteps([[12, 14], [14], [14]]);
-        assert.strictEqual(form.$('.o_field_many2manytags[name="timmy"] span.o_tag_color_0').length, 2,
+        assert.strictEqual(form.$('.o_field_many2manytags[name="timmy"] button.o_tag_color_0').length, 2,
             "two tags should be present");
-        var firstTag = form.$('.o_field_many2manytags[name="timmy"] span.o_tag_color_0').first();
+        var firstTag = form.$('.o_field_many2manytags[name="timmy"] button.o_tag_color_0').first();
         assert.strictEqual(firstTag.find('.o_badge_text').text(), "gold",
             "tag should only show display_name");
         assert.strictEqual(firstTag.find('.o_badge_text').attr('title'), "coucou@petite.perruche",
@@ -1377,16 +1377,16 @@ QUnit.test('fieldmany2many tags email', function (assert) {
         done();
     });
 
-    assert.strictEqual($('.modal-body.o_act_window').length, 1,
+    assert.strictEqual($('main.modal-body.o_act_window').length, 1,
         "there should be one modal opened to edit the empty email");
-    assert.strictEqual($('.modal-body.o_act_window input[name="display_name"]').val(), "silver",
+    assert.strictEqual($('main.modal-body input[name="display_name"]').val(), "silver",
         "the opened modal should be a form view dialog with the partner_type 14");
-    assert.strictEqual($('.modal-body.o_act_window input[name="email"]').length, 1,
+    assert.strictEqual($('main.modal-body input[name="email"]').length, 1,
         "there should be an email field in the modal");
 
     // set the email and save the modal (will render the form view)
-    $('.modal-body.o_act_window input[name="email"]').val('coucou@petite.perruche').trigger('input');
-    $('.modal-footer .btn-primary').click();
+    $('main.modal-body input[name="email"]').val('coucou@petite.perruche').trigger('input');
+    $('footer.modal-footer .btn-primary').click();
 });
 
 QUnit.test('fieldmany2many tags email (edition)', function (assert) {
@@ -1421,7 +1421,7 @@ QUnit.test('fieldmany2many tags email (edition)', function (assert) {
     });
 
     assert.verifySteps([[12]]);
-    assert.strictEqual(form.$('.o_field_many2manytags[name="timmy"] span.o_tag_color_0').length, 1,
+    assert.strictEqual(form.$('.o_field_many2manytags[name="timmy"] button.o_tag_color_0').length, 1,
         "should contain one tag");
 
     // add an other existing tag
@@ -1429,18 +1429,18 @@ QUnit.test('fieldmany2many tags email (edition)', function (assert) {
     $input.click(); // opens the dropdown
     $input.autocomplete('widget').find('li:first').click(); // add 'silver'
 
-    assert.strictEqual($('.modal-body.o_act_window').length, 1,
+    assert.strictEqual($('main.modal-body.o_act_window').length, 1,
         "there should be one modal opened to edit the empty email");
-    assert.strictEqual($('.modal-body.o_act_window input[name="display_name"]').val(), "silver",
-        "the opened modal should be a form view dialog with the partner_type 14");
-    assert.strictEqual($('.modal-body.o_act_window input[name="email"]').length, 1,
+    assert.strictEqual($('main.modal-body input[name="display_name"]').val(), "silver",
+        "the opened modal in edit mode should be a form view dialog with the partner_type 14");
+    assert.strictEqual($('main.modal-body input[name="email"]').length, 1,
         "there should be an email field in the modal");
 
     // set the email and save the modal (will rerender the form view)
-    $('.modal-body.o_act_window input[name="email"]').val('coucou@petite.perruche').trigger('input');
-    $('.modal-footer .btn-primary').click();
+    $('main.modal-body input[name="email"]').val('coucou@petite.perruche').trigger('input');
+    $('footer.modal-footer .btn-primary').click();
 
-    assert.strictEqual(form.$('.o_field_many2manytags[name="timmy"] span.o_tag_color_0').length, 2,
+    assert.strictEqual(form.$('.o_field_many2manytags[name="timmy"] button.o_tag_color_0').length, 2,
         "should contain the second tag");
     // should have read [14] three times: when opening the dropdown, when opening the modal, and
     // after the save