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

diff --git a/addons/website/static/src/xml/website.pageProperties.xml b/addons/website/static/src/xml/website.pageProperties.xml
index 098bb5533b5..7ee6b1fb485 100644
--- a/addons/website/static/src/xml/website.pageProperties.xml
+++ b/addons/website/static/src/xml/website.pageProperties.xml
@@ -40,12 +40,12 @@
 
 <div t-name="website.pagesMenu.page_info" class="o_page_management_info">
     <form class="form-horizontal">
-        <ul class="nav nav-tabs">
-            <li class="active"><a data-toggle="tab" href="#basic_page_info">Name</a></li>
-            <li><a data-toggle="tab" href="#advances_page_info">Publish</a></li>
+        <ul class="nav nav-tabs" role="tablist">
+            <li class="active"><a aria-controls="basic_page_info" data-toggle="tab" href="#basic_page_info" role="tab">Name</a></li>
+            <li><a aria-controls="advances_page_info" data-toggle="tab" href="#advances_page_info" role="tab">Publish</a></li>
         </ul>
         <div class="tab-content mt16">
-            <div id="basic_page_info" class="tab-pane fade in active">
+            <div role="tabpanel" id="basic_page_info" class="tab-pane fade in active">
                 <div class="form-group">
                     <label class="control-label col-sm-3" for="page_name">Page Name</label>
                     <div class="col-sm-9">
@@ -85,7 +85,7 @@
                     </div>
                 </div>
             </div>
-            <div id="advances_page_info" class="tab-pane fade">
+            <div role="tabpanel" id="advances_page_info" class="tab-pane fade">
                 <div class="form-group">
                     <label class="control-label col-sm-3" for="is_menu">Show in Top Menu</label>
                     <div class="col-sm-2">
@@ -111,7 +111,7 @@
                 <div class="form-group">
                     <label class="control-label col-sm-3" for="is_indexed">
                         Indexed
-                        <i class="fa fa-question-circle-o" title="Hide this page from search results" aria-hidden="true"></i>
+                        <i class="fa fa-question-circle-o" title="Hide this page from search results" role="img" aria-label="Info"></i>
                     </label>
                     <div class="col-sm-2">
                         <a>
@@ -126,10 +126,10 @@
                     <label class="control-label col-sm-3" for="is_published">Publish</label>
                     <div class="col-sm-2">
                         <a>
-                            <label class="o_switch js_publish_btn" for="is_published" >
+                            <button class="o_switch js_publish_btn">
                                 <input type="checkbox" t-att-checked="widget.page.website_published ? true : undefined" id="is_published"/>
                                 <span/>
-                            </label>
+                            </button>
                         </a>
                     </div>
                 </div>
@@ -139,7 +139,7 @@
                         <div class='input-group date' id='date_publish_container'>
                             <input type='text' class="form-control" name="date_publish" id="date_publish" />
                             <span class="input-group-addon">
-                                <span class="fa fa-calendar"></span>
+                                <span class="fa fa-calendar" role="img" aria-label="Publish date" title="Publish date"></span>
                             </span>
                         </div>
                     </div>