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

diff --git a/odoo/addons/base/tests/test_view_validation.py b/odoo/addons/base/tests/test_view_validation.py
index 524a53609e4..c3ac8020c27 100644
--- a/odoo/addons/base/tests/test_view_validation.py
+++ b/odoo/addons/base/tests/test_view_validation.py
@@ -9,29 +9,45 @@ from odoo.tests.common import tagged
 from odoo.tools.view_validation import (
     valid_page_in_book, valid_att_in_form, valid_type_in_colspan,
     valid_type_in_col, valid_att_in_field, valid_att_in_label,
-    valid_field_in_graph, valid_field_in_tree,
+    valid_field_in_graph, valid_field_in_tree, valid_alternative_image_text,
+    valid_alternative_icon_text, valid_title_icon, valid_simili_button,
+    valid_simili_progressbar, valid_dialog, valid_simili_dropdown,
+    valid_focusable_button, valid_prohibited_none_role, valid_simili_tabpanel,
+    valid_simili_tab, valid_simili_tablist, valid_alerts
 )
 
 invalid_form = etree.parse(io.BytesIO(b'''\
 <form>
     <label></label>
+    <ul class="dropdown-menu"><li/><li/></ul>
+    <div role="presentation"/>
     <group>
         <div>
             <page></page>
-            <label colspan="True"></label>
+            <label colspan="True" string=""></label>
             <field></field>
         </div>
     </group>
     <notebook>
         <page>
             <group col="Two">
-            <div>
-                <label></label>
-                <field colspan="Five"> </field>
+                <div>
+                    <div class="o_progressbar">100%</div>
+                    <label string=""></label>
+                    <img/>
+                    <span class="fa fa-warning"/>
+                    <field colspan="Five"> </field>
                 </div>
             </group>
+            <a class="btn"/>
+            <div class="btn"/>
+            <div class="tab-pane"/>
         </page>
     </notebook>
+    <div class="modal"/>
+    <a data-toggle="tab"/>
+    <div class="nav-tabs"/>
+    <div class="alert alert-success"/>
 </form>
 ''')).getroot()
 
@@ -39,19 +55,36 @@ valid_form = etree.parse(io.BytesIO(b'''\
 <form string="">
     <field name=""></field>
     <field name=""></field>
+    <ul class="dropdown-menu" role="menu"></ul>
     <notebook>
         <page>
             <field name=""></field>
-            <label string=""></label>
+            <label for="" string=""></label>
             <field name=""></field>
         </page>
         <page>
             <group colspan="5" col="2">
+                <div class="o_progressbar" role="progressbar" aria-valuenow="14" aria-valuemin="0" aria-valuemax="100">14%</div>
                 <label for=""></label>
-                <label string="" colspan="5"></label>
+                <label for="" string="" colspan="5"></label>
+                <img alt="Test image"/>
+                <span class="fa fa-success" aria-label="Test span" title="Test span"/>
+                <a class="fa fa-success"><span aria-label="test" title="test"/></a>
+                <a class="btn" role="button"/>
             </group>
         </page>
     </notebook>
+    <div role="dialog" class="modal">
+        <header class="modal-header"/>
+        <main class="modal-body"/>
+        <footer class="modal-footer"/>
+    </div>
+    <div class="tab-pane" role="tabpanel"/>
+    <a data-toggle="tab" role="tab" aria-selected="true" aria-controls="test"/>
+    <div class="nav-tabs" role="tablist"/>
+    <div class="alert alert-success" role="alert"/>
+    <div class="alert alert-success" role="alertdialog"/>
+    <div class="alert alert-success" role="status"/>
 </form>
 ''')).getroot()
 
@@ -129,3 +162,31 @@ class TestViewValidation(unittest.TestCase):
     def test_col_datatype_validation(self):
         assert not valid_type_in_col(invalid_form)
         assert valid_type_in_col(valid_form)
+
+    def test_a11y_validation(self):
+        assert valid_alternative_image_text(invalid_form) == "Warning"
+        assert valid_alternative_image_text(valid_form) is True
+        assert valid_alternative_icon_text(invalid_form) == "Warning"
+        assert valid_alternative_icon_text(valid_form) is True
+        assert valid_title_icon(invalid_form) == "Warning"
+        assert valid_title_icon(valid_form) is True
+        assert valid_simili_button(invalid_form) == "Warning"
+        assert valid_simili_button(valid_form) is True
+        assert valid_dialog(invalid_form) == "Warning"
+        assert valid_dialog(valid_form) is True
+        assert valid_simili_dropdown(invalid_form) == "Warning"
+        assert valid_simili_dropdown(valid_form) is True
+        assert valid_simili_progressbar(invalid_form) == "Warning"
+        assert valid_simili_progressbar(valid_form) is True
+        assert valid_simili_tabpanel(invalid_form) == "Warning"
+        assert valid_simili_tabpanel(valid_form) is True
+        assert valid_simili_tablist(invalid_form) == "Warning"
+        assert valid_simili_tablist(valid_form) is True
+        assert valid_simili_tab(invalid_form) == "Warning"
+        assert valid_simili_tab(valid_form) is True
+        assert valid_focusable_button(invalid_form) == "Warning"
+        assert valid_focusable_button(valid_form) is True
+        assert valid_prohibited_none_role(invalid_form) == "Warning"
+        assert valid_prohibited_none_role(valid_form) is True
+        assert valid_alerts(invalid_form) == "Warning"
+        assert valid_alerts(valid_form) is True