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

diff --git a/addons/mail/static/src/xml/activity.xml b/addons/mail/static/src/xml/activity.xml
index 9bdcfcdcb90..9d2f0d72ed8 100644
--- a/addons/mail/static/src/xml/activity.xml
+++ b/addons/mail/static/src/xml/activity.xml
@@ -2,22 +2,22 @@
 <templates xml:space="preserve">
     <t t-name="mail.activity_items">
         <div class="o_thread_date_separator o_border_dashed" data-toggle="collapse" data-target="#o_chatter_planned_activities">
-            <span class="o_thread_date btn">
-                <i class="fa fa-fw fa-caret-down"/>
-                Planned activities
+            <a href="#" role="button" class="o_thread_date btn">
+                <span class="fa fa-fw fa-caret-down">
+                Planned activities</span>
                 <small class="o_chatter_planned_activities_summary ml8">
                     <span class="label img-circle label-danger"><t t-esc="nbOverdueActivities"/></span>
                     <span class="label img-circle label-warning"><t t-esc="nbTodayActivities"/></span>
                     <span class="label img-circle label-success"><t t-esc="nbPlannedActivities"/></span>
                 </small>
-            </span>
+            </a>
         </div>
         <div id="o_chatter_planned_activities" class="collapse in">
             <t t-foreach="activities" t-as="activity">
                 <div class="o_thread_message" style="margin-bottom: 10px">
                     <div class="o_thread_message_sidebar">
                         <div class="o_avatar_stack">
-                            <img t-attf-src="/web/image#{activity.user_id[0] >= 0 ? ('/res.users/' + activity.user_id[0] + '/image_small') : ''}" class="o_thread_message_avatar img-circle mb8" t-att-title="activity.user_id[1]"/>
+                            <img t-attf-src="/web/image#{activity.user_id[0] >= 0 ? ('/res.users/' + activity.user_id[0] + '/image_small') : ''}" class="o_thread_message_avatar img-circle mb8" t-att-title="activity.user_id[1]" t-att-alt="activity.user_id[1]"/>
                             <i t-att-class="'o_avatar_icon fa ' + activity.icon + ' bg-' + (activity.state == 'planned'? 'success' : (activity.state == 'today'? 'warning' : 'danger')) + '-full'"
                                t-att-title="activity.activity_type_id[1]"/>
                         </div>
@@ -30,7 +30,7 @@
                             <em> for </em>
                             <t t-esc="activity.user_id[1]" />
                             <a class="btn btn-link btn-info text-muted collapsed o_activity_info ml4" role="button" data-toggle="collapse" t-attf-data-target="#o_chatter_activity_info_#{activity.id}">
-                                <i class="fa fa-info-circle"></i>
+                                <i class="fa fa-info-circle" role="img" aria-label="Info" title="Info"></i>
                             </a>
                             <div class="o_thread_message_collapse collapse" t-attf-id="o_chatter_activity_info_#{activity.id}">
                                 <dl class="dl-horizontal well">
@@ -44,7 +44,7 @@
                                     </dd>
                                     <dt>Assigned to</dt>
                                     <dd class="mb8">
-                                        <img t-attf-src="/web/image#{activity.user_id[0] >= 0 ? ('/res.users/' + activity.user_id[0] + '/image_small') : ''}" height="18" width="18" class="img-circle mr4" t-att-title="activity.user_id[1]"/>
+                                        <img t-attf-src="/web/image#{activity.user_id[0] >= 0 ? ('/res.users/' + activity.user_id[0] + '/image_small') : ''}" height="18" width="18" class="img-circle mr4" t-att-title="activity.user_id[1]" t-att-alt="activity.user_id[1]"/>
                                         <b><t t-esc="activity.user_id[1]"/></b>
                                         <em>, due on </em><span t-attf-class="o_activity_color_#{activity.state}"><t t-esc="activity.date_deadline.format(date_format)"/></span>
                                     </dd>
@@ -55,14 +55,14 @@
                             <t t-raw="activity.note"/>
                         </div>
                         <div class="o_thread_message_tools btn-group">
-                            <a href="#" class="btn btn-link btn-success text-muted btn-sm o_activity_done o_activity_link mr8" t-att-data-activity-id="activity.id" t-att-data-previous-activity-type-id="activity.activity_type_id[0]" data-toggle="popover">
-                                <i class="fa fa-check"/> Mark Done
+                            <a role="button" href="#" class="btn btn-link btn-success text-muted btn-sm o_activity_done o_activity_link mr8" t-att-data-activity-id="activity.id" t-att-data-previous-activity-type-id="activity.activity_type_id[0]" data-toggle="popover">
+                                <span class="fa fa-check">Mark Done</span>
                             </a>
-                            <a href="#" class="btn btn-link btn-default text-muted btn-sm o_activity_edit o_activity_link" t-att-data-activity-id="activity.id">
-                                <i class="fa fa-pencil"/> Edit
+                            <a role="button" href="#" class="btn btn-link btn-default text-muted btn-sm o_activity_edit o_activity_link" t-att-data-activity-id="activity.id">
+                                <span class="fa fa-pencil">Edit</span>
                             </a>
-                            <a href="#" class="btn btn-link btn-sm btn-danger text-muted o_activity_unlink o_activity_link" t-att-data-activity-id="activity.id">
-                                <i class="fa fa-times"/> Cancel
+                            <a role="button" href="#" class="btn btn-link btn-sm btn-danger text-muted o_activity_unlink o_activity_link" t-att-data-activity-id="activity.id">
+                                <span class="fa fa-times">Cancel</span>
                             </a>
                         </div>
                     </div>