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

diff --git a/addons/mail/static/src/xml/chat_window.xml b/addons/mail/static/src/xml/chat_window.xml
index f1138db71d5..7d0fce19ee6 100644
--- a/addons/mail/static/src/xml/chat_window.xml
+++ b/addons/mail/static/src/xml/chat_window.xml
@@ -20,15 +20,15 @@
 
     <t t-name="mail.ChatWindowsDropdown">
         <div t-attf-class="o_chat_window o_in_home_menu o_chat_window_dropdown dropup #{open ? 'open' : ''}">
-            <span class="o_chat_window_dropdown_toggler dropdown-toggle" data-toggle="dropdown">
-                <i class="fa fa-comments-o"/> <t t-esc="sessions.length"/>
+            <span role="alert" class="o_chat_window_dropdown_toggler dropdown-toggle" data-toggle="dropdown" title="Unread messages">
+                <i class="fa fa-comments-o" role="img" aria-label="Messages"/> <t t-esc="sessions.length"/>
                 <span class="o_total_unread_counter">
                     <t t-if="unread_counter"><t t-esc="unread_counter"/></t>
                 </span>
             </span>
-            <ul class="dropdown-menu">
+            <ul class="dropdown-menu" role="menu">
                 <t t-foreach="sessions" t-as="session">
-                    <li class="o_chat_header" t-att-data-session-id="session.id">
+                    <li role="menuitem" class="o_chat_header" t-att-data-session-id="session.id">
                         <t t-call="mail.ChatWindowHeaderContent">
                             <t t-set="status" t-value="session.window.status"/>
                             <t t-set="title" t-value="session.window.title"/>
@@ -42,7 +42,7 @@
 
     <t t-name="mail.ChatWindowHeaderContent">
         <span t-if="widget.isMobile">
-            <a href="#" class="o_chat_window_close fa fa-1x fa-arrow-left mr4"/>
+            <a href="#" class="o_chat_window_close fa fa-1x fa-arrow-left mr4" aria-label="Close chat window" title="Close chat window"/>
         </span>
         <span class="o_chat_title">
             <t t-if="status" t-call="mail.chat.UserStatus"/>
@@ -50,7 +50,7 @@
             <span t-if="unread_counter"> (<t t-esc="unread_counter"/>)</span>
         </span>
         <span t-if="!widget.isMobile" class="o_chat_window_buttons">
-            <a href="#" class="o_chat_window_close fa fa-close"/>
+            <a href="#" class="o_chat_window_close fa fa-close" aria-label="Close chat window" title="Close chat window"/>
         </span>
     </t>