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

diff --git a/addons/website_links/views/website_links_graphs.xml b/addons/website_links/views/website_links_graphs.xml
index bb846302052..f4a892064f3 100644
--- a/addons/website_links/views/website_links_graphs.xml
+++ b/addons/website_links/views/website_links_graphs.xml
@@ -48,10 +48,10 @@
                                         <p>
                                             <span class="o_website_links_short_url" id="short_url"><span id="short-url-host"><t t-esc="short_url_host"/></span><span id="o_website_links_code"><t t-esc="code"/></span></span>
                                             <span class="o_website_links_edit_tools" style="display:none;">
-                                                <a class="o_website_links_ok_edit btn btn-xs btn-primary" href="#">ok</a> or 
+                                                <a role="button" class="o_website_links_ok_edit btn btn-xs btn-primary" href="#">ok</a> or 
                                                 <a class="o_website_links_cancel_edit" href="#">cancel</a>
                                             </span>
-                                            <a class="o_website_links_edit_code"><span class="fa fa-pencil gray"></span></a>
+                                            <a class="o_website_links_edit_code" aria-label="Edit code" title="Edit code"><span class="fa fa-pencil gray"></span></a>
                                             <a class="copy-to-clipboard" t-att-data-clipboard-text="short_url">copy</a>
                                             
                                         </p>
@@ -107,9 +107,9 @@
                         <h1 class="page-header">Statistics
                             <small class="pull-right hidden-xs mt16" id="filters">
                                 <ul class="nav nav-tabs nav-tabs-inline graph-tabs" role="tablist">
-                                    <li class="active"><a href="#all_time_charts" role="tab" data-toggle="tab">All Time</a></li>
-                                    <li><a href="#last_month_charts" role="tab" data-toggle="tab">Last Month</a></li>
-                                    <li><a href="#last_week_charts" role="tab" data-toggle="tab">Last Week</a></li>
+                                    <li class="active"><a aria-controls="all_time_charts" href="#all_time_charts" role="tab" data-toggle="tab">All Time</a></li>
+                                    <li><a aria-controls="last_month_charts" href="#last_month_charts" role="tab" data-toggle="tab">Last Month</a></li>
+                                    <li><a aria-controls="last_week_charts" href="#last_week_charts" role="tab" data-toggle="tab">Last Week</a></li>
                                 </ul>
                             </small>
                         </h1>
@@ -119,7 +119,7 @@
                                 <div class="tab-content">
 
                                     <!-- All Time Charts -->
-                                    <div class="tab-pane active" id="all_time_charts">
+                                    <div role="tabpanel" class="tab-pane active" id="all_time_charts">
                                         <div class="row">
                                             <div class="col-sm-7 website_links_click_chart" id="all_time_clicks_chart">
                                                 <h3 class="title"></h3>
@@ -133,7 +133,7 @@
                                     </div>
 
                                     <!-- Last Month Charts -->
-                                    <div class="tab-pane" id="last_month_charts">
+                                    <div role="tabpanel" class="tab-pane" id="last_month_charts">
                                         <div class="row">
                                             <div class="col-sm-7 website_links_click_chart" id="last_month_clicks_chart">
                                                 <h3 class="title"></h3>
@@ -147,7 +147,7 @@
                                     </div>
 
                                     <!-- Last Week Charts -->
-                                    <div class="tab-pane" id="last_week_charts">
+                                    <div role="tabpanel" class="tab-pane" id="last_week_charts">
                                         <div class="row">
                                             <div class="col-sm-7 website_links_click_chart" id="last_week_clicks_chart">
                                                 <h3 class="title"></h3>
diff --git a/addons/website_links/views/website_links_template.xml b/addons/website_links/views/website_links_template.xml
index 7e863ba79d4..c8986c12a9a 100644
--- a/addons/website_links/views/website_links_template.xml
+++ b/addons/website_links/views/website_links_template.xml
@@ -47,7 +47,7 @@
 
                                 <div class="o_website_links_utm_forms">
                                     <div class="form-group">
-                                        <label class="col-sm-3 control-label">Campaign <i class="fa fa-info-circle" data-toggle="tooltip" data-placement="top" title="Defines the context of your link. It might be an event you want to promote or a special promotion."></i></label>
+                                        <label class="col-sm-3 control-label">Campaign <i class="fa fa-info-circle" data-toggle="tooltip" data-placement="top" role="img" aria-label="Tooltip info" title="Defines the context of your link. It might be an event you want to promote or a special promotion."></i></label>
 
                                         <div class="col-sm-9">
                                             <input type="hidden" class="form-control" id="campaign-select"/>
@@ -55,7 +55,7 @@
                                     </div>
 
                                     <div class="form-group">
-                                        <label class="col-sm-3 control-label">Medium <i class="fa fa-info-circle" data-toggle="tooltip" data-placement="top" title="Defines the medium used to share your link. It might be an email, or a Facebook Ads for instance."></i></label>
+                                        <label class="col-sm-3 control-label">Medium <i class="fa fa-info-circle" data-toggle="tooltip" data-placement="top" role="img" aria-label="Tooltip info" title="Defines the medium used to share your link. It might be an email, or a Facebook Ads for instance."></i></label>
 
                                         <div class="col-sm-9">
                                             <input type="hidden" class="form-control" id="channel-select" />
@@ -63,7 +63,7 @@
                                     </div>
 
                                     <div class="form-group">
-                                        <label class="col-sm-3 control-label">Source <i class="fa fa-info-circle" data-toggle="tooltip" data-placement="top" title="Defines the source from which your traffic will come from, Facebook or Twitter for instance."></i></label>
+                                        <label class="col-sm-3 control-label">Source <i class="fa fa-info-circle" data-toggle="tooltip" data-placement="top" role="img" aria-label="Tooltip info" title="Defines the source from which your traffic will come from, Facebook or Twitter for instance."></i></label>
 
                                         <div class="col-sm-9">
                                             <input type="hidden" class="form-control" id="source-select" />
@@ -90,9 +90,9 @@
                     <h2 class="page-header">Your tracked links 
                         <small class="pull-right hidden-xs mt16" id="filters">
                             <ul class="nav nav-tabs nav-tabs-inline graph-tabs" role="tablist">
-                                <li class="active"><a href="#" id="filter-newest-links" role="tab" data-toggle="tab">Newest</a></li>
-                                <li><a href="#" id="filter-most-clicked-links" role="tab" data-toggle="tab">Most Clicked</a></li>
-                                <li><a href="#" id="filter-recently-used-links" role="tab" data-toggle="tab">Recently Used</a></li>
+                                <li class="active"><a aria-controls="filter-newest-links" href="#" id="filter-newest-links" role="tab" data-toggle="tab">Newest</a></li>
+                                <li><a aria-controls="filter-most-clicked-links" href="#" id="filter-most-clicked-links" role="tab" data-toggle="tab">Most Clicked</a></li>
+                                <li><a aria-controls="filter-recently-used-links" href="#" id="filter-recently-used-links" role="tab" data-toggle="tab">Recently Used</a></li>
                             </ul>
                         </small>
                     </h2>