[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/mass_mailing/static/src/xml/mass_mailing.xml b/addons/mass_mailing/static/src/xml/mass_mailing.xml
index 71f00f2937d..0cb519ed16d 100644
--- a/addons/mass_mailing/static/src/xml/mass_mailing.xml
+++ b/addons/mass_mailing/static/src/xml/mass_mailing.xml
@@ -1,20 +1,20 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <templates id="template" xml:space="preserve">
     <div t-name="mass_mailing.theme_selector" class="o_mail_theme_selector">
-        <a href="#" class="btn btn-xs dropdown-toggle" data-toggle="dropdown">
-            <i class="fa fa-paint-brush"/> Change Style
+        <a role="button" href="#" class="btn btn-xs dropdown-toggle" data-toggle="dropdown">
+            <span class="fa fa-paint-brush">Change Style</span>
         </a>
-        <div class="dropdown-menu">
+        <div class="dropdown-menu" role="menu">
             <li t-foreach="themes" t-as="theme">
-                <a href="#">
+                <a role="menuitem" href="#">
                     <div class="o_thumb small"  t-attf-style="background-image: url(#{theme.img}_small.png)"/>
                     <div class="o_thumb large" t-attf-style="background-image: url(#{theme.img}_large.png)"/>
                     <div class="o_thumb logo" t-attf-style="background-image: url(#{theme.img}_logo.png)"/>
                 </a>
             </li>
             <li t-if="themes.length === 1" class="o_mass_mailing_themes_upgrade">
-                <a href="#">
-                    <div class="o_thumb"><i class="fa fa-plus"/></div>
+                <a role="menuitem" href="#">
+                    <div class="o_thumb"><i class="fa fa-plus" role="img" aria-label="Upgrade theme" title="Upgrade theme"/></div>
                 </a>
             </li>
         </div>