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

diff --git a/addons/web/static/src/xml/web_calendar.xml b/addons/web/static/src/xml/web_calendar.xml
index 7f65ed93a08..41f772cd52f 100644
--- a/addons/web/static/src/xml/web_calendar.xml
+++ b/addons/web/static/src/xml/web_calendar.xml
@@ -1,7 +1,7 @@
 <template>
     <div t-name="CalendarView" class="o_calendar_container">
         <div class="o_calendar_view">
-            <div class="o_calendar_buttons"/>
+            <div class="o_calendar_buttons" role="toolbar" aria-label="Calendar toolbar"/>
             <div class="o_calendar_widget" />
         </div>
         <div class="o_calendar_sidebar_container hidden-xs">
@@ -44,17 +44,17 @@
                         <input type="checkbox" name="selection" t-att-checked="(filter.active ? true : undefined)"/><span/>
                     </div>
                     <t t-if="filter.value == 'all'">
-                        <span><i class="fa fa-users fa-fw o_cal_avatar"/></span>
+                        <span><i class="fa fa-users fa-fw o_cal_avatar" role="img" aria-label="Avatar" title="Avatar"/></span>
                     </t>
                     <t t-if="widget.avatar_field &amp;&amp; (filter.value != 'all')">
-                        <img t-attf-src="/web/image/#{widget.avatar_model}/#{filter.value}/#{widget.avatar_field}" class="o_cal_avatar"/>
+                        <img t-attf-src="/web/image/#{widget.avatar_model}/#{filter.value}/#{widget.avatar_field}" class="o_cal_avatar" alt="Avatar"/>
                     </t>
                     <t t-set="color" t-value="widget.getColor(filter.color_index)"/>
                     <span t-if="typeof color === 'number'" t-attf-class="color_filter o_underline_color_#{widget.getColor(filter.color_index)}"><t t-esc="filter.label"/></span>
                     <span t-elif="color" t-attf-style="border-bottom: 4px solid #{color};"><t t-esc="filter.label"/></span>
                     <span t-else=""><t t-esc="filter.label"/></span>
                     <t t-if="filter.id">
-                        <span class="o_remove fa fa-times" title="Remove this favorite from the list"/>
+                        <span class="o_remove fa fa-times" title="Remove this favorite from the list" role="img" aria-label="Remove this favorite from the list"/>
                    </t>
                 </div>
             </div>
@@ -64,9 +64,9 @@
     <t t-name="CalendarView.buttons">
         <div class="o_calendar_buttons">
             <t t-if="!isMobile">
-                <button class="o_calendar_button_prev btn btn-sm btn-primary"><span class="fa fa-arrow-left"/></button>
+                <button class="o_calendar_button_prev btn btn-sm btn-primary" aria-label="Previous" title="Previous"><span class="fa fa-arrow-left"/></button>
                 <button class="o_calendar_button_today btn btn-sm btn-primary">Today</button>
-                <button class="o_calendar_button_next btn btn-sm btn-primary"><span class="fa fa-arrow-right"/></button>
+                <button class="o_calendar_button_next btn btn-sm btn-primary" aria-label="Next" title="Next"><span class="fa fa-arrow-right"/></button>
             </t>
             <div class="btn-group btn-group-sm">
                 <button type="button" class="o_calendar_button_day btn btn-sm btn-default">Day</button>
@@ -78,15 +78,15 @@
 
     <t t-name="CalendarView.TodayButtonMobile">
         <span class="fa-stack o_calendar_button_today">
-            <i class="fa fa-calendar-o fa-stack-2x"></i>
+            <i class="fa fa-calendar-o fa-stack-2x" role="img" aria-label="Today" title="Today"></i>
             <strong class="o_calendar_text fa-stack-1x"><t t-esc="moment().date()"/></strong>
         </span>
     </t>
 
-    <div t-name="CalendarView.quick_create" class="o_calendar_quick_create">
+    <main t-name="CalendarView.quick_create" class="o_calendar_quick_create">
         <div class="form-group">
             <label for='name' class='control-label'>Summary:</label>
             <input type='text' name='name' class="o_input" t-att-value="widget.dataTemplate.name or None"/>
         </div>
-    </div>
+    </main>
 </template>