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

diff --git a/addons/web_settings_dashboard/static/src/xml/dashboard.xml b/addons/web_settings_dashboard/static/src/xml/dashboard.xml
index f7ccf053e8d..34c564a6af5 100644
--- a/addons/web_settings_dashboard/static/src/xml/dashboard.xml
+++ b/addons/web_settings_dashboard/static/src/xml/dashboard.xml
@@ -24,7 +24,7 @@
 
     <t t-name="DashboardApps">
         <div class="text-center o_web_settings_dashboard_apps">
-            <i class="fa fa-cog fa-4x text-muted o_browse_apps" style="cursor: pointer;"></i>
+            <i class="fa fa-cog fa-4x text-muted o_browse_apps" style="cursor: pointer;" role="img" aria-label="Browse Apps" title="Browse Apps"></i>
             <div class="o_web_settings_dashboard_header">
                 <t t-set="installed_apps" t-value="widget.data.installed_apps"/>
                 <t t-if="installed_apps">
@@ -40,8 +40,8 @@
                 <a class="btn btn-primary btn-block o_browse_apps" role="button"><strong>Browse Apps</strong></a>
             </div>
             <div class="o_web_settings_dashboard_pills">
-                <a href="https://www.odoo.com/apps/modules" target="_blank" class="pull-left"><i class="fa fa-rocket fa-2x text-muted"/> App store</a>
-                <a href="https://www.odoo.com/apps/themes" target="_blank" class="pull-right"><i class="fa fa-picture-o fa-2x text-muted"/> Theme store</a>
+                <a href="https://www.odoo.com/apps/modules" target="_blank" class="pull-left"><span class="fa fa-rocket fa-2x text-muted"> App store</span></a>
+                <a href="https://www.odoo.com/apps/themes" target="_blank" class="pull-right"><span class="fa fa-picture-o fa-2x text-muted"> Theme store</span></a>
             </div>
             <div class="clearfix"/>
         </div>
@@ -52,13 +52,13 @@
             <span class="o_badge_text">
                 <t t-esc='email'/>
             </span>
-            <span class="fa fa-times o_badge_remove" title="Remove Email" role="button"/>
+            <a href="#" class="fa fa-times o_badge_remove" title="Remove Email" aria-label="Remove Email" role="button"/>
         </span>
     </t>
 
     <t t-name="DashboardInvitations">
         <div class="text-center o_web_settings_dashboard_invitations">
-            <i class="fa fa-users fa-4x text-muted o_web_settings_dashboard_access_rights" style="cursor: pointer;"></i>
+            <i class="fa fa-users fa-4x text-muted o_web_settings_dashboard_access_rights" style="cursor: pointer;" role="img" aria-label="Access rights" title="Access rights"></i>
             <div class="o_web_settings_dashboard_header">
                 <t t-set="active_users" t-value="widget.data.active_users"></t>
                 <t t-set="pending_users" t-value="widget.data.pending_users"></t>
@@ -75,7 +75,7 @@
             <div class="o_web_settings_dashboard_invitation_form">
                 <p><strong>Invite new users:</strong></p>
                 <input class="o_user_emails o_input mt8" type="text" placeholder="Enter e-mail addresses"/>
-                <button class="btn btn-primary btn-block o_web_settings_dashboard_invite mt16" role="button" data-loading-text="Inviting..."><strong>Invite</strong></button>
+                <button class="btn btn-primary btn-block o_web_settings_dashboard_invite mt16" data-loading-text="Inviting..."><strong>Invite</strong></button>
             </div>
             <div class="o_web_settings_dashboard_pending_users mt8">
                 <t t-if="pending_users.length">
@@ -94,7 +94,7 @@
 
     <t t-name="DashboardShare">
         <div class="text-center o_web_settings_dashboard_share">
-            <i class="fa fa-share-alt fa-4x text-muted"/>
+            <i class="fa fa-share-alt fa-4x text-muted" role="img" aria-label="Share" title="Share"/>
             <div class="o_web_settings_dashboard_header">Share the Love</div>
             <div>
                 <small class="text-muted text-center o_web_settings_dashboard_compact_subtitle">
@@ -102,9 +102,9 @@
                 </small>
             </div>
             <div class="row mt16">
-                <div class="col-xs-4"><a href="#"><i class="fa fa-twitter-square fa-4x tw_share"/></a></div>
-                <div class="col-xs-4"><a href="#"><i class="fa fa-facebook-square fa-4x fb_share"/></a></div>
-                <div class="col-xs-4"><a href="#"><i class="fa fa-linkedin-square fa-4x li_share"/></a></div>
+                <div class="col-xs-4"><a href="#" aria-label="Twitter" title="Twitter"><i class="fa fa-twitter-square fa-4x tw_share"/></a></div>
+                <div class="col-xs-4"><a href="#" aria-label="Facebook" title="Facebook"><i class="fa fa-facebook-square fa-4x fb_share"/></a></div>
+                <div class="col-xs-4"><a href="#" aria-label="LinkedIn" title="LinkedIn"><i class="fa fa-linkedin-square fa-4x li_share"/></a></div>
             </div>
             <hr/>
             <t t-set="server_version" t-value="widget.data.server_version"/>
@@ -119,7 +119,7 @@
                     </div>
                     <div>
                         <div class="tab-content">
-                            <div id="settings" class="tab-pane active text-muted text-center o_web_settings_dashboard_compact_subtitle">
+                            <div role="tabpanel" id="settings" class="tab-pane active text-muted text-center o_web_settings_dashboard_compact_subtitle">
                                 <small>Copyright © 2004-2016 <a target="_blank" href="https://www.odoo.com" style="text-decoration: underline;">Odoo S.A.</a> <a target="_blank" href="http://www.gnu.org/licenses/lgpl.html" style="text-decoration: underline;">GNU LGPL Licensed</a></small>
                             </div>
                         </div>
@@ -145,7 +145,7 @@
             <div class="text-center o_web_settings_dashboard_enterprise">
                 <div class="text-center o_web_settings_dashboard_header">Odoo Enterprise</div>
                 <div class="mb16"><a href="http://www.odoo.com/editions" target="_blank">Get more features with the Enterprise Edition!</a></div>
-                <div><img class="img img-responsive" t-att-src='_s + "/web/static/src/img/enterprise_upgrade.jpg"'/></div>
+                <div><img class="img img-responsive" t-att-src='_s + "/web/static/src/img/enterprise_upgrade.jpg"' alt="Upgrade to enterprise"/></div>
                 <div>
                     <a class="btn btn-primary btn-block o_confirm_upgrade" role="button"><strong>Upgrade Now</strong></a>
                 </div>
@@ -155,7 +155,7 @@
 
     <t t-name="DashboardTranslations">
         <div class="text-center o_web_settings_dashboard_translations mt8">
-            <i class="fa fa-globe fa-4x text-muted"></i>
+            <i class="fa fa-globe fa-4x text-muted" role="img" aria-label="Translations" title="Translations"></i>
             <div class="o_web_settings_dashboard_header">
                 Translations
             </div>
@@ -165,14 +165,14 @@
                 </small>
             </div>
             <div class="mt16">
-                <a class="btn btn-primary btn-block o_load_translations"><strong>Load a Translation</strong></a>
+                <a role="button" class="btn btn-primary btn-block o_load_translations"><strong>Load a Translation</strong></a>
             </div>
         </div>
     </t>
 
     <t t-name="DashboardCompany">
         <div class="text-center o_web_settings_dashboard_company mt8">
-            <i class="fa fa-suitcase fa-4x text-muted"></i>
+            <i class="fa fa-suitcase fa-4x text-muted" role="img" aria-label="Company" title="Company"></i>
             <div class="o_web_settings_dashboard_header">
                 <t t-esc="widget.data.company_name"></t>
             </div>
@@ -182,7 +182,7 @@
                 </small>
             </div>
             <div class="mt16">
-                <a class="btn btn-primary btn-block o_setup_company"><strong>Set Up</strong></a>
+                <a role="button" class="btn btn-primary btn-block o_setup_company"><strong>Set Up</strong></a>
             </div>
         </div>
     </t>