[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

2 files changed, 6 insertions, 6 deletions

diff --git a/addons/barcodes/static/src/js/barcode_form_view.js b/addons/barcodes/static/src/js/barcode_form_view.js
index 15e27498f94..9a09480558b 100644
--- a/addons/barcodes/static/src/js/barcode_form_view.js
+++ b/addons/barcodes/static/src/js/barcode_form_view.js
@@ -349,7 +349,7 @@ FormController.include({
         }
         // only catch the event if we're not focused in
         // another field and it's a number
-        if (!$(event.target).is('body, .modal') || !/[0-9]/.test(character)) {
+        if (!$(event.target).is('body, [role="dialog"]') || !/[0-9]/.test(character)) {
             return;
         }
 
diff --git a/addons/barcodes/static/tests/barcode_tests.js b/addons/barcodes/static/tests/barcode_tests.js
index de88e79b9fc..3d3ed4c7531 100644
--- a/addons/barcodes/static/tests/barcode_tests.js
+++ b/addons/barcodes/static/tests/barcode_tests.js
@@ -468,12 +468,12 @@ QUnit.test('specification of widget barcode_handler with keypress and notifyChan
     setTimeout(function () {
         var keycode = $.ui.keyCode.ENTER;
 
-        assert.strictEqual($('.modal .modal-body').length, 1, 'should open a modal with a quantity as input');
-        assert.strictEqual($('.modal .modal-body .o_set_qty_input').val(), '5', 'the quantity by default in the modal shoud be 5');
+        assert.strictEqual($('main.modal-body').length, 1, 'should open a modal with a quantity as input');
+        assert.strictEqual($('main.modal-body .o_set_qty_input').val(), '5', 'the quantity by default in the modal shoud be 5');
 
-        $('.modal .modal-body .o_set_qty_input').val('7');
+        $('main.modal-body .o_set_qty_input').val('7');
 
-        $('.modal .modal-body .o_set_qty_input').trigger($.Event('keypress', {which: keycode, keyCode: keycode}));
+        $('main.modal-body .o_set_qty_input').trigger($.Event('keypress', {which: keycode, keyCode: keycode}));
         assert.strictEqual(form.$('.o_data_row .o_data_cell:nth(1)').text(), '7',
         "quantity checked should be 7");
 
@@ -533,7 +533,7 @@ QUnit.test('barcode_scanned only trigger error for active view', function (asser
         } else {
             keycode = char.charCodeAt(0);
         }
-        return $('.modal').trigger($.Event('keypress', {which: keycode, keyCode: keycode}));
+        return $('[role="dialog"]').trigger($.Event('keypress', {which: keycode, keyCode: keycode}));
     }
     _.each(['O','-','B','T','N','.','c','a','n','c','e','l','Enter'], modalTriggerKeypressEvent);
     assert.verifySteps(['warning'], "only one event should be triggered");