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

diff --git a/addons/mail/static/src/xml/systray.xml b/addons/mail/static/src/xml/systray.xml
index a6e52ab555a..6350e07d2da 100644
--- a/addons/mail/static/src/xml/systray.xml
+++ b/addons/mail/static/src/xml/systray.xml
@@ -4,15 +4,15 @@
     <t t-name="mail.chat.MessagingMenu">
         <li class="o_mail_navbar_item">
             <a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false" title="Conversations" href="#">
-                <i class="fa fa-comments"/> <span class="o_notification_counter badge"/>
+                <i class="fa fa-comments" role="img" aria-label="Messages"/> <span class="o_notification_counter badge"/>
             </a>
             <ul class="o_mail_navbar_dropdown dropdown-menu" role="menu">
-                <li t-if="widget.isMobile">
+                <li role="menuitem" t-if="widget.isMobile">
                     <div class="o_mail_navbar_mobile_header">
                         <button type="button" class="btn btn-default btn-sm o_new_message"> New message </button>
                     </div>
                 </li>
-                <li t-if="!widget.isMobile" class="o_mail_navbar_dropdown_top">
+                <li role="menuitem" t-if="!widget.isMobile" class="o_mail_navbar_dropdown_top">
                     <div>
                         <button type="button" class="btn btn-sm btn-link o_filter_button active"> All </button>
                         <button type="button" class="btn btn-sm btn-link o_filter_button" data-filter='chat'> Chat </button>
@@ -20,20 +20,17 @@
                     </div>
                     <button type="button" class="btn btn-sm btn-link o_new_message"> New message </button>
                 </li>
-                <li class="o_mail_navbar_dropdown_channels"/>
-                <li t-if="widget.isMobile">
+                <li role="menuitem" class="o_mail_navbar_dropdown_channels"/>
+                <li role="menuitem" t-if="widget.isMobile">
                     <div class="o_mail_mobile_tabs">
                         <div class="o_mail_mobile_tab o_filter_button active">
-                            <span class="fa fa-envelope"/>
-                            <span class="o_tab_title">All</span>
+                            <span class="o_tab_title fa fa-envelope">All</span>
                         </div>
                         <div class="o_mail_mobile_tab o_filter_button" data-filter='chat'>
-                            <span class="fa fa-user"/>
-                            <span class="o_tab_title">Chat</span>
+                            <span class="o_tab_title fa fa-user">Chat</span>
                         </div>
                         <div class="o_mail_mobile_tab o_filter_button" data-filter='channels'>
-                            <span class="fa fa-users"/>
-                            <span class="o_tab_title">Channels</span>
+                            <span class="o_tab_title fa fa-users">Channels</span>
                         </div>
                     </div>
                 </li>
@@ -61,7 +58,7 @@
         <t t-foreach="activities" t-as="activity">
             <div class="o_mail_channel_preview" t-att-data-res_model="activity.model" t-att-data-model_name="activity.name" data-filter='my'>
                 <div class="o_mail_channel_image o_mail_channel_app">
-                    <img t-att-src="activity.icon"/>
+                    <img t-att-src="activity.icon" alt="Activity"/>
                 </div>
                 <div class="o_channel_info">
                     <div class="o_channel_title">
@@ -85,10 +82,10 @@
     <t t-name="mail.chat.ActivityMenu">
         <li class="o_mail_navbar_item">
             <a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false" title="Activities" href="#">
-                <i class="fa fa-clock-o"/> <span class="o_notification_counter badge"/>
+                <i class="fa fa-clock-o" role="img" aria-label="Activities"/> <span class="o_notification_counter badge"/>
             </a>
             <ul class="o_mail_navbar_dropdown dropdown-menu" role="menu">
-                <li class="o_mail_navbar_dropdown_channels"/>
+                <li role="menuitem" class="o_mail_navbar_dropdown_channels"/>
             </ul>
         </li>
     </t>