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

diff --git a/addons/mail/static/src/xml/composer.xml b/addons/mail/static/src/xml/composer.xml
index d09b6bc4f22..752b9febdf9 100644
--- a/addons/mail/static/src/xml/composer.xml
+++ b/addons/mail/static/src/xml/composer.xml
@@ -3,7 +3,7 @@
 
      <div t-name="mail.ChatComposer" t-attf-class="o_chat_composer #{widget.extended ? 'o_chat_composer_extended' : (widget.notInline ? '' : 'o_chat_inline_composer')} #{widget.isMini ? 'o_chat_mini_composer' : ''}">
          <div class="o_composer_container">
-             <img t-if="widget.avatarURL" height="36" width="36" class="o_thread_message_sidebar o_chatter_avatar img-circle" t-att-src="widget.avatarURL"/>
+             <img t-if="widget.avatarURL" height="36" width="36" class="o_thread_message_sidebar o_chatter_avatar img-circle" t-att-src="widget.avatarURL" alt="Avatar"/>
              <div t-if="widget.extended" class="o_composer_subject">
                  <input tabindex="1" type="text" placeholder="Subject" class="o_input"/>
              </div>
@@ -11,9 +11,9 @@
                 <div class="o_composer_input">
                     <textarea class="o_input o_composer_text_field" tabindex="2" placeholder="Write something..."/>
                     <div class="o_chatter_composer_tools">
-                        <button tabindex="4" class="btn btn-sm btn-icon fa fa-smile-o o_composer_button_emoji" type="button" data-toggle="popover"/>
-                        <button tabindex="5" class="btn btn-sm btn-icon fa fa-paperclip o_composer_button_add_attachment" type="button"/>
-                        <button t-if="widget.options.isMobile" tabindex="3" class="btn btn-sm btn-icon fa fa-paper-plane-o o_composer_button_send" type="button"/>
+                        <button tabindex="4" class="btn btn-sm btn-icon fa fa-smile-o o_composer_button_emoji" type="button" data-toggle="popover" title="Emojis" aria-label="Emojis"/>
+                        <button tabindex="5" class="btn btn-sm btn-icon fa fa-paperclip o_composer_button_add_attachment" type="button" aria-label="Add attachment" title="Add attachment"/>
+                        <button t-if="widget.options.isMobile" tabindex="3" class="btn btn-sm btn-icon fa fa-paper-plane-o o_composer_button_send" type="button" title="Send" aria-label="Send"/>
                     </div>
                 </div>
              </div>
@@ -36,18 +36,18 @@
 
     <div t-name="mail.ChatComposer.emojis" class="o_mail_emoji_container">
         <t t-foreach="emojis" t-as="emoji">
-            <button t-att-data-emoji="emoji.source" class="btn btn-link o_mail_emoji" t-att-title="emoji.description">
+            <button t-att-data-emoji="emoji.source" class="btn btn-link o_mail_emoji" t-att-title="emoji.description" t-att-aria-label="emoji.description">
                 <t t-raw="emoji.unicode_source"/>
             </button>
         </t>
     </div>
 
     <t t-name="mail.AbstractMentionSuggestions">
-        <ul class="dropdown-menu" aria-labelledby="dropdownMailMentionMenu">
+        <ul class="dropdown-menu" role="menu">
             <t t-foreach="suggestions" t-as="suggestion">
-                <li t-if="suggestion.divider" class="divider"/>
+                <li role="separator" t-if="suggestion.divider" class="divider"/>
                 <li t-if="!suggestion.divider" class="o_mention_proposition" t-att-data-id="suggestion.id">
-                    <a href="#"/>
+                    <a role="menuitem" href="#"/>
                 </li>
             </t>
         </ul>
@@ -79,15 +79,15 @@
     </t>
 
     <t t-name="FieldMany2ManyTagsEmail" t-extend="FieldMany2ManyTag">
-        <t t-jquery="span[t-attf-class*=badge]" t-operation="replace">
+        <t t-jquery="button[t-attf-class*=badge]" t-operation="replace">
             <t t-set="email_error" t-value="''"/>
             <t t-if="el.email.indexOf('@') &lt; 0">
                 <t t-set="email_error" t-value="'o_tag_error'"/>
             </t>
-            <span t-attf-class="badge dropdown o_tag_color_0 #{email_error}" t-att-data-color="color" t-att-data-index="el_index" t-att-data-id="el.id">
+            <button t-attf-class="badge dropdown o_tag_color_0 #{email_error}" t-att-data-color="color" t-att-data-index="el_index" t-att-data-id="el.id">
                 <span class="o_badge_text" t-attf-title="#{el.email}"><t t-esc="el.display_name"/></span>
-                <span t-if="!readonly" class="fa fa-times o_delete"/>
-            </span>
+                <span t-if="!readonly" class="fa fa-times o_delete" role="img" aria-label="Delete" title="Delete"/>
+            </button>
         </t>
     </t>
 </templates>