[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

8 files changed, 37 insertions, 37 deletions

diff --git a/addons/website/static/src/xml/website.backend.xml b/addons/website/static/src/xml/website.backend.xml
index 347402caf57..a5e14c2c0bc 100644
--- a/addons/website/static/src/xml/website.backend.xml
+++ b/addons/website/static/src/xml/website.backend.xml
@@ -90,7 +90,7 @@
     </t>
 
     <t t-name="website.GoToButtons">
-        <a href="/" class="btn btn-primary" title="Go to Website">
+        <a role="button" href="/" class="btn btn-primary" title="Go to Website">
             Go to Website
         </a>
     </t>
diff --git a/addons/website/static/src/xml/website.contentMenu.xml b/addons/website/static/src/xml/website.contentMenu.xml
index 57448d29082..2b98b0d0be7 100644
--- a/addons/website/static/src/xml/website.contentMenu.xml
+++ b/addons/website/static/src/xml/website.contentMenu.xml
@@ -3,16 +3,16 @@
 <t t-name="website.contentMenu.dialog.submenu">
     <li t-att-data-menu-id="submenu.id">
         <div class="input-group">
-            <span class="input-group-addon fa fa-bars"/>
+            <span class="input-group-addon fa fa-bars" role="img" aria-label="Dropdown menu" title="Dropdown menu"/>
             <span class="form-control">
                 <span class="js_menu_label">
                     <t t-esc="submenu.name"/>
                 </span>
-                <i t-if="submenu.is_homepage" class="pull-right fa fa-home" style="margin-top: 3px"/>
+                <i t-if="submenu.is_homepage" class="pull-right fa fa-home" style="margin-top: 3px" role="img" aria-label="Home" title="Home"/>
             </span>
             <span class="input-group-btn">
-                <button type="button" class="btn btn-primary js_edit_menu fa fa-pencil-square-o"/>
-                <button type="button" class="btn btn-danger js_delete_menu fa fa-trash-o"/>
+                <button type="button" class="btn btn-primary js_edit_menu fa fa-pencil-square-o" aria-label="Edit menu" title="Edit menu"/>
+                <button type="button" class="btn btn-danger js_delete_menu fa fa-trash-o" aria-label="Delete menu" title="Delete menu"/>
             </span>
         </div>
         <t t-set="children" t-value="submenu.children"/>
@@ -46,7 +46,7 @@
             Drag a menu to the right to create a sub-menu
         </small>
         <a href="#" class="js_add_menu">
-            <i class="fa fa-plus-circle"/> Add Menu Entry
+            <span class="fa fa-plus-circle"> Add Menu Entry</span>
         </a>
     </div>
 </div>
diff --git a/addons/website/static/src/xml/website.facebook_page.xml b/addons/website/static/src/xml/website.facebook_page.xml
index cdc0267d69b..4d362582a7b 100644
--- a/addons/website/static/src/xml/website.facebook_page.xml
+++ b/addons/website/static/src/xml/website.facebook_page.xml
@@ -50,9 +50,9 @@
         <div class="col-md-6" style="border-left: 1px solid #eeeeee;">
             <div class="form-group text-center">
                 <label>Preview</label>
-                <div class="alert alert-warning hidden facebook_page_warning text-center">
+                <div class="alert alert-warning hidden facebook_page_warning text-center" role="alert">
                     <div>
-                        <i class="fa fa-exclamation-triangle fa-3x" aria-hidden="true"></i>
+                        <i class="fa fa-exclamation-triangle fa-3x" role="img" aria-label="Warning" title="Warning"></i>
                     </div>
                     <h4 class="mb0">Invalid Facebook Page Url</h4>
                     <div>Please enter valid facebook page URL for preview</div>
diff --git a/addons/website/static/src/xml/website.gallery.xml b/addons/website/static/src/xml/website.gallery.xml
index 76bf650e76d..08226cb911b 100644
--- a/addons/website/static/src/xml/website.gallery.xml
+++ b/addons/website/static/src/xml/website.gallery.xml
@@ -14,21 +14,21 @@
             <div class="carousel-inner container" style="padding: 0;">
                  <t t-foreach="srcs" t-as="src">
                     <div t-attf-class="item #{src_index == index and 'active' or ''}">
-                        <img t-attf-class="img img-responsive #{userStyle}" t-att-src="src"/>
+                        <img t-attf-class="img img-responsive #{userStyle}" t-att-src="src" alt="Slide image"/>
                     </div>
                  </t>
             </div>
 
             <ul class="carousel-indicators">
-                <li class="fa fa-chevron-left o_indicators_left" style="overflow: hidden; padding: 12px; border: 0;"></li>
+                <li class="fa fa-chevron-left o_indicators_left" style="overflow: hidden; padding: 12px; border: 0;" aria-label="Previous" title="Previous"></li>
                 <t t-foreach="srcs" t-as="src">
                     <li t-attf-data-target="##{id}" t-att-data-slide-to="src_index" t-att-class="src_index == index and 'active'" t-attf-style="background-image: url(#{src})"></li>
                 </t>
-                <li class="fa fa-chevron-right o_indicators_right" style="overflow: hidden; padding: 12px; border: 0;"></li>
+                <li class="fa fa-chevron-right o_indicators_right" style="overflow: hidden; padding: 12px; border: 0;" aria-label="Next" title="Next"></li>
             </ul>
 
-            <a class="carousel-control left" t-attf-href="##{id}" data-slide="prev"><span class="fa fa-chevron-left" /></a>
-            <a class="carousel-control right" t-attf-href="##{id}" data-slide="next"><span class="fa fa-chevron-right" /></a>
+            <a class="carousel-control left" t-attf-href="##{id}" data-slide="prev" aria-label="Previous" title="Previous"><span class="fa fa-chevron-left"/></a>
+            <a class="carousel-control right" t-attf-href="##{id}" data-slide="next" aria-label="Next" title="Next"><span class="fa fa-chevron-right"/></a>
         </div>
     </t>
 
@@ -43,14 +43,14 @@
         ========================================================================
     -->
     <t t-name="website.gallery.slideshow.lightbox">
-        <div class="modal o_technical_modal fade" aria-labbelledby="Image Gallery Dialog" aria-hidden="true">
+        <div role="dialog" class="modal o_technical_modal fade" aria-labbelledby="Image Gallery Dialog">
             <div class="modal-dialog modal-lg" role="Picture Gallery"
                 t-attf-style="min-width: #{dim.min_width}px ; min-height: #{dim.min_height}px ; max-width: #{dim.max_width}px ; max-height: #{dim.max_height}px ; height: #{dim.height}px ;">
                 <div class="modal-content">
-                    <div class="modal-body o_slideshow">
-                        <button type="button" class="close" data-dismiss="modal" style="position: absolute; right: 12px; top: 10px;"><span aria-hidden="true">&amp;times;</span><span class="sr-only">Close</span></button>
+                    <main class="modal-body o_slideshow">
+                        <button type="button" class="close" data-dismiss="modal" style="position: absolute; right: 12px; top: 10px;"><span role="img" aria-label="Close">&amp;times;</span><span class="sr-only">Close</span></button>
                         <t t-call="website.gallery.slideshow"></t>
-                    </div>
+                    </main>
 
                 </div>
             </div>
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>
diff --git a/addons/website/static/src/xml/website.seo.xml b/addons/website/static/src/xml/website.seo.xml
index 7afd4ad32e9..08137872596 100644
--- a/addons/website/static/src/xml/website.seo.xml
+++ b/addons/website/static/src/xml/website.seo.xml
@@ -87,7 +87,7 @@
     </t>
 
     <t t-name="website.seo_tip">
-        <div t-attf-class="alert alert-#{ widget.type }">
+        <div t-attf-class="alert alert-#{ widget.type }" role="alert">
             <t t-raw="widget.message"/>
         </div>
     </t>
diff --git a/addons/website/static/src/xml/website.share.xml b/addons/website/static/src/xml/website.share.xml
index 832dc9698a8..b534f6e9cc7 100644
--- a/addons/website/static/src/xml/website.share.xml
+++ b/addons/website/static/src/xml/website.share.xml
@@ -4,7 +4,7 @@
         <div class="row clearfix" style='font-size:16px'>
             <div class="col-xs-12 css_editable_mode_hidden">
                 <t t-foreach="medias" t-as="media">
-                    <a style="cursor: pointer" t-attf-class="fa-stack fa-lg share #{media}">
+                    <a style="cursor: pointer" t-attf-class="fa-stack fa-lg share #{media}" t-att-aria-label="media" t-att-title="media">
                         <span class="fa fa-square fa-stack-2x"></span>
                         <span t-attf-class="oe_social_#{media} fa fa-#{media} fa-stack-1x fa-inverse"></span>
                     </a>
diff --git a/addons/website/static/src/xml/website.xml b/addons/website/static/src/xml/website.xml
index bc042547176..bdd5aa42941 100644
--- a/addons/website/static/src/xml/website.xml
+++ b/addons/website/static/src/xml/website.xml
@@ -1,14 +1,14 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <templates id="template" xml:space="preserve">
     <t t-name="website.prompt">
-        <div class="modal o_technical_modal" tabindex="-1" role="dialog" aria-hidden="true">
+        <div role="dialog" class="modal o_technical_modal" tabindex="-1">
                 <div class="modal-dialog">
                 <div class="modal-content">
-                    <div class="modal-header" t-if="window_title">
-                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
+                    <header class="modal-header" t-if="window_title">
+                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">×</button>
                         <h3 class="modal-title"><t t-esc="window_title"/></h3>
-                    </div>
-                    <div class="modal-body">
+                    </header>
+                    <main class="modal-body">
                         <form class="form-horizontal" role="form" t-att-id="id">
                             <div class="form-group mb0">
                                 <label for="page-name" class="col-sm-3 control-label">
@@ -21,11 +21,11 @@
                                 </div>
                             </div>
                         </form>
-                    </div>
-                    <div class="modal-footer">
+                    </main>
+                    <footer class="modal-footer">
                         <button type="button" class="btn btn-sm btn-primary btn-continue">Continue</button>
-                        <button type="button" class="btn btn-sm btn-default" data-dismiss="modal" aria-hidden="true">Cancel</button>
-                    </div>
+                        <button type="button" class="btn btn-sm btn-default" data-dismiss="modal" aria-label="Cancel">Cancel</button>
+                    </footer>
                 </div>
             </div>
         </div>